相信很多朋友都用过不同软件的录屏功能，但是这些软件多少还让存在一些缺点，让我们在录屏的时候不能得心应手。

今天我就来手把手教大家自己来制作一个私人订制的浏览器录屏器，

录屏器

我们可以使用浏览器的屏幕捕获API接口来帮助我们来捕获我们的视频流。

• 首先我们要创建一按钮来帮助我们触发我们的录屏功能

// 创建一个名为 button 的常量，该常量引用一个新创建的按钮元素
const button = document.createElement("button");

// 设置按钮的显示文本为 "开始录制"
button.innerHTML = "开始录制";

// 将按钮元素添加到文档的 body 元素中
document.body.append(button);

// 为按钮添加一个点击事件监听器
button.addEventListener("click", async () => {
  // 在按钮被点击时触发的异步函数

  // 添加我们的录屏代码，触发录屏API，以响应按钮点击事件
});

开始录屏

• 当我们点击按钮后，我们需要进行录制屏幕，录制屏幕的前提是要先获取视频流（即我们视频的来源）之后才能进行录制，获取视频流我们可以使用 navigator.mediaDevices.getDisplayMedia() 方法可方便地请求并获取屏幕或应用程序窗口的媒体流。

• 获取视频流后，我们需要对视频流进行录制，我们可以创建一个MediaRecorder 对象，它可以帮助对视频流进行录制。

// 使用 navigator.mediaDevices.getDisplayMedia() 获取屏幕共享的媒体流
const stream = await navigator.mediaDevices.getDisplayMedia();

// 创建一个 MediaRecorder 对象，用于录制媒体流
const recorder = new MediaRecorder(stream);

// 开始录制媒体流
recorder.start();

这样在点击我们的“开始录制”按钮后，就能开始录制我们的屏幕了。

录完视频后我们要怎么停止和下载保持呢？

停止录屏

• 当我们录制完我们想要的视频时，我们需要停止录制器，并从媒体流中获取视频轨道。
• 我们可以使用 navigator.mediaDevices.getDisplayMedia() 的 getVideoTracks() 方法，可以轻松获取到我们的视频轨道。
• 此外，我们还可以添加一个监听器，以便在媒体播放完毕时停止录制器，确保录制操作跟随屏幕分享的结束而停止。

// 从媒体流中获取视频轨道
const [video] = stream.getVideoTracks();

// 为视频轨道添加 'ended' 事件监听器
video.addEventListener("ended", () => {
  // 当视频播放结束时触发的回调函数

  // 停止录制器（recorder）
  recorder.stop();
});

下载并保存视频

当我们停止录制的同时，希望能够保存我们的视频。

我们需要获取视频文件并下载，

我们可以监听录制器,当录制数据可用时，我们创建一个新的 <a> 元素，来创建下载链接，设置 <a>元素的 href 属性为录制数据的 Blob URL，同时我们可以模拟用户点击 <a> 元素，来触发下载操作。当然如果你想自己来触发也不是不行。看个人需求。最后我们的录屏视频就会被下载保存下来。

// 为录制器（recorder）添加 'dataavailable' 事件监听器
recorder.addEventListener("dataavailable", (evt) => {
  // 当录制数据可用时触发的回调函数

  // 创建一个新的 <a> 元素，用于创建下载链接
  const a = document.createElement("a");

  // 设置 <a> 元素的 href 属性为录制数据的 Blob URL
  a.href = URL.createObjectURL(evt.data);

  // 设置 <a> 元素的 download 属性，指定下载文件的名称为 "capture.webm"
  a.download = "屏幕录制.webm";

  // 模拟用户点击 <a> 元素，触发下载操作
  a.click();
});

jcode
点击右上角的码上掘金查看详细代码