尋鯨錄的Blog

js实现页面窗口录制

尋鯨錄

1年前发布 /正在检测是否收录...

0 65 3

温馨提示：

本文最后更新于2024年12月19日，已超过132天没有更新，若内容或图片失效，请留言反馈。

AI摘要：使用JavaScript实现页面窗口录制，通过在线demo和代码示例展示如何获取屏幕流，使用MediaRecorder录制视频，并在网页中播放和下载录制内容。

一,在线demo

1、在线demo地址：http://ys.100000.icu/00007

二、直接上代码

<!DOCTYPE html>
<html>

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
</head>

<body>
  <video class="video" width="600px" controls></video>
  <button class="record-btn">录制</button>

  <script>
    let btn = document.querySelector(".record-btn")

    btn.addEventListener("click", async function () {
      let stream = await navigator.mediaDevices.getDisplayMedia({
        video: true
      })

      const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
        ? "video/webm; codecs=vp9"
        : "video/webm"
      let mediaRecorder = new MediaRecorder(stream, {
        mimeType: mime
      })

      let chunks = []
      mediaRecorder.addEventListener('dataavailable', function (e) {
        chunks.push(e.data)
      })

      mediaRecorder.addEventListener('stop', function () {
        let blob = new Blob(chunks, {
          type: chunks[0].type
        })

        let url = URL.createObjectURL(blob)

        let video = document.querySelector(".video")
        video.src = url

        let a = document.createElement('a')
        a.href = url
        a.download = 'video.webm'
        a.click()
      })

      mediaRecorder.start()
    })

  </script>
</body>

</html>