可将摄像头媒体流通过video元素中转绘制到Canvas实现实时处理：先用getUserMedia获取流并赋给video，再用requestAnimationFrame逐帧drawImage；需注意兼容性、性能优化及资源释放。
可以将摄像头获取的媒体流直接绘制到 Canvas 上，实现实时视频画面捕获与处理。
获取 Camera 媒体流
使用 navigator.mediaDevices.getUserMedia() 请求用户授权并获取视频流。需指定 { video: true } 选项，返回 Promise，成功后得到 MediaStream 对象。
- 建议添加错误处理，如用户拒绝权限或无可用摄像头
- 可选传入约束对象（如
{ width: { ideal: 1280 }, height: { ideal: 720 } }）来控制分辨率 - 获取到的 stream 可直接赋给
<video>元素的srcObject属性进行预览
绑定 Video 元素作为绘制源
Canvas 本身不能直接接收 MediaStream，需借助 <video> 作为中间载体。将 stream 赋给 video 元素后，它会自动播放视频帧。
- video 元素需设置
playsinline（iOS Safari 必需）和autoplay - 推荐设为
display: none或隐藏在视口外，避免干扰 UI - 确保 video 元素已挂载到 DOM 中再调用
drawImage()，否则 canvas 绘制可能为空
定时绘制到 Canvas
利用 requestAnimationFrame 持续从 video 中抓取当前帧，绘制到 canvas 上。这是实现“流式转换”的核心步骤。
立即学习“前端免费学习笔记（深入）”；
- 调用
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)即可逐帧渲染 - 注意 canvas 尺寸应与 video 的实际输出尺寸匹配，否则可能拉伸或裁剪
- 若需处理单帧（如截图、滤镜），可在 draw 后调用
ctx.getImageData()获取像素数据
注意事项与优化点
实际应用中需关注兼容性、性能和资源释放问题。
- 部分旧浏览器不支持
srcObject，可用URL.createObjectURL(stream)回退 - 停止流时务必调用
stream.getTracks().forEach(track => track.stop())，防止持续占用摄像头 - 高频绘制对低端设备压力较大，可结合
video.readyState判断是否就绪再绘制 - canvas 若用于 WebGL 处理，建议使用
texImage2D()直接上传 video 纹理，效率更高
