如何用JavaScript实现实时摄像头视频的持续黑白流传输？

需求是通过JavaScript实时处理摄像头视频流，将每个像素转换为黑白：计算RGB平均值，大于阈值则设为白色(255)，否则设为黑色(0)。现有代码仅显示一帧就崩溃，核心问题在于错误地覆盖了视频元素的原摄像头流，导致后续无法获取新帧。

原代码问题分析 #

原代码中每次调用processFrame时执行videoElement.srcObject = canvas.captureStream()，这会把视频元素的数据源从摄像头流替换为canvas的流，中断了原摄像头的输入，所以只能处理一帧就无法继续获取新画面。

修正后的实现代码 #

const videoElement = document.getElementById('videoElement');
const outputCanvas = document.createElement('canvas');
document.body.appendChild(outputCanvas); // 将处理后的画面画布添加到页面
const ctx = outputCanvas.getContext('2d');

// 初始化摄像头访问
async function initCamera() {
  try {
    // 请求摄像头权限并获取流
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    videoElement.srcObject = stream;
    videoElement.play();
  } catch (error) {
    console.error('无法访问摄像头:', error);
  }
}

function processFrame() {
  // 等待视频加载完成，获取有效尺寸
  if (videoElement.videoWidth === 0 || videoElement.videoHeight === 0) {
    requestAnimationFrame(processFrame);
    return;
  }

  // 同步画布尺寸与视频
  outputCanvas.width = videoElement.videoWidth;
  outputCanvas.height = videoElement.videoHeight;

  // 将当前视频帧绘制到画布
  ctx.drawImage(videoElement, 0, 0);

  // 获取画布像素数据
  const imageData = ctx.getImageData(0, 0, outputCanvas.width, outputCanvas.height);
  const data = imageData.data;
  const threshold = 120; // 可根据需求调整黑白阈值

  // 遍历处理每个像素
  for (let i = 0; i < data.length; i += 4) {
    const red = data[i];
    const green = data[i + 1];
    const blue = data[i + 2];
    // 计算亮度平均值
    const brightness = (red + green + blue) / 3;
    // 根据阈值设置黑白值，保留alpha通道不变
    const pixelValue = brightness > threshold ? 255 : 0;
    data[i] = pixelValue;
    data[i + 1] = pixelValue;
    data[i + 2] = pixelValue;
  }

  // 将处理后的像素数据放回画布
  ctx.putImageData(imageData, 0, 0);

  // 递归调用处理下一帧
  requestAnimationFrame(processFrame);
}

// 视频开始播放时启动帧处理
videoElement.addEventListener('play', processFrame);
// 初始化摄像头
initCamera();

关键修改说明 #

• 分离输入与输出：保留原videoElement的摄像头流作为输入，使用单独的outputCanvas展示处理后的画面，避免流被中断。
• 异步初始化摄像头：新增initCamera函数处理摄像头权限请求，确保流正确加载后再开始播放和处理。
• 尺寸校验：在处理帧前检查视频尺寸，避免视频未加载完成时的无效操作。
• 保留alpha通道：处理像素时不修改alpha值，保证画面透明度正常。

内容的提问来源于stack exchange，提问作者mohammed yazid Berrached