Web App移动端浏览器相机预览不可见，桌面端功能正常求解决方案

问题原因分析 #

• 移动端自动播放限制：多数移动端浏览器禁止无用户交互触发的自动视频播放，直接调用video.play()会被浏览器拦截。
• 缺少playsinline属性：iOS Safari等移动端浏览器默认会让视频全屏播放，playsinline属性可强制视频在页面内显示，而非跳转全屏。
• video元素无默认尺寸：原生video元素未设置宽高时，即使相机流加载成功，也无法在页面上呈现可视化的预览画面。
• 未处理播放失败场景：video.play()返回Promise，若自动播放失败没有 fallback 逻辑，用户无法手动触发预览启动。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Camera Demo</title>
  <style>
    #cameraStream {
      width: 100%;
      max-width: 400px;
      height: auto;
      border: 1px solid #ddd;
    }
    #cameraContainer {
      margin: 20px;
    }
    #shutterButton {
      margin-top: 10px;
      padding: 8px 16px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div id="cameraContainer">
    <video id="cameraStream" autoplay playsinline muted></video>
    <button id="shutterButton">Take Photo</button>
  </div>
  <canvas id="canvas" style="display: none;"></canvas>

  <script>
    const video = document.getElementById('cameraStream');
    const canvas = document.getElementById('canvas');
    const shutterButton = document.getElementById('shutterButton');

    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(function(stream) {
          video.srcObject = stream;
          // 尝试自动播放，处理可能的拦截情况
          video.play().catch(err => {
            console.log("自动播放被拦截，需用户交互触发:", err);
            alert("请点击相机预览区域启动画面");
            // 绑定单次点击事件触发播放
            video.addEventListener('click', () => {
              video.play();
            }, { once: true });
          });
        })
        .catch(function(err) {
          console.log("相机访问错误:", err);
          alert("Error accessing camera: " + err.message);
        });
    } else {
      alert('Sorry, your browser does not support getUserMedia');
    }
    
    shutterButton.addEventListener('click', () => {
      const context = canvas.getContext('2d');
      // 动态匹配视频实际分辨率，避免拍照拉伸
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      context.drawImage(video, 0, 0, canvas.width, canvas.height);
      const dataUrl = canvas.toDataURL('image/png');
      
      const capturedImage = new Image();
      capturedImage.src = dataUrl;
      capturedImage.style.maxWidth = '100%';
      capturedImage.style.marginTop = '20px';
      document.body.appendChild(capturedImage);
    });
  </script>
</body>
</html>

关键修复点说明 #

• 添加playsinline和muted属性：playsinline解决iOS视频全屏问题，muted满足部分浏览器自动播放的静音要求，提升自动播放成功率。
• 设置video元素样式：通过CSS给video设置响应式宽高，确保预览画面在移动端可见。
• 处理播放失败逻辑：当自动播放被拦截时，提示用户手动点击预览区域启动画面，保证功能可用性。
• 动态匹配canvas尺寸：拍照时将canvas尺寸设置为视频的实际分辨率，避免生成的图片出现拉伸或尺寸错误。

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