浏览器实现一个屏幕录制功能

最新推荐文章于 2024-06-07 23:26:45 发布

咸蛋超人l

最新推荐文章于 2024-06-07 23:26:45 发布

阅读量367

点赞数 9

文章标签：前端 java javascript

本文链接：https://blog.csdn.net/weixin_50636536/article/details/135678432

版权

const button = document.createElement("button");
button.innerHTML = "屏幕录制";
button.style = "position: fixed; top:200px; z-index: 99999999999;";
document.body.append(button);
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();
  });
});