求助：实现浏览器授权后自动调用Webcam拍照并保存功能

针对你遇到的两个问题，直接修改代码如下，同时实现自动触发拍照和保存图片的功能：

<html>
<head>
  
</head>
<body>
<video id="player" autoplay style="display: none;"></video>
<canvas id="canvas" width="320" height="240" style="display: none;"></canvas>
<script>
  const player = document.getElementById('player');
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  // 替换为实际用户邮箱
  const userEmail = 'user@example.com';

  const constraints = {
    video: true,
  };

  // 抽离拍照+保存逻辑为独立函数
  function captureAndSavePhoto() {
    // 绘制视频帧到Canvas
    context.drawImage(player, 0, 0, canvas.width, canvas.height);
    
    // 生成图片数据并触发保存
    const imageData = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.href = imageData;
    // 设置保存的文件名（用户邮箱）
    link.download = `${userEmail}.png`;
    // 触发下载
    link.click();
  }

  navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
    player.srcObject = stream;
    // 监听视频加载完成事件，自动触发拍照
    player.addEventListener('loadeddata', () => {
      // 可选：延迟几秒再拍照，让摄像头对焦稳定（比如2秒）
      setTimeout(captureAndSavePhoto, 2000);
    });
  }).catch(err => {
    console.error('摄像头访问失败:', err);
  });
</script>
</body>
</html>

关键修改说明 #

• 自动触发拍照（解决问题A）：

  • 将拍照逻辑抽成captureAndSavePhoto函数，不再依赖按钮点击
  • 在视频流加载完成的loadeddata事件中调用拍照函数，也可以通过setTimeout添加延迟，让摄像头完成对焦后再拍摄
  • 隐藏了视频和Canvas元素（如果不需要显示预览的话），如果需要保留预览可以去掉style="display: none;"

• 保存照片（解决问题B）：

  • 使用Canvas的toDataURL方法将绘制的帧转为PNG格式的Base64数据
  • 创建隐藏的<a>标签，设置download属性为用户邮箱作为文件名，触发点击事件实现自动下载
  • 捕获了getUserMedia的错误，方便排查摄像头访问失败的问题

内容的提问来源于stack exchange，提问作者Josh Cotton