本文介绍如何使用 html5 video、canvas 和 javascript 实现持续稳定的实时摄像头黑白视频流，通过逐帧处理 rgb 均值并应用自定义亮度阈值（如 120），将画面高效转换为二值化黑白效果。
要实现真正可持续的实时黑白视频流（而非单帧卡死或内存泄漏），关键在于避免重复创建资源、合理复用 Canvas 尺寸、精简像素计算逻辑，并杜绝在循环中反复调用 videoElement.srcObject = canvas.captureStream() 这一高开销操作——原代码正是因此崩溃：每次调用 captureStream() 都会新建媒体流轨道，导致浏览器资源耗尽。
以下是优化后的完整实现方案：
✅ 正确结构与核心要点
- 仅初始化一次 Canvas 尺寸：videoWidth/videoHeight 在视频未加载完成时为 0，需监听 loadeddata 或 canplay 事件后再设置；
- 复用同一 MediaStream：canvas.captureStream() 应只调用一次，后续直接向该流写入帧；
- 避免冗余操作：将 threshold、宽高、上下文等静态变量移出循环；
- 使用 requestAnimationFrame 持续驱动，但确保帧处理逻辑轻量。
? 完整可运行代码示例
Real-time B&W Webcam Stream
⚠️ 注意事项与性能建议
-
性能瓶颈：纯 CPU 像素遍历在高分辨率（如 1280×720）下易造成掉帧。如需更高性能，推荐：
- 使用 WebGL + Shader 实现 GPU 加速二值化；
- 或将 processFrame 移入 Web Worker（注意：CanvasRenderingContext2D 不可在 Worker 中使用，需改用 OffscreenCanvas）；
- 阈值调节：threshold = 120 适用于多数光照环境，暗光场景可下调至 80–100，强光则上调至 140–160；
- 兼容性：captureStream() 在 Chrome、Edge、Firefox 中支持良好；Safari 支持有限（需 macOS/iOS 16.4+），生产环境建议降级为
- 隐私提示：务必在 HTTPS 环境下运行（本地 localhost 亦可），否则 getUserMedia() 将被现代浏览器阻止。
通过以上优化，你将获得一个稳定、低延迟、可长期运行的实时黑白视频流系统，适用于计算机视觉预处理、艺术化直播、嵌入式视觉演示等多种场景。
