js实现页面窗口录制

一、在线demo

1、在线demo地址：http://www.lb0125.com/videoRecord.html

注：目前测试发现只有在chrome浏览器里可以使用

二、直接上代码

<!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>

三、效果

操作步骤：

1、点击录制按钮后，在弹窗窗口中选择需要录制的窗口，并点击分享后开始录制

2、录制中时，页面底部会有停止共享的按钮，点击即可结束录制，并下载录制视频到本地，同时可在该页面播放