javascript - 实现拍照功能（详细示例代码）

// 检查浏览器是否支持MediaDevices API
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  // 捕获拍照的事件
  document.getElementById('snap').addEventListener('click', function() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    // 设置canvas尺寸
    canvas.width = 320;
    canvas.height = 240;
 
    // 获取视频流
    navigator.mediaDevices.getUserMedia({video: true})
    .then(function(stream) {
      // 将视频流设置为video元素的源
      var video = document.getElementById('video');
      video.srcObject = stream;
 
      // 在video元素加载完毕后
      video.onloadedmetadata = function(e) {
        // 视频播放
        video.play();
        // 在canvas上绘制video的内容
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
      };
    })
    .catch(function(err) {
      console.log("出错了：" + err);
    });
  });
} else {
  alert('您的浏览器不支持MediaDevices API');
}

这段代码首先检查了浏览器是否支持MediaDevices API。如果支持，它会在用户点击按钮时捕获一个拍照事件，然后通过getUserMedia获取视频流，并在video元素中播放。接着，在video元素加载完成后，使用canvas的drawImage方法将视频流的内容绘制到canvas上，实现了拍照的功能。如果浏览器不支持MediaDevices API，会弹出提示。