【实例】H5呼起摄像头进行拍照、扫福等操作

主要是借助navigator.mediaDevices.getUserMedia方法来呼气摄像头获取视频流

  // 初始化摄像头
      async function initCamera() {
        
        try {
          const stream = await navigator.mediaDevices.getUserMedia({
            video: { facingMode: 'environment' } // 后置摄像头
          });
          video.srcObject = stream; // 将数据流传入到视频组件当中

          return new Promise((resolve) => {
            video.onloadedmetadata = () => {
              video.play(); // 播放数据， 微信当中需要手动播放，无法自动播放
              resolve();
            };
          });
        } catch (err) {
         alert(JSON.stringify(err))
        }
      }

获取到视频流之后，点击按钮去对视频截图，上传视频到后端，对视频截图可以使用canvas来实现。

// 捕获图像
      function captureImage() {
        video.pause()
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;

        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

        canvas.toBlob((blob) => {
          capturedImageBlob = blob;
          const imageUrl = URL.createObjectURL(blob);
          let result = document.getElementById('result')
          result.src = imageUrl
          $('#page-3').show().siblings().hide()
        }, 'image/jpeg', 0.8);
      }