快速入门 WebRTC：屏幕和摄像头的录制、回放、下载

2023-02-28

url blob 摄像头

不知你是否用过web版的视频面试，或者web版在线会议，它们都支持分享屏幕、也能开启摄像头。这些都是浏览器上实现的，作为前端开发，是否好奇过这些功能的实现原理呢?浏览器上的音视频通信相关的能力叫做WebRTC(realtimecommunication)，是随着网速越来越快、音视频需求越来越多，而被

不知你是否用过 web 版的视频面试，或者 web 版在线会议，它们都支持分享屏幕、也能开启摄像头。这些都是浏览器上实现的，作为前端开发，是否好奇过这些功能的实现原理呢?

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

音视频通信的流程有五步：采集、编码、通信、解码、渲染。

这五步比较好理解，但是每一步都有挺多内容的。

今天我们就来实现下采集的部分，来快速入下门，直观感受下 WebRTC 能做什么吧。

我们会实现屏幕的录制、摄像头的录制，并且能够回放录制的内容，还支持下载。

那我们开始吧。

思路分析

浏览器提供了 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> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

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

startScreenBtn.addEventListener('click', () => { 
    record('screen'); 
}); 
startCameraBtn.addEventListener('click', () => { 
    record('camera'); 
}); 
1.
2.
3.
4.
5.
6.

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

async 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; 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

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

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

let blobs = [], mediaRecorder; 
 
mediaRecorder = new MediaRecorder(stream, { 
    mimeType: 'video/webm' 
}); 
mediaRecorder.ondataavailable = (e) => { 
    blobs.push(e.data); 
}; 
mediaRecorder.start(100); 
1.
2.
3.
4.
5.
6.
7.
8.
9.

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(); 
}); 
1.
2.
3.
4.
5.

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

下载：

download.addEventListener('click', () => { 
    var blob = new Blob(blobs, {type: 'video/webm'}); 
    var url = URL.createObjectURL(blob); 
 
    var a = document.createElement('a'); 
    a.href = url; 
    a.style.display = 'none'; 
    a.download = 'record.webm'; 
    a.click(); 
}); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

生成一个隐藏的 a 标签，设置 download 属性就可以支持下载。然后触发 click 事件。

目前为止，我们已经实现了麦克风、摄像头、屏幕的录制，支持了回放和下载。

这里也贴一份：

<html> 
<head> 
        <title>录屏并下载</title> 
</head> 
<body> 
        <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> 
 
<script> 
    const player = document.querySelector('#player'); 
    const recordPlayer = document.querySelector('#recordPlayer'); 
    let blobs = [], mediaRecorder; 
 
    async 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; 
 
        mediaRecorder = new MediaRecorder(stream, { 
            mimeType: 'video/webm' 
        }); 
        mediaRecorder.ondataavailable = (e) => { 
            blobs.push(e.data); 
        }; 
        mediaRecorder.start(100); 
    } 
 
    const downloadBtn = document.querySelector('#download'); 
    const startScreenBtn = document.querySelector('#startScreen'); 
    const startCameraBtn = document.querySelector('#startCamera'); 
    const stopBtn = document.querySelector('#stop'); 
    const replyBtn = document.querySelector('#reply'); 
 
    startScreenBtn.addEventListener('click', () => { 
        record('screen'); 
    }); 
    startCameraBtn.addEventListener('click', () => { 
        record('camera'); 
    }); 
 
    stopBtn.addEventListener('click', () => { 
        mediaRecorder && mediaRecorder.stop(); 
    }); 
 
    replyBtn.addEventListener('click', () => { 
        const blob = new Blob(blobs, {type : 'video/webm'}); 
        recordPlayer.src = URL.createObjectURL(blob); 
        recordPlayer.play(); 
    }); 
 
    download.addEventListener('click', () => { 
        var blob = new Blob(blobs, {type: 'video/webm'}); 
        var url = URL.createObjectURL(blob); 
 
        var a = document.createElement('a'); 
        a.href = url; 
        a.style.display = 'none'; 
        a.download = 'record.webm'; 
        a.click(); 
    }); 
</script> 
</body> 
</html> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.