demo2: 视频流录制+截取帧截图--- highlight: a11y-dark --- ```html 开启预览

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>
  <!-- 开启摄像头 -->
  <button id="startPreview">开启预览</button>
  <button id="endPreview">关闭预览</button>
  <video id="preview" style="width:50vw; height:50vh; border: 6px solid black;" autoplay></video>
  <hr />
  <button id="startRecording">开始录制</button>
  <button id="endRecording">结束录制</button>
  <video id="recording" style="width:50vw; height:50vh; border: 6px solid black;" autoplay controls></video>
  <hr />
  <button id="mediaStream">查看mediaStream</button>
  <hr />
  <button id="screenshot">截图</button>
  <hr />
  <img id="videoFrame" style="border:6px solid green; width:100px; height:100px;" />
  <a id="downloadPhoto">下载</a>

  <script>
    let previewDom = document.querySelector('#preview')
    // 1.开启视频流 并放到video标签上
    function startPreview() {
      navigator.mediaDevices.getUserMedia({
        audio: true,
        video: true
      }).then(stream => {
        console.log('stream', stream)
        previewDom.srcObject = stream
      })
    }

    document.querySelector('#startPreview').addEventListener('click', startPreview)
    document.querySelector('#endPreview').addEventListener('click', () => {
      // 停止预览
      previewDom.srcObject.getTracks().forEach((track) => track.stop());
    })


    // 2.录制视频
    const blobChunks = []
    let recorder;
    const recording = document.querySelector('#recording')
    // 2.1 开始录制
    function startRecordingEvent(stream) {
      recorder = new MediaRecorder(stream)
      recorder.start(1000)
      recorder.ondataavailable = (event) => {
        let data = event.data
        // blob有size和tpye属性
        blobChunks.push(data)
      }

    }
    // 2.2 停止录制
    function endRecordingEvent() {
      // 停止录制
      recorder.stop()
      // 放到页面上
      let recordedBlob = new Blob(blobChunks, { type: "video/webm" })
      recording.src = URL.createObjectURL(recordedBlob);
    }

    // 绑定到按钮
    document.querySelector('#startRecording').addEventListener('click', () => {
      // todo startRecordingEvent(preview.srcObject.getVideoTracks()[0])
      startRecordingEvent(previewDom.srcObject)
    })
    document.querySelector('#endRecording').addEventListener('click', endRecordingEvent)



    // 查看mediaStream
    document.querySelector('#mediaStream').addEventListener('click', () => {
      console.log('preview.srcObject', previewDom.srcObject)
      console.log('preview.captureStream', previewDom.captureStream())
      console.log('preview.getTracks', previewDom.srcObject.getTracks())
      console.log('preview.getVideoTracks', previewDom.srcObject.getVideoTracks()[0])
    })

    // 截图
    document.querySelector('#screenshot').addEventListener('click', () => {
      screenShot(previewDom.srcObject.getVideoTracks()[0])
    })
    let photoBlobSrc;
    function screenShot(videoTrack) {
      const imageCaputure = new ImageCapture(videoTrack)
      imageCaputure.takePhoto().then(res => {
        photoBlobSrc = URL.createObjectURL(res)
        document.querySelector('#videoFrame').src = photoBlobSrc
      })
    }
    // 下载
    const downloadDOM = document.querySelector('#downloadPhoto')
    function downloadPhotoEvent() {
      // tips: 下载的 名称以及文件类型 在a标签的download属性中定义
      downloadDOM.download = 'screenshot.jpg'
      downloadDOM.href = photoBlobSrc
    }
    downloadDOM.addEventListener('click', downloadPhotoEvent)
  </script>
</body>

</html>