必须由用户手势（如点击）触发 navigator.mediaDevices.getUserMedia()，否则 Chrome 会因安全策略拒绝调用并报 NotAllowedError；需 HTTPS（或 localhost）、正确绑定 video.srcObject、检查设备可用性并前置权限判断。
调用 navigator.mediaDevices.getUserMedia() 时页面无反应或报错
多数情况下不是代码写错了，而是浏览器策略阻止了未安全上下文（non-secure context）下的摄像头访问。HTTP 页面直接调用 getUserMedia() 会静默失败或抛出 NotAllowedError 或 SecurityError。
- 必须使用 HTTPS 协议（本地开发可用
localhost，它被浏览器视为安全上下文） - 不能在 iframe 中调用，除非该 iframe 显式声明
allow="camera" - 不能在页面加载完成前就调用；确保 DOM 就绪且用户有交互触发（如点击按钮），否则 Chrome 会拒绝自动启动媒体设备
document.getElementById('startBtn').addEventListener('click', async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
document.getElementById('video').srcObject = stream;
} catch (err) {
console.error('摄像头访问失败:', err.name); // 常见：NotAllowedError、NotFoundError、SecurityError
}
});
Chrome 报错 NotAllowedError: Permission denied
这不是权限没点“允许”，而是调用时机不合法。Chrome 要求媒体请求必须由用户手势（click、tap、keydown 等）直接触发，不能包裹在 setTimeout、Promise.then 或事件委托链过深的回调里。
- 避免在
DOMContentLoaded或load事件中自动调用 - 避免通过
async/await链间接触发（比如先 await 一个 API，再调用getUserMedia） - 检查是否被广告拦截插件或企业策略屏蔽（部分公司内网策略会禁用
mediaDevicesAPI）
拿到流但
常见原因是未正确绑定流对象，或视频元素未设置 autoplay 和 muted（尤其在移动端 Safari 和新版 Chrome 中，有声音的自动播放会被阻止，进而影响视频流渲染）。
HTML5微信网页调用监控直播
下载
HTML5微信网页调用监控直播软件实现了微信远程监控的功能。本代码实现了HTML5方式调用监控摄像头的实时直播画面，支持微信网页直接调用，PC电脑、安卓手机、苹果手机。特性一：支持市面上95%以上的摄像头直接接入。网络摄像机需支持标准协议ONVIF（所有的主流摄像机均已支持），模拟摄像机经过网关设备转码后100%支持;特性二：在PC电脑网页浏览情况下FLASH优先，在安卓(android),IPh
-
是移动端必需属性组合 - 务必使用
video.srcObject = stream，而不是video.src = URL.createObjectURL(stream)（后者已废弃且内存泄漏风险高） - 确保
stream确实包含视频轨道：stream.getVideoTracks().length > 0
如何优雅降级或判断摄像头是否可用
不能只靠 try/catch，需前置检测环境支持与设备存在性。有些设备（如某些 Windows 笔记本）摄像头硬件存在但驱动未启用，getUserMedia 仍会失败。
立即学习“前端免费学习笔记（深入）”；
- 先检查 API 是否存在：
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) - 再枚举设备确认有视频输入：
await navigator.mediaDevices.enumerateDevices()，找kind === 'videoinput' - 注意：
enumerateDevices()也需要用户授权后才返回真实设备列表，首次调用仍需用户交互触发
async function checkCameraAvailable() {
if (!navigator.mediaDevices?.enumerateDevices) return false;
try {
const devices = await navigator.mediaDevices.enumerateDevices();
return devices.some(d => d.kind === 'videoinput');
} catch (e) {
return false; // 权限未授或策略拦截
}
}
实际项目中最容易被忽略的是「用户交互触发」这一硬性要求——哪怕逻辑完全正确，只要不是由一次明确的点击发起，Chrome 就会拒之门外。别试图绕过，这是强制设计。 
