现代浏览器通过 getusermedia() 请求摄像头权限需处理拒绝异常、https 环境、禁用音频防黑屏、css object-fit 适配、track.stop() 切换前后置，并为微信等不支持环境 fallback 至 input file 方案。
用 getUserMedia() 请求摄像头权限最直接
现代浏览器（包括 Android Chrome、Safari 14.3+）都支持 getUserMedia()，它是 WebRTC 的一部分，不需要额外库。关键不是“调用摄像头”，而是请求用户授权并把视频流绑定到 <video></video> 元素上。
常见错误是直接写 navigator.mediaDevices.getUserMedia({ video: true }) 却没处理拒绝权限或设备不可用的情况——这时 Promise 会 reject，控制台报 NotAllowedError 或 NotFoundError，页面静默失败。
- 必须在 HTTPS 或
localhost环境下运行，HTTP 页面会被浏览器直接拒掉getUserMedia() - 移动端 Safari 对
video: true默认启用后置摄像头；如需前置，显式传{ video: { facingMode: "user" } } - 部分低端 Android 机型不支持
facingMode，建议 fallback 到空对象再捕获异常
<input type="file"> 是更轻量的替代方案
如果只需要拍照上传，不用实时预览，<input type="file" accept="image/*" capture="environment"> 更可靠。它绕过 WebRTC 权限模型，直接唤起系统相机 App，兼容性好（连 iOS 10 都支持）。
注意：capture="environment" 表示默认调用后置摄像头，capture="user" 是前置；但这个属性在部分安卓 WebView 中被忽略，实际仍由系统决定。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 选中图片后，通过
input.files[0]拿到Blob，可转为 URL 用URL.createObjectURL()预览 - 无法控制分辨率、对焦、闪光灯等参数，纯系统级调用
- 不能用于录像，
accept="video/*"+capture在某些安卓版本上只触发拍照
移动端常见坑：自动播放策略和尺寸适配
即使拿到视频流，<video></video> 元素也可能黑屏——因为 iOS 和部分安卓浏览器禁止自动播放带音轨的视频，而 getUserMedia() 返回的流默认带音频轨道（哪怕你没要麦克风）。解决方法是显式关闭音频：
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
另外，手机横屏时视频画面常被拉伸或裁剪。别依赖 width/height 属性，用 CSS 控制容器，并设 object-fit: cover 保持比例：
video { width: 100%; height: 100%; object-fit: cover; }
- 部分安卓浏览器（如三星 Internet）需要给
<video></video>加autoplay muted才能启动流渲染 - 获取真实视频尺寸要用
video.videoWidth/video.videoHeight，而非元素的offsetWidth - 频繁切换前后置摄像头时，务必先
track.stop()再请求新流，否则旧流可能卡住
真机调试必须走 HTTPS 或 localhost
本地开发时，Chrome 和 Firefox 允许 http://localhost 使用 getUserMedia()，但一旦部署到局域网 IP（如 http://192.168.x.x），几乎所有手机浏览器都会拒绝——报错 SecurityError: getUserMedia() not allowed in this context。
临时解决办法：用 npx local-web-server 启一个 HTTPS 本地服务，或用 Vercel/Netlify 部署测试页。不要试图用 HTTP + chrome://flags 绕过，真机无效。
- 微信内置浏览器（X5 内核）完全不支持
getUserMedia()，只能走<input>方案 - iOS 微信是 Safari 内核但禁用了 WebRTC，同理
- 检测是否可用：用
if (navigator.mediaDevices?.getUserMedia)判断，别只查navigator.getUserMedia（已废弃）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
