文章导读:本节实现视频的录制和保存功能。推荐阅读方式:实操。
为了更好的讲解代码,我们还是把软件的截图贴出来,如下图2.6.1。
图 2.6.1 (软件界面截图)
本节内容,我们完成该软件的最后一个功能:视频的录制和保存。先说下视频的录制,在webrtc中如何实现视频的录制?主要依赖一个类——MediaRecorder,该类是一个全局类,使用的时候可以直接实例化,实例化时需要传入两个参数,第一个参数是一个流对象,即通过getUserMedia获取的流对象;第二个参数是录制的视频格式,以及编码方式,示例代码如下。
let recordOption = { mimeType:"video/webm;codecs=vp8" } if(!MediaRecorder.isTypeSupported(recordOption.mimeType)){ throw new Error("录制时不支持该格式"+recordOption.mimeType); } let recordObject = new MediaRecorder(mediaStream,recordOption)
如上的代码,mediaStream是一个流对象,在本软件中,我们在cameraManager中创建了一个mediaStream,也正是为了遇到这种情况时考虑;recordOption则录制时的配置对象,其中mimeType是视频的格式以及编码,“video/webm”表示的是录制的类型为视频,当然还可以指定为音频audio,webm表示视频的格式,codecs=vp8表示的是采用vp8的编解码规范。recordObject是MediaRecorder的实例对象,当然,单单创建了对象还不会开始录制,我们必须得手动调用开始录制方法,代码如下。
recordObject.start(10)
start方法还传进了一个参数10,表示每片数据时长为10毫秒,一段完整的视频正是由多个“10毫秒”长的片段组成的。正在录制的过程中,我们如何存储数据?这里就要用recordObject对象中的一个回调方法——ondataavailable,每个一定的时间就触发一次,没触发一次就说明完成了一片数据的采集,这里的start方法我们传入10,那就说明每10毫秒ondataavailable会被触发一次。代码如下。
recordObject.ondataavailable = (e)=>{ if(e && e.data && e.data.size){ // 这里把数据片缓存起来 } }
停止录制的方法也很简单,直接调用其stop方法,代码如下。
recordObject.stop();
这些就是视频录制的核心功能方法,现在我们就将其集成到系统中,从业务的角度,录制功能可以看做是单独的功能,于是单独创建一个对象来处理录制的业务——recordManager。该对象有两个方法,两个属性。两个方法:开始录startRecord、结束录制stopRecord。两个属性:数据缓存对象buffer、MediaRecorder的实例化对象recordObject。对象结构如下。
// 录制管理对象 const recordManager = { // 二进制数据的数组 buffer:[], //录制实例 recordObject:null, // 开始录制 startRecord(){ }, // 停止录制 stopRecord(){ } }