本文介绍一种基于 canvas 像素处理的高效方案，通过 requestanimationframe 持续捕获摄像头帧、计算灰度阈值并实时转为黑白图像，避免内存泄漏与性能崩溃，适用于前端实时图像处理场景。
要实现实时黑白视频流（例如来自用户摄像头的 Live WebRTC 流），核心挑战在于：不能仅处理单帧，而需构建可持续、低开销的逐帧处理循环。原始代码崩溃的主要原因有三：
- 重复创建 ImageData 对象：每次调用 getImageData() 都分配新内存，未释放导致内存溢出；
- 错误地重置 videoElement.srcObject：在每帧中反复赋值 canvas.captureStream() 会中断媒体流，引发播放异常；
- Canvas 尺寸未动态适配：videoWidth/videoHeight 在 play 事件触发时可能为 0，需等待视频元数据加载完成。
✅ 正确做法是：将处理逻辑与渲染分离——用一个 <canvas> 作为处理缓冲区，另一个 <video> 或 <img> 元素显示处理结果；或直接将 canvas.captureStream() 一次性绑定到目标 <video> 的 srcObject，之后只更新 canvas 内容。
以下是经过优化、可稳定运行的完整实现：
<!DOCTYPE html>
<html>
<head>
<title>Real-time Black & White Webcam Stream</title>
</head>
<body>
<video id="videoInput" autoplay muted playsinline></video>
<canvas id="processingCanvas" style="display:none;"></canvas>
<video id="outputVideo" autoplay playsinline></video>
<script>
const videoInput = document.getElementById('videoInput');
const outputVideo = document.getElementById('outputVideo');
const canvas = document.getElementById('processingCanvas');
const ctx = canvas.getContext('2d');
// 预设阈值与尺寸（后续动态更新）
let width = 640;
let height = 480;
const threshold = 120;
// 获取用户摄像头
async function startCamera() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
videoInput.srcObject = stream;
// 等待视频元数据就绪，再设置 canvas 尺寸
videoInput.addEventListener('loadedmetadata', () => {
width = videoInput.videoWidth;
height = videoInput.videoHeight;
canvas.width = width;
canvas.height = height;
// 启动处理循环
outputVideo.srcObject = canvas.captureStream(30); // 30fps 流
requestAnimationFrame(processFrame);
}, { once: true });
} catch (err) {
console.error("无法访问摄像头：", err);
}
}
function processFrame() {
// 绘制当前视频帧到 canvas（自动缩放适配）
ctx.drawImage(videoInput, 0, 0, width, height);
// 获取像素数据（复用同一块内存，避免频繁分配）
const imageData = ctx.getImageData(0, 0, width, 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 —— 此操作触发 captureStream 自动更新帧
ctx.putImageData(imageData, 0, 0);
// 持续循环（注意：此处 requestAnimationFrame 必须在函数末尾）
requestAnimationFrame(processFrame);
}
// 启动
startCamera();
</script>
</body>
</html>? 关键优化点说明：
立即学习“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 可根据光照条件动态调整（例如用直方图分析自动设定），提升鲁棒性。
通过以上结构化实现，你将获得一个稳定、低延迟、真正“持续流式”的黑白视频效果，为更复杂的前端计算机视觉应用（如边缘检测、运动识别）打下坚实基础。
