WebRTC
浏览器上的音视频通信相关的能力叫做 WebRTC（real time communication），是随着网速越来越快、音视频需求越来越多，而被浏览器所实现的音视频的标准 API。
浏览器提供了 navigator.mediaDevices.getDisplayMedia 和 navigator.mediaDevices.getUserMedia 的 api，分别可以用来获取屏幕的流、麦克风和摄像头的流。
从名字就可以看出来 getDisplayMedia 获取的是屏幕的流，getUserMedia 获取的是和用户相关的，也就是麦克风、摄像头这些的流。
获取流之后设置到 video 的 srcObject 属性上就可以实现播放。
如果想要录制视频，需要用 MediaRecorder 的 api，它可以监听流中的数据，我们可以把获取到的数据保存到数组中。然后回放的时候设置到另一个视频的 srcObject 属性就可以了。
下载也是基于 MediaRecorder 录制的数据，转成 blob 后通过 a 标签触发下载。
代码实现
在页面放两个 video 标签，一个用于实时的看录制的视频，一个用于回放。
“开始录屏” 和 “开启摄像头” 按钮点击的时候都开启录制，但是方式不同。
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 来被播放。