JS代码实现屏幕录制

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

MediaDevices

MediaDevices 接口提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。

事件

当媒体输入或输出设备连接到用户计算机或从用户计算机移除时触发。

####### 方法

• MediaDevices.enumerateDevices()
  获取有关系统中可用的媒体输入和输出设备的一系列信息。

• getSupportedConstraints()
  返回一个符合 MediaTrackSupportedConstraints的对象。该对象指明了 MediaStreamTrack接口支持的可约束的属性。。

• getDisplayMedia()
  提示用户选择显示器或显示器的一部分（例如窗口）以捕获为MediaStream以便共享或记录。返回解析为 MediaStream 的 Promise。

• MediaDevices.getUserMedia()
  在用户通过提示允许的情况下，打开系统上的相机或屏幕共享和/或麦克风，并提供 MediaStream 包含视频轨道和/或音频轨道的输入。

  代码实现

要实现屏幕录制，我们需要通过 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();
  });
});

浏览器兼容

目前的浏览器支持情况，对于较低的版本需要升级才能使用。

实现这么强大的功能只需要这么少的代码确实是很不错的感觉，但是这只是一个简单的录制功能，实际开发中要考虑的因素相对会比较多，由于屏幕录制可能消耗较多的资源，因此在长时间录制时，我们应该提示用户录制时间或大小的限制，并提供相应的操作和反馈。

使用 MediaRecorder 我们可以方便地实现屏幕录制功能。这种功能在教学、演示等场景下非常有用，同时也为开发者提供了更多创造性的可能性。有兴趣的可以体验使用看看效果，在实际使用中也要合理使用此功能，确保用户隐私和数据安全。