一对一直播源码，屏幕录制要求不难实现

一对一直播源码，屏幕录制要求不难实现

代码实现

要实现屏幕录制，我们需要通过 navigator.mediaDevices.getDisplayMedia() 方法获取屏幕媒体流，这个方法会弹出一个选择窗口，让用户选择要录制的屏幕或窗口。但出于安全原因，发起录制时必须确保用户手势触发捕获，例如点击按钮：

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

 

点击后，获取视频流并录制，获取到媒体流后，我们可以将其传给 MediaRecorder 对象后开始屏幕录制。

const stream = await navigator.mediaDevices.getDisplayMedia();
const recoder = new MediaRecorder(stream);
recoder.start();

 

当用户停止共享屏幕时停止录制，调用 recoder.stop()即可停止录制。

 

const [video] = stream.getVideoTracks();
video.addEventListener("ended", () => {
  recoder.stop();
});

 

监听recoder的dataavailable事件获取录制文件并通过URL.createObjectURL()方法将其转换为可下载的URL，供用户下载录制的视频文件。

recoder.addEventListener("dataavailable", (evt) => {
  const a = document.createElement("a");
  a.href = URL.createObjectURL(evt.data);
  a.download = "capture.webm";
  a.click();
});

 

这样一个简单的屏幕记录器就完成了，不到20行代码就实现了整个屏幕录制的核心功能。完整代码如下：

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

 

以上就是一对一直播源码，屏幕录制要求不难实现， 更多内容欢迎关注之后的文章