WebRTC

浏览器上的音视频通信相关的能力叫做 WebRTC（real time communication），是随着网速越来越快、音视频需求越来越多，而被浏览器所实现的音视频的标准 API。

浏览器提供了 navigator.mediaDevices.getDisplayMedia 和 navigator.mediaDevices.getUserMedia 的 api，分别可以用来获取屏幕的流、麦克风和摄像头的流。

从名字就可以看出来 getDisplayMedia 获取的是屏幕的流，getUserMedia 获取的是和用户相关的，也就是麦克风、摄像头这些的流。

获取流之后设置到 video 的 srcObject 属性上就可以实现播放。

如果想要录制视频，需要用 MediaRecorder 的 api，它可以监听流中的数据，我们可以把获取到的数据保存到数组中。然后回放的时候设置到另一个视频的 srcObject 属性就可以了。

下载也是基于 MediaRecorder 录制的数据，转成 blob 后通过 a 标签触发下载。

代码实现

在页面放两个 video 标签，一个用于实时的看录制的视频，一个用于回放。

<selection>
    <video autoplay id = "player"></video>
    <video id = "recordPlayer"></video>
</selection>
<section>	
    <button id = "startScreen">开启录屏</button>
    <button id = "startCamera">开启摄像头</button>
    <button id = "stop">结束</button>
    <button id = "reply">回放</button>
    <button id = "download">下载</button>
</selection>

“开始录屏” 和 “开启摄像头” 按钮点击的时候都开启录制，但是方式不同。

startScreenBtn.addEventListener('click', () => {
    record('screen');  //录屏
});
startCameraBtn.addEventListener('click', () => {
    record('camera');   //摄像头
});

一个是用 getUserMedia 的 api 来获取麦克风、摄像头数据，一个是用 getDisplayMedia 的 api 获取屏幕数据。

sync function record(recordType) {
    const getMediaMethod = recordType === 'screen' ? 'getDisplayMedia' : 'getUserMedia';
    const stream = await navigator.mediaDevices[getMediaMethod]({
        video: {
            width: 500,
            height: 300,
            frameRate: 20
        }
    });

    player.srcObject = stream;  //摄像头展示
}

指定下宽高和帧率等参数，把返回的流设置到 video 的 srcObject 属性上，就可以实时看到对应的音视频。

然后，还要做录制，需要用 MediaRecorder 的 api，传入 stream，然后调用 start 方法，开启录制。

let blobs = [];
let mediaRecorder

mediaRecorder = new MediaRecorder(stream, {
    mimeType: 'video/webm'
});
mediaRecorder.ondataavailable = (e) => {
    blobs.push(e.data);
};
mediaRecorder.start(100);

start 的参数是分割的大小，传入 100 代表每 100ms 保存一次数据。

监听 dataavailable 事件，在其中把获取到的数据保存到 blobs 数组中。

之后根据 blobs 数组生成 blob，就可以分别做回放和下载了：

replyBtn.addEventListener('click', () => {
    const blob = new Blob(blobs, {type : 'video/webm'});
    recordPlayer.src = URL.createObjectURL(blob);
    recordPlayer.play();
});

blob 要经过 URL.createObjectURL 的处理，才能作为 object url 来被播放。