您现在的位置是：亿华云 > 系统运维

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

亿华云2025-10-03 20:13:35【系统运维】3人已围观

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

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