本文介绍如何使用 html5 video、canvas 和 javascript 实现持续稳定的实时摄像头黑白视频流，通过逐帧处理 rgb 均值并应用自定义亮度阈值（如 120），将画面高效转换为二值化黑白效果。
要实现真正可持续的实时黑白视频流（而非单帧卡死或内存泄漏），关键在于避免重复创建资源、合理复用 Canvas 尺寸、精简像素计算逻辑，并杜绝在循环中反复调用 videoElement.srcObject = canvas.captureStream() 这一高开销操作——原代码正是因此崩溃：每次调用 captureStream() 都会新建媒体流轨道，导致浏览器资源耗尽。
以下是优化后的完整实现方案：
✅ 正确结构与核心要点
- 仅初始化一次 Canvas 尺寸：videoWidth/videoHeight 在视频未加载完成时为 0，需监听 loadeddata 或 canplay 事件后再设置；
- 复用同一 MediaStream：canvas.captureStream() 应只调用一次，后续直接向该流写入帧；
- 避免冗余操作：将 threshold、宽高、上下文等静态变量移出循环；
- 使用 requestAnimationFrame 持续驱动，但确保帧处理逻辑轻量。
? 完整可运行代码示例
<!DOCTYPE html>
<html>
<head>
<title>Real-time B&W Webcam Stream</title>
</head>
<body>
<video id="videoElement" autoplay muted playsinline></video>
<canvas id="processingCanvas" style="display:none;"></canvas>
<script>
const videoElement = document.getElementById('videoElement');
const canvas = document.getElementById('processingCanvas');
const ctx = canvas.getContext('2d');
let stream;
const threshold = 120;
// 启动摄像头
async function startCamera() {
try {
stream = await navigator.mediaDevices.getUserMedia({ video: true });
videoElement.srcObject = stream;
} catch (err) {
console.error("无法访问摄像头：", err);
}
}
// 初始化 Canvas 尺寸（等待视频元数据加载）
videoElement.addEventListener('loadeddata', () => {
canvas.width = videoElement.videoWidth;
canvas.height = videoElement.videoHeight;
});
// 创建一次性的输出流
let outputStream;
let animationId;
function processFrame() {
if (!videoElement.readyState || !videoElement.videoWidth) return;
// 绘制当前视频帧到 Canvas
ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
// 获取图像数据并二值化处理
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;
const color = brightness > threshold ? 255 : 0;
data[i] = data[i + 1] = data[i + 2] = color;
// Alpha 保持 255（不透明）
}
ctx.putImageData(imageData, 0, 0);
// 持续向同一输出流写入帧（无需重复 captureStream）
if (!outputStream) {
outputStream = canvas.captureStream(30); // 30fps
videoElement.srcObject = outputStream;
}
animationId = requestAnimationFrame(processFrame);
}
// 开始处理
videoElement.addEventListener('play', () => {
if (animationId) cancelAnimationFrame(animationId);
processFrame();
});
// 页面卸载时清理资源
window.addEventListener('beforeunload', () => {
if (stream) stream.getTracks().forEach(t => t.stop());
if (animationId) cancelAnimationFrame(animationId);
});
startCamera();
</script>
</body>
</html>⚠️ 注意事项与性能建议
-
性能瓶颈：纯 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() 将被现代浏览器阻止。
通过以上优化，你将获得一个稳定、低延迟、可长期运行的实时黑白视频流系统，适用于计算机视觉预处理、艺术化直播、嵌入式视觉演示等多种场景。
