Webcam视频流无法显示及拍照按钮失效问题求助

你遇到的相机权限已获取但视频无画面、拍照按钮失效的问题，可通过以下步骤逐一修复：

1. 解决视频自动播放限制 #

现代浏览器对自动播放有严格管控，需为video标签补充必要属性：

<video id="video" width="320" height="240" autoplay playsinline muted></video>

• playsinline：允许视频在页面内播放（iOS Safari 必填）
• muted：绕过有声内容自动播放限制，摄像头视频无音频，添加后不影响功能

2. 确保视频流正确加载并播放 #

修改app.js中相机流获取逻辑，添加视频就绪监听，避免提前调用播放：

navigator.mediaDevices.getUserMedia({ 
  video: { 
    facingMode: 'user', // 明确指定前置摄像头
    width: 320,
    height: 240
  } 
}).then(function(stream) {
  console.log("Camera stream obtained");
  video.srcObject = stream;
  // 等待视频元数据加载完成后再播放
  video.addEventListener('loadedmetadata', function() {
    video.play().catch(err => console.log("Play failed:", err));
  });
}).catch(function(error) {
  console.log("Error accessing camera: " + error);
  alert("Could not access the camera. Please check permissions.");
});

• 指定facingMode避免系统自动切换摄像头
• 监听loadedmetadata事件确保视频资源就绪，同时捕获播放错误日志方便排查

3. 修复拍照按钮逻辑 #

拍照前先验证视频状态，同步canvas与视频实际尺寸：

captureButton.addEventListener("click", function() {
  // 检查视频是否处于可播放状态
  if (video.paused || video.readyState !== 4) {
    alert("视频尚未就绪，请稍候");
    return;
  }
  const context = canvas.getContext('2d');
  // 用视频实际分辨率设置canvas，避免画面拉伸
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  context.drawImage(video, 0, 0, canvas.width, canvas.height);
  const dataURL = canvas.toDataURL('image/png');
  photoData.value = dataURL;
  canvas.style.display = 'block';
});

• readyState === 4表示视频已加载足够可播放数据
• 同步canvas尺寸保证拍照画面清晰无变形

4. 额外检查项 #

• 确保页面运行在HTTPS环境或localhost下，getUserMedia仅支持安全上下文
• 检查styles.css中是否有隐藏video元素的规则（如display: none、opacity: 0）
• 打开浏览器控制台（F12）查看未捕获错误日志，进一步定位问题

内容的提问来源于stack exchange，提问作者Vishal Koul