3┃音视频直播系统之浏览器中通过 WebRTC 直播视频实时录制回放下载

一、录制分类

• 在音视频会议、在线教育等系统中，录制是一个特别重要的功能

• 录制一般分为服务端录制和客户端录制

• 服务端录制：优点是不用担心客户因自身电脑问题造成录制失败（如磁盘空间不足），也不会因录制时抢占资源（CPU 占用率过高）而导致其他应用出现问题等；缺点是实现的复杂度很高。

• 客户端录制：优点是方便录制方（如老师）操控，并且所录制的视频清晰度高，实现相对简单。但是它对内存、硬盘的要求 比较高

• 它们各有优劣，因此大系统一般会同时支持客户端录制与服务端录制。

二、录制思考

• 第一：录制后音视频流的存储格式是什么呢？是直接录制原始数据，还是录制成某种多媒体格式（如 MP4 ）

• 第二：录制下来的音视频流如何播放？是使用普通的播放器播放，还是使用私有播放器，如果你的业务是多人互动类型，且回放时也要和直播时一样，那么你就必须使用私有播放器，因为普通播放器是不支持同时播放多路视频的

• 第三：启动录制后多久可以回放呢？录制完立即回放？边录边看？录完后过一段时间可观看？

• 录制完立即回放当然体验性最好，但是清晰度却不行，在平时的直播中应该有所体验；录完一段时间再观看，可以对视频进行转码获得更好的清晰度，但是对用户的体验却不好，不能实时观看。

三、录制音视频

• WebRTC 录制音视频流之后，最终是通过 Blob 对象将数据保存成多媒体文件的

• Blob（Binary Large Object）是 JavaScript 的大型二进制对象类型 var aBlob = new Blob(array, options);

• WebRTC 中提供了 MediaRecorder 类去录制本地音视频 var mediaRecorder = new MediaRecorder(stream[, options]);

• stream：通过 getUserMedia 获取的本地视频流或通过 RTCPeerConnection 获取的远程视频流

• options：可选项，指定视频格式、编解码器、码率等相关信息，如 mimeType: 'video/webm;codecs=vp8'

• MediaRecorder 对象还有一个特别重要的事件，即 ondataavailable 事件。当 MediaRecoder 捕获到数据时就会触发该事件。通过它，我们才能将音视频数据录制下来

    
    
    
    



    Start Record

四、回放录制视频

• 通过上面的方法录制好内容 压入到 blob 以后

• 首先根据 buffer 生成 Blob 对象

• 然后，根据 Blob 对象生成 URL，并通过

    
    
    
    



    
    Play

五、下载录制视频

• 也是先创建一个 Blob 对象，并根据 Blob 对象创建 URL；

• 然后再创建一个 标签，设置 a 标签的 href 和 download 属性

• 这样当用户点击该标签之后，录制好的文件就下载下来了

    
    
    
    



    Download