web技术分享| webRTC 媒体流录制

音视频的录制音视频的分为服务端录制和客户端录制，下面主要讲的是利用webrtc进行客户端录制的方式。
因为WebRTC 录制音视频流之后，最终是通过 Blob 对象将数据保存成多媒体文件的，

• Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

• Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

• 要从其他非blob对象和数据构造一个 Blob，请使用 Blob() 构造函数。要创建一个 blob 数据的子集 blob，请使用 slice()方法。要获取用户文件系统上的文件对应的 Blob 对象。

• 接受 Blob 对象的API也被列在 File 文档中。

了解完Blob的特性之后呢， 我们进入正题。

获取元素声明变量

let mediaRecorder;
let recordedBlobs;

const recordedVideo = document.querySelector('video#recorded');
const recordButton = document.querySelector('button#record');
const playButton = document.querySelector('button#play');
const downloadButton = document.querySelector('button#download');

绑定点击事件

• URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

• URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。你可以在 sourceopen 被处理之后的任何时候调用 revokeObjectURL()。这是因为 createObjectURL() 仅仅意味着将一个媒体元素的 src 属性关联到一个 MediaSource 对象上去。调用revokeObjectURL() 使这个潜在的对象回到原来的地方，允许平台在合适的时机进行垃圾收集。

recordButton.addEventListener('click', () => {
   
    if (recordButton.textContent === 'Start Recording') {
   
        startRecording();
    } else {
   
        stopRecording();
        recordButton.textContent = 'Start Recording';
        playButton.disabled = false;
        downloadButton.disabled = false;
    }
});

playButton.addEventListener('click', () => {
   
    const superBuffer = new Blob(recordedBlobs);
    recordedVideo.src = null;
    recordedVideo.srcObject = null;
    recordedVideo.src = window.URL.createObjectURL(superBuffer);
    recordedVideo.controls = true;