本文介绍如何使用 html5 video 和 canvas api 实现持续、稳定的实时摄像头黑白化处理，通过 javascript 对每一帧执行阈值二值化（rgb 平均亮度 > x → 白，否则黑），并修复常见崩溃与性能问题。
要实现真正可持续的实时黑白视频流（如来自用户摄像头），关键在于：✅ 正确初始化媒体流、✅ 避免重复创建 captureStream() 导致资源泄漏、✅ 优化像素处理逻辑、✅ 合理使用 requestAnimationFrame 循环。原始代码崩溃的核心原因有三：
- videoElement.srcObject = canvas.captureStream() 在每帧中反复调用 —— 每次都会创建新 MediaStream，旧流未释放，引发内存溢出与浏览器卡死；
- canvas.width/height 在 processFrame() 内动态设置 —— 视频尺寸在 play 事件触发时尚未就绪（videoWidth/videoHeight 为 0），导致 getImageData 失败；
- 未等待视频实际可播放（canplay 或 loadeddata）即启动处理循环，造成早期空帧或异常。
以下是生产就绪的完整实现方案：
<!DOCTYPE html>
<html>
<head>
<title>实时黑白摄像头流</title>
</head>
<body>
<video id="videoElement" autoplay muted playsinline width="640" height="480"></video>
<canvas id="processingCanvas" style="display:none;"></canvas>
<script>
const videoElement = document.getElementById('videoElement');
const canvas = document.getElementById('processingCanvas');
const ctx = canvas.getContext('2d');
// ✅ 静态预设画布尺寸（确保在获取流后、play前完成）
let stream;
const threshold = 120;
// 1️⃣ 获取用户摄像头流
async function initCamera() {
try {
stream = await navigator.mediaDevices.getUserMedia({ video: true });
videoElement.srcObject = stream;
} catch (err) {
console.error("无法访问摄像头：", err);
alert("请允许摄像头权限");
}
}
// 2️⃣ 等待视频元数据加载完成，再初始化画布尺寸
videoElement.addEventListener('loadedmetadata', () => {
canvas.width = videoElement.videoWidth;
canvas.height = videoElement.videoHeight;
console.log(`画布已设为 ${canvas.width}×${canvas.height}`);
});
// 3️⃣ 主处理循环（使用 requestAnimationFrame，非递归调用）
function processFrame() {
if (!videoElement.readyState || videoElement.readyState < 2) 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 avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
const val = avg > threshold ? 255 : 0;
data[i] = data[i + 1] = data[i + 2] = val;
// Alpha 通道保持不变（data[i+3] 不动）
}
// ✅ 写回 canvas
ctx.putImageData(imageData, 0, 0);
// ✅ 关键：仅创建一次 MediaStream，并复用（避免每帧新建！）
if (!videoElement.srcObject || !('getTracks' in videoElement.srcObject)) {
videoElement.srcObject = canvas.captureStream(30); // 30fps 流
}
}
// 4️⃣ 启动处理循环（使用 RAF，更稳定于 setTimeout）
function startProcessing() {
processFrame();
requestAnimationFrame(startProcessing);
}
// ? 初始化流程
initCamera().then(() => {
videoElement.addEventListener('play', () => {
console.log("视频开始播放，启动处理...");
startProcessing();
});
});
</script>
</body>
</html>⚠️ 注意事项与进阶建议：
-
性能瓶颈：纯 JS 像素遍历在高分辨率（如 1280×720）下易掉帧。推荐升级方案：
- ✅ 使用 WebGL（通过 glfx.js 或自定义 shader）实现 GPU 加速二值化；
- ✅ 或将计算移至 Web Worker，避免阻塞主线程（需传递 ImageBitmap）；
- 阈值自适应：固定 threshold=120 依赖光照条件。可结合 ctx.getImageData() 计算整帧平均亮度，动态调整阈值（Otsu 算法简化版）；
- 兼容性：captureStream() 在 Safari 中需开启实验性功能（chrome://flags/#unsafely-treat-insecure-origin-as-secure），生产环境建议搭配 HTTPS；
- 关闭清理：页面卸载前应调用 stream.getTracks().forEach(t => t.stop()) 释放摄像头。
通过以上结构化实现，你将获得一个低延迟、不崩溃、可持续运行的实时黑白视频流——既是计算机视觉入门实践，也是 Web 媒体处理的典型范式。
