本文介绍如何使用 JavaScript 的 navigator.mediaDevices.getUserMedia() 获取用户摄像头视频流，并将其正确渲染到 HTML 元素中，为 Instascan 等二维码扫描库提供实时画面支持。
本文介绍如何使用 javascript 的 `navigator.mediadevices.getusermedia()` 获取用户摄像头视频流，并将其正确渲染到 html `
要在网页中成功显示摄像头实时画面并配合 Instascan 进行 QR 码扫描，关键在于主动请求媒体权限并正确绑定视频流到 <video></video> 元素，而非仅依赖 Instascan 内部初始化——Instascan 虽可自动处理部分逻辑，但若 <video></video> 元素未预先获得有效的 srcObject，则无法正常播放。
✅ 正确实现步骤
-
HTML 结构保持简洁可靠（无需初始
display: none）：<div class="video-container"> <div class="overlay-box"> <video id="preview" autoplay muted playsinline></video> </div> </div>
⚠️ 注意：
autoplay、muted和playsinline属性对移动端兼容性至关重要；muted是 Chrome/Safari 等浏览器自动播放策略的必要条件。 -
JavaScript 主动获取并绑定视频流：
const video = document.getElementById('preview');
// 请求摄像头权限并绑定流 async function startCamera() { try { const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment', // 优先使用后置摄像头（移动端） width: { ideal: 1280 }, height: { ideal: 720 } } }); video.srcObject = stream; // 关键：必须显式赋值 srcObject } catch (err) { console.error('无法访问摄像头：', err); alert('请允许摄像头权限，或检查设备是否可用'); } }
// 初始化 Instascan 扫描器（需确保 video 已有有效 srcObject） let scanner; async function initScanner() { await startCamera(); // 先确保视频流就绪
scanner = new Instascan.Scanner({ video: video, mirror: false // 避免镜像导致扫码偏移（尤其对文字类 QR） });
scanner.addListener('scan', function(content) { console.log('扫描结果：', content); // 例如：提交到 Django 后端 fetch('/scan/', { method: 'POST', headers: { 'X-CSRFToken': getCookie('csrftoken') }, // Django CSRF 安全要求 body: JSON.stringify({ code: content }) }); });
Instascan.Camera.getCameras().then(function(cameras) { if (cameras.length > 0) { scanner.start(cameras[0]); // 显式启动扫描 } else { console.warn('未检测到可用摄像头'); } }).catch(function(err) { console.error('获取摄像头列表失败：', err); }); }
// Django 项目中推荐的 CSRF Token 获取函数（如模板已注入 csrf_token） function getCookie(name) { let cookieArr = document.cookie.split(';'); for (let i = 0; i
// 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', initScanner);
### ? 常见问题排查
- **黑屏/无画面？**
→ 检查控制台是否有 `NotAllowedError`（用户拒绝权限）或 `NotFoundError`（无可用设备）；确保 HTTPS 环境（本地 `localhost` 除外，HTTP 下 `getUserMedia` 将被禁用）。
- **Instascan 不触发扫描？**
→ 确认 `scanner.start()` 已调用，且 `video.srcObject` 不为 `null`；避免在 `video` 元素未挂载 DOM 前初始化扫描器。
- **Django 部署注意事项**：
→ 生产环境务必启用 HTTPS；CSRF Token 需通过 `{% csrf_token %}` 或 `getCookie` 安全传递；后端视图应接受 JSON POST 并校验 `request.content_type == 'application/json'`。
### ✅ 总结
渲染摄像头视频流的核心是：**显式调用 `getUserMedia()` → 获取 `MediaStream` → 赋值给 `video.srcObject`**。Instascan 本身不负责开启摄像头，它仅消费已就绪的 `<video>` 流。结合 Django 时，注意 CSRF 保护与 HTTPS 强制要求。完成以上配置后，用户即可在页面中实时看到摄像头画面，并同步进行 QR 码识别。 
