screen-recording-in-10-lines-of-vanilla-js-3bo8

原始地址：https://dev.to/sebastianstamm/screen-recording-in-10-lines-of-vanilla-js-3bo8

‘’’
让我们来看一下如何捕捉和记录用户的屏幕。不仅仅是你的页面，还有用户浏览器的其他标签页，桌面甚至其他应用程序。而且我们可以在没有浏览器插件或庞大库的情况下实现这一点。相反，我们只需要10行原始的Javascript代码。
为了实现这一点，我们将使用媒体捕获和流API。它与WebRTC API相关联，但现在我们忽略了所有浏览器之间的点对点流媒体传输，只需要进行简单的录制。

完整示例
虽然我们可以将录制发送到服务器上进行存储或处理，但是在这篇博客文章中，我们只是捕捉并在一个标签中将其播放给用户。你可以在这里找到完整的示例：https://codesandbox.io/s/sharp-mestorf-qumzf。
要试用它，请点击“开始录制”按钮，选择要共享的屏幕，执行一些操作，然后点击“停止录制”按钮。
您可能会注意到，示例中包含的Javascript代码超过了10行。这是因为它还包含一些处理开始和停止按钮的代码。录制逻辑可以在从第6行开始的startRecording函数中找到。简而言之，该函数执行了以下三个步骤：

创建用户桌面的视频流

记录这个流

转换录制以便将其传输到服务器或在标签中展示
让我们详细看一下每个步骤：

创建视频流
const stream = await navigator.mediaDevices.getDisplayMedia({
video: { mediaSource: “screen” }
});
这只是一个单独的函数：getDisplayMedia。调用它将打开一个对话框，供用户选择要从中录制的屏幕（如果他们有多个显示器）。他们还可以选择仅录制特定的应用程序或浏览器标签页。这里需要记住两件事：用户必须积极允许共享，所以你不能使用这个功能来监视你的用户。此外，它返回一个promise，请确保使用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对象。然后你可以对它进行任何操作。
你可以将其作为“提交反馈”功能的一部分发送到服务器。你可以将其上传到Youtube。在这里，我们只是通过构建一个对象URL并将其用作video标签的src属性，将录制内容回放给用户。
就是这样，只用10行Javascript代码（外加一点用于录制控制的代码），我们就能够捕捉用户的屏幕。我相信你会正确使用这种能力，而不是做坏事。
‘’’