// 获取摄像头权限
navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    // 创建一个video元素来显示摄像头画面
    var video = document.createElement('video');
    video.srcObject = stream;
    video.play();

    // 创建一个canvas元素来显示拍照后的图片
    var canvas = document.createElement('canvas');
    // 有个获取不到 video.videoWidth 的问题
    canvas.width = video.videoWidth || 500;
    canvas.height = video.videoHeight || 300;

    // 在video播放时，每隔一段时间截取一张图片
    video.addEventListener('timeupdate', function() {
      // 将当前视频帧绘制到canvas上
      canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    });

    // 创建一个按钮来触发拍照
    var button = document.createElement('button');
    button.textContent = '拍照';
    button.addEventListener('click', function() {
      // 将canvas上的图片转换为base64编码的字符串
      var dataURL = canvas.toDataURL('image/png');
      // 将图片显示在页面上
      var img = document.createElement('img');
      img.src = dataURL;
      document.body.appendChild(img);
    });

    // 将video、canvas和button添加到页面上
    document.body.appendChild(video);
    document.body.appendChild(canvas);
    document.body.appendChild(button);
  })
  .catch(function(error) {
    console.log(error);
  });