RecordRTC

定义

RecordRTC是一个完全运行在客户端的JavaScript库，用来录制WebRTC产生的音视频媒体流，无需服务器参与即可在浏览器内完成采集与生成文件的过程^[1]。它面向支持WebRTC getUserMedia接口的现代浏览器，把各类设备与浏览器上的录制方案集中到一处^[2]。

按照官方说明，该库覆盖音频、视频、屏幕以及画布（含2D与3D动画）的录制，并可输出动态GIF^[3]。库内提供若干各自独立的录制器，使用者可以显式指定，也可以让代码按浏览器自动挑选^[4]。

原理

录制流程通常先由WebRTC的getUserMedia（或屏幕共享接口）取得一个MediaStream对象，再把它交给RecordRTC的构造函数，配合type、mimeType、recorderType等参数建立录制实例^[5]。调用startRecording开始采集，stopRecording时通过回调取得URL或Blob，其中Blob可以放入FormData用XMLHttpRequest上传，也可以调用save方法弹出保存对话框^[4]。

库内部封装了多个底层录制器：MediaStreamRecorder基于浏览器原生的MediaRecorder，音视频通用；StereoAudioRecorder基于Web Audio API录制音频；WhammyRecorder用Whammy把逐帧画面拼装成WebM；此外还有录制画布的CanvasRecorder与生成GIF的GifRecorder，后者的实现借用了jsGif^[3]。当只给出type参数时，库会按浏览器选择默认录制器，例如在Chrome或Opera下录制视频会落到WhammyRecorder^[4]。

输出容器与编码由mimeType决定，常见取值包括video/webm（配合vp8、vp9或h264编码）、audio/webm以及audio/wav等，不同浏览器支持范围不同，库提供isMimeTypeSupported方法用于探测并回退^[4]。音频参数还可用sampleRate与bufferSize调整，前者的合法区间为22050至96000，bufferSize的合法取值为256至16384之间的2的幂次，取值不当会录出空白音频^[4]。

发展历程

该库由Muaz Khan开发，其许可证文件标注的版权年份区间为2013年至2020年^[6]。它属于作者维护的WebRTC-Experiment系列实验项目之一，同系列还包括RTCMultiConnection、DataChannel等，整个系列均以MIT许可证发布^[7]。基于MIT许可，该库允许在商业与非商业产品中免费使用^[2]。

该库可通过npm、bower以及内容分发网络等多种方式引入，知名内容分发网络cdnjs也收录了它的各个版本^[3]。它在GitHub上获得数千颗星标，是同类项目中被较多依赖的录制库之一^[8]。

应用

该库的典型用途是网页端的录音与录屏，例如在线课程或面试系统中录制答题音视频、在线客服或表单中提交语音与视频留言，以及用录屏方式复现问题^[9]。它也被集成进多个前端框架与播放器生态，官方文档列出了与Angular、React、Video.js以及Meteor配合使用的参考项目^[3]。

在会议场景中，该库支持一次传入多个MediaStream，把本地流、远端流与屏幕流合并录制成单个WebM或MP4文件，并可借助内部录制器的方法在录制过程中增加音频流或替换视频流^[10]。除音视频外，它还能把页面元素或Canvas画布上的绘制内容录成视频，用于演示与动画记录^[4]。

局限

浏览器差异是主要限制之一。较早版本的官方说明显示，Microsoft Edge普通版本仅支持音频，不支持视频、画布与屏幕录制，Safari当时也需要预览版才能录制视频^[2]。社区讨论也指出，在iOS等平台上一度缺少可用的WebRTC支持，导致网页端录制无法直接运行^[11]。

音频录制存在若干已知约束。早期文档明确说明单声道音频录制会失败，建议只使用立体声，并要求Windows系统上音频输入设备与输出设备的采样率一致，同时仅能使用默认麦克风设备^[12]。此外，请求页面的协议须为http、https、chrome扩展或file之一，若网页与工作线程文件分属http与https不同协议，会抛出安全错误^[12]。

个别功能仍不完善。早期文档记载Firefox存在无法暂停录制的缺陷，虽然其mediaRecorder状态会从recording变为paused，但内部录制器并未真正暂停^[4]。由于录制结果以Blob形式保留在浏览器内存中，长时间或大体积录制需要使用者自行采用分片方式处理，该库本身并未内置分片落盘机制^[9]。

参见

• WebRTC —— RecordRTC 所依赖的实时音视频通信技术，为其提供媒体流来源。

• MediaRecorder —— 浏览器原生的媒体录制接口，是 RecordRTC 底层实现的依据之一。

• Canvas —— 画布元素，其绘制内容可通过 RecordRTC 录制成视频。

• JavaScript —— RecordRTC 所使用的编程语言。

• GIF —— 一种图像格式，该库可将其作为录制输出类型。