文章导读：本节实现视频的录制和保存功能。推荐阅读方式：实操。
为了更好的讲解代码，我们还是把软件的截图贴出来，如下图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(){ } }