使用 recordRTC 实现web 端音视频录制

相信大家在线上笔试过程中，都曾有经历过必须打开摄像头的过程。

其背后究竟是什么东西发挥了作用呢？ 这期请跟随艾米栗的思路。了解一下。

一、webRTC 的历史

可阅读：

webrtc 官网：https://webrtc.org/getting-started/media-devices

webrtc 中文版官网： 基础知识 | WebRTC中文网-最权威的RTC实时通信平台

MDN 关于 webrtc 的介绍： WebRTC API - Web API 接口参考 | MDN

这一部分内容我不做展开介绍。因为我也只是简单的使用者。

针对其很多功能点，下面这个网址，描述的更加清晰：

针对其很多功能点， 介绍 | 给好奇者的WebRTC

二、recordRTC 和 webRTC 的关系

webRTC API 是 web 端进行实时数据流传输的基石。但由于其 API 的多样，针对不同的场景，其他贡献者们做了有效封装，recordRTC 就是其中一个。 其基于 webrtc 的 getUserMedia API 实现媒体设备访问， 并对 webrtc提供的视频流函数进行了封装， 使开发者可以简单函数调用就能实现视频录制。

这一点可以在 webrtc 的文档和 recordRTC 的代码中印证。

三、如何使用 recordRTC

从 recordRTC 的官网，摘取了使用 recordRTC 进行录制 demo：

// 这个 getUserMedia 是 webrtc 出品的获取媒体设备的 api。
let stream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
let recorder = new RecordRTCPromisesHandler(stream, {
    type: 'video'
});
// recordrtc  将webrtc 中获取流的函数 进行封装， 让开发者的注意力集中在录像任务本身。
recorder.startRecording();

const sleep = m => new Promise(r => setTimeout(r, m));
await sleep(3000);

// 通过简单命令，可以实现录制的开始和暂停
await recorder.stopRecording();
// 封装了 getBlob 函数 实现视频流的获取
let blob = await recorder.getBlob();
invokeSaveAsDialog(blob);

源码： GitHub - muaz-khan/RecordRTC: RecordRTC is WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows.

四、总结

以上是一篇简单的入门介绍。 接下来我将出一篇使用 demo 和问题处理。