只需 20 行 JavaScript 的简单屏幕录制器(翻译)

比方说，你厌倦了屏幕录制器的付费墙和限制，想自己编写代码--原来只需几行代码就能实现基本功能。

我们可以要求浏览器使用屏幕捕获 API 为我们获取捕获视频流，但出于安全考虑，我们必须确保用户手势触发了捕获，例如点击按钮：

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

点击后，获取视频流并进行录制

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

瞧，这就是一个简单的屏幕录像机！

完整代码：

const button = document.createElement("button");
button.innerHTML = "capture";
document.body.append(button);
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();
  });
});

它有许多限制，解决这些限制会很有趣--音频录制、网络摄像头集成、长时间流式传输等--但我只是发现，用这么少的几行代码就能实现这么强大的功能，实在是太了不起了，不能不与大家分享。