20 行 JS 代码实现屏幕录制

2023-11-09
广东
本文字数：1350 字
阅读完需：约 4 分钟

在开发中可能有遇到过屏幕录制的需求，无论是教学、演示还是游戏录制，都需要通过屏幕录制来记录和分享内容。一般在 App 内 H5 页基于客户端能力实现的较多，现在浏览器中的 MediaRecorder 也提供了这种能力。MediaRecorder 是一种强大的技术，可以在浏览器端实现屏幕录制功能。本文将介绍如何使用 JS MediaRecorder 实现屏幕录制。

代码实现

要实现屏幕录制，我们需要通过 navigator.mediaDevices.getDisplayMedia() 方法获取屏幕媒体流，这个方法会弹出一个选择窗口，让用户选择要录制的屏幕或窗口。但出于安全原因，发起录制时必须确保用户手势触发捕获，例如点击按钮：

const button = document.createElement("button");button.innerHTML = "capture";document.body.append(button);button.addEventListener("click", async () => {  // TODO});

复制代码

点击后，获取视频流并录制，获取到媒体流后，我们可以将其传给 MediaRecorder 对象后开始屏幕录制。

const stream = await navigator.mediaDevices.getDisplayMedia();const recoder = new MediaRecorder(stream);recoder.start();

复制代码

当用户停止共享屏幕时停止录制，调用 recoder.stop()即可停止录制。

const [video] = stream.getVideoTracks();video.addEventListener("ended", () => {  recoder.stop();});

复制代码

监听recoder的dataavailable事件获取录制文件并通过URL.createObjectURL()方法将其转换为可下载的 URL，供用户下载录制的视频文件。

recoder.addEventListener("dataavailable", (evt) => {  const a = document.createElement("a");  a.href = URL.createObjectURL(evt.data);  a.download = "capture.webm";  a.click();});

复制代码

这样一个简单的屏幕记录器就完成了，不到 20 行代码就实现了整个屏幕录制的核心功能。完整代码如下：

button.addEventListener("click", async () => {  const stream = await navigator.mediaDevices.getDisplayMedia();  const recoder = new MediaRecorder(stream);  recoder.start();
  const [video] = stream.getVideoTracks();  video.addEventListener("ended", () => {    recoder.stop();  });
  recoder.addEventListener("dataavailable", (evt) => {    const a = document.createElement("a");    a.href = URL.createObjectURL(evt.data);    a.download = "capture.webm";    a.click();  });});