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

不知你是否用过 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>

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

startScreenBtn.addEventListener('click', () => {
    record('screen');
});
startCameraBtn.addEventListener('click', () => {
    record('camera');
});

一个是用 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;
}

指定下宽高和帧率等参数，把返回的流设置到 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);

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 来被播放。

下载：

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();
});

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

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

我们来看下效果：

完整代码上传到了 github：tygithub.com/QuarkGluonP…

这里也贴一份：

<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>

总结

音视频通信分为采集、编码、通信、解码、渲染这五步，浏览器的音视频通信相关的 API 叫做 WebRTC。

我们实现了下采集的部分来入门了下 WebRTC，还支持了回放和下载。

涉及到的 api 有 3 个：

navigator.mediaDevices.getUserMedia：获取麦克风、摄像头的流
navigator.mediaDevices.getDisplayMedia：获取屏幕的流
MediaRecorder：监听流的变化，实现录制

我们分别用前两个 api 获取到了屏幕、麦克风、摄像头的流，然后用 MediaRecorder 做了录制，把数据保存到数组中，之后生成了 Blob。

video 可以设置 srcObject 属性为一个流，这样能直接播放，如果设置 Blob 的话需要用 URL.createObjectURL 处理下。

下载的实现是通过 a 标签指向 Blob 对象的 object url，通过 download 属性指定下载行为。然后手动触发 click 来下载。

我们学会了如何用 WebRTC 来采集数据，这是音视频通信的数据源，后续还会有编码、通信、解码、渲染等，我们后面再了解。