[[441095]]
不知你是否用过 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 事件。
目前为止,我们已经实现了麦克风、摄像头、屏幕的录制,支持了回放和下载。
这里也贴一份:
- <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 来采集数据,这是音视频通信的数据来源,之后还要实现编解码和通信才能是完整 RTC 流程,这些后续再深入。
我们直观的感受了下 WebRTC 能做什么,是不是感觉这个领域也挺有趣的呢?