renyicun
/
ShangHaiInustrialMuseum


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
							<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>wgchen</title>
  <link rel="shortcut icon" href="#" />
  <meta name="keywords" content="https://wgchen.blog.csdn.net">
  <meta name="keywords" content="技术文章">
  <meta name="keywords" content="博客">
  <meta name="keywords" content="willem">
  <meta name="keywords" content="ycc">
</head>

<body>

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

  <script>
    let btn = document.querySelector(".record-btn")
    console.log(navigator);
    console.log(navigator.mediaDevices);
    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>