用 10 行 Vanilla JS 代码实现屏幕录制

完整示例

创建视频流

录制流

将记录转换为 Blob

让我们看看如何捕获并记录用户的屏幕。不仅包括您的页面，还包括用户浏览器的其他标签页、桌面，甚至其他应用程序。而且我们无需浏览器插件或庞大的库即可实现这一点。我们只需要 10 行原生 JavaScript 代码。

为了实现这一点，我们将使用媒体捕获和流 API。它与WebRTC API相关，但目前我们忽略所有浏览器之间的点对点流传输，只进行非常简单的录制。

完整示例

虽然我们可以将录音发送到服务器进行存储或处理，但在本博文中，我们只是截取它，然后使用<video>标签播放给用户。完整示例请见此处：https://codesandbox.io/s/sharp-mestorf-qumzf。

要尝试，请单击“开始录制”按钮，选择要共享的屏幕，执行一些操作，然后单击“停止录制”按钮。

您可能会注意到，该示例包含超过 10 行 JavaScript 代码。这是因为它还包含一些处理“开始”和“停止”按钮的代码。录制逻辑位于该startRecording函数中，从第 6 行开始。总而言之，该函数执行以下三个步骤：

1. 创建用户桌面的视频流
2. 录制此流
3. 转换录音以将其传输到服务器或显示在<video>标签中

让我们详细看看每个步骤：

创建视频流

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: { mediaSource: "screen" }
});

它只是一个函数：getDisplayMedia。调用此函数会打开一个对话框，供用户选择要录制的屏幕（如果他们有多个显示器）。他们也可以选择只录制特定的应用程序或浏览器标签页。这里有两点需要注意：用户必须主动允许共享，因此您不能使用此功能来监视用户。此外，它会返回一个承诺，所以请务必确认await。

录制流

const recorder = new MediaRecorder(stream);

const chunks = [];
recorder.ondataavailable = e => chunks.push(e.data);
recorder.start();

在这里，我们使用MediaRecorder API来捕获上一步获取的视频流。由于视频流可能非常大，录制器可以定期调用ondataavailable。目前，我们将每个视频块存储在一个数组中，并在下一步中处理。设置好数据处理后，我们就可以开始录制了。

将记录转换为 Blob

recorder.onstop = e => {
  const completeBlob = new Blob(chunks, { type: chunks[0].type });
  video.src = URL.createObjectURL(completeBlob);
};

在某个时刻，我们需要调用。recorder.stop();在本例中，当你点击“停止录制”按钮时，就会发生这种情况。这将调用onstop录制器的事件处理程序。在那里，我们获取上一步中的数据块并将其转换为Blob。然后你可以用它做任何事情。

src您可以将其作为“提交反馈”功能的一部分发送到服务器。您可以将其上传到 YouTube。在这里，我们只需构建一个对象 URL 并将其用作视频标签的属性，即可将录制内容播放给用户。

就这样，我们只用了10行Javascript代码（再加上一些录制控件），就成功截取了用户的屏幕。我相信你会用这股力量做好事，而不是作恶。