【实例】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);

      }