本文介绍一种基于 canvas 像素处理的高效方案，通过 requestanimationframe 持续捕获摄像头帧、计算灰度阈值并实时转为黑白图像，避免内存泄漏与性能崩溃，适用于前端实时图像处理场景。
要实现实时黑白视频流（例如来自用户摄像头的 Live WebRTC 流），核心挑战在于：不能仅处理单帧，而需构建可持续、低开销的逐帧处理循环。原始代码崩溃的主要原因有三：
- 重复创建 ImageData 对象：每次调用 getImageData() 都分配新内存，未释放导致内存溢出；
- 错误地重置 videoElement.srcObject：在每帧中反复赋值 canvas.captureStream() 会中断媒体流，引发播放异常；
- Canvas 尺寸未动态适配：videoWidth/videoHeight 在 play 事件触发时可能为 0，需等待视频元数据加载完成。
✅ 正确做法是：将处理逻辑与渲染分离——用一个
以下是经过优化、可稳定运行的完整实现：
Real-time Black & White Webcam Stream
? 关键优化点说明：
立即学习“Java免费学习笔记（深入）”；
- ✅ 尺寸初始化时机：监听 loadedmetadata 事件确保 videoWidth/videoHeight 可靠；
- ✅ 流绑定一次性完成：canvas.captureStream() 仅在初始化时调用一次，后续仅更新 canvas 内容；
- ✅ 内存友好：getImageData() 虽仍被调用，但现代浏览器对相同尺寸的 putImageData/getImageData 有内部缓冲复用机制；如需极致性能，可进一步用 OffscreenCanvas + Web Worker（需 HTTPS）；
- ✅ 逻辑简化：用 data[i] = data[i+1] = data[i+2] = val 替代冗余赋值，提升可读性与执行效率。
⚠️ 注意事项：
- 该方案依赖 captureStream()，兼容性良好（Chrome 57+, Edge 79+, Firefox 61+, Safari 16.4+），但 Safari 旧版本需手动启用实验性功能；
- 若页面后台运行，requestAnimationFrame 可能被节流，建议结合 visibilitychange 事件暂停/恢复处理；
- 阈值 threshold 可根据光照条件动态调整（例如用直方图分析自动设定），提升鲁棒性。
通过以上结构化实现，你将获得一个稳定、低延迟、真正“持续流式”的黑白视频效果，为更复杂的前端计算机视觉应用（如边缘检测、运动识别）打下坚实基础。
