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

瞧，您有一个简单的屏幕录像机！

它有许多限制，解决起来会很有趣 - 音频录制、网络摄像头集成、长时间运行的流等 - 但我发现用这么少的代码行就能做这么强大的事情，太棒了，不分享不行。

codepen链接

文章来源：https://dev.to/ninofiliu/simple-screen-recorder-in-20-lines-of-javascript-4ina