React中无法在Canvas绘制视频帧求助（需实现Chroma Keying）

核心迁移问题梳理 #

原生JS直接操作DOM，而React是声明式渲染，迁移时容易踩这些坑：

• 未通过useRef正确获取Canvas/Video的真实DOM节点
• 帧渲染循环未和React的Effect钩子、播放状态联动
• 忽略视频加载状态，导致绘制时视频尺寸未初始化
• 画布尺寸未与视频实时同步

完整可运行代码 #

import { useEffect, useRef, useState } from 'react';

const ChromaKeyVideo = () => {
  const videoRef = useRef(null);
  const canvasRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);

  // 绿幕抠图核心逻辑
  const processFrame = (video, canvas) => {
    const ctx = canvas.getContext('2d');
    // 同步画布与视频尺寸
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    const renderFrame = () => {
      if (!isPlaying) return;
      // 绘制原始视频帧
      ctx.drawImage(video, 0, 0);
      // 获取像素数据
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      const pixels = imageData.data;

      // 自定义绿幕阈值（根据实际绿幕颜色调整）
      const greenRange = {
        r: [0, 100],
        g: [140, 255],
        b: [0, 100]
      };

      // 遍历像素处理透明度
      for (let i = 0; i < pixels.length; i += 4) {
        const r = pixels[i];
        const g = pixels[i + 1];
        const b = pixels[i + 2];
        // 判断是否为绿幕像素，是则设为完全透明
        if (r >= greenRange.r[0] && r <= greenRange.r[1] &&
            g >= greenRange.g[0] && g <= greenRange.g[1] &&
            b >= greenRange.b[0] && b <= greenRange.b[1]) {
          pixels[i + 3] = 0;
        }
      }

      // 将处理后的像素放回画布
      ctx.putImageData(imageData, 0, 0);
      // 循环渲染下一帧
      requestAnimationFrame(renderFrame);
    };

    renderFrame();
  };

  useEffect(() => {
    const video = videoRef.current;
    const canvas = canvasRef.current;

    if (!video || !canvas) return;

    // 视频元数据加载完成后初始化帧处理
    const handleLoaded = () => processFrame(video, canvas);
    // 监听播放/暂停状态
    const handlePlay = () => setIsPlaying(true);
    const handlePause = () => setIsPlaying(false);

    video.addEventListener('loadedmetadata', handleLoaded);
    video.addEventListener('play', handlePlay);
    video.addEventListener('pause', handlePause);

    // 组件卸载时清理事件与状态
    return () => {
      video.removeEventListener('loadedmetadata', handleLoaded);
      video.removeEventListener('play', handlePlay);
      video.removeEventListener('pause', handlePause);
      setIsPlaying(false);
    };
  }, [isPlaying]);

  return (
    <div>
      {/* 隐藏原始视频，仅展示处理后的画布 */}
      <video
        ref={videoRef}
        src="/your-video-path.mp4"
        controls
        style={{ display: 'none' }}
        crossOrigin="anonymous" {/* 跨域视频需配置 */}
      />
      <canvas ref={canvasRef} />
    </div>
  );
};

export default ChromaKeyVideo;

关键注意事项 #

• DOM引用：必须用useRef获取Video和Canvas的真实DOM元素，不能用原生JS的getElementById
• 生命周期管理：在useEffect中绑定/解绑事件，避免内存泄漏
• 跨域处理：如果视频来自外部域名，需设置crossOrigin="anonymous"，且视频服务器要开启CORS
• 性能优化：用requestAnimationFrame保证帧渲染和浏览器刷新同步，高分辨率视频可考虑用Web Worker处理像素
• 阈值调整：根据实际绿幕的颜色，修改greenRange的RGB区间，能大幅提升抠图效果

常见问题排查 #

• 画布无内容：检查视频路径是否正确，loadedmetadata事件是否触发，画布尺寸是否和视频同步
• 抠图不干净：扩大RGB阈值范围，或增加亮度、饱和度的判断逻辑
• 画面卡顿：减少像素遍历中的冗余计算，或降低视频分辨率

内容的提问来源于stack exchange，提问作者Hack Try