Blazor WebAssembly：桌面端如何实现类似移动端的摄像头图片捕获？

桌面端没法直接靠<input type="file" capture="camera">调用摄像头——这个属性在桌面浏览器里不会触发摄像头，依然只会弹出文件选择对话框。不过可以用WebRTC的getUserMedia API实现类似的摄像头捕获功能，这是目前前端在桌面端调用摄像头的标准方案。

具体实现示例 #

下面是一个简单的实现代码，能直接在页面里调用摄像头、实时预览画面并拍照：

HTML结构

<!-- 摄像头预览区域 -->
<video id="cameraPreview" width="400" height="300" autoplay playsinline></video>
<!-- 拍照按钮 -->
<button id="captureBtn">拍照</button>
<!-- 显示拍摄结果 -->
<img id="capturedImage" width="400" height="300" alt="拍摄的照片">

JavaScript逻辑

const video = document.getElementById('cameraPreview');
const captureBtn = document.getElementById('captureBtn');
const capturedImage = document.getElementById('capturedImage');

// 请求摄像头权限并启动预览
async function startCamera() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    video.srcObject = stream;
  } catch (err) {
    console.error('无法访问摄像头:', err);
    alert('请允许摄像头权限，否则无法使用拍照功能');
  }
}

// 拍照功能：从video帧中捕获图片
function capturePhoto() {
  const canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  // 将canvas转换为图片URL，显示在img元素里
  capturedImage.src = canvas.toDataURL('image/png');
}

// 页面加载完成后启动摄像头
window.addEventListener('load', startCamera);
// 绑定拍照按钮点击事件
captureBtn.addEventListener('click', capturePhoto);

注意事项 #

• 这个方案需要在HTTPS环境下运行（本地开发的localhost或127.0.0.1不受限制），否则浏览器会阻止摄像头权限请求。
• 主流桌面浏览器（Chrome、Firefox、Edge、Safari 11+）都支持WebRTC API，兼容性没问题。
• 如果需要将拍摄的图片上传到服务器，可以把canvas生成的DataURL转换成Blob对象，再通过FormData提交。

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