如何在ReactJS应用中从实时摄像头画面提取RGB颜色值（支持中心像素或整帧均值提取）

当然可以实现！其实获取摄像头实时画面的像素颜色值并不复杂，不管是提取中心像素的RGB值，还是对整个视频帧取颜色平均值，都能通过Canvas来完成——取整个帧的颜色平均值实现起来更简便，不需要精准计算坐标，我们直接基于你现有的Camera组件来修改：

核心原理 #

我们可以把video元素的实时画面绘制到隐藏的Canvas上，然后通过Canvas的getImageData()方法获取像素数据，再对这些数据进行计算即可得到想要的颜色值。

修改后的完整代码 #

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

function Camera() { 
  const videoRef = useRef(null); 
  const canvasRef = useRef(null);
  const [colorValue, setColorValue] = useState('#000000');

  useEffect(() => { 
    getVideo(); 
  }, []); 

  const getVideo = () => { 
    navigator.mediaDevices 
      .getUserMedia({ video: {facingMode: 'environment', width: 600 , height: 400}}) 
      .then(stream => { 
        const video = videoRef.current; 
        video.srcObject = stream; 
        
        video.play().then(() => {
          const canvas = canvasRef.current;
          const ctx = canvas.getContext('2d');
          // 让Canvas和视频尺寸保持一致
          canvas.width = video.videoWidth;
          canvas.height = video.videoHeight;

          // 持续捕获并处理每一帧
          const processFrame = () => {
            // 将视频画面绘制到Canvas
            ctx.drawImage(video, 0, 0);
            
            // 方案1：计算整个画面的颜色平均值（更简便）
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const data = imageData.data;
            let totalR = 0, totalG = 0, totalB = 0;
            const pixelCount = data.length / 4; // 每个像素占4个值：R/G/B/A
            
            for (let i = 0; i < data.length; i += 4) {
              totalR += data[i];
              totalG += data[i + 1];
              totalB += data[i + 2];
              // 忽略Alpha通道，因为摄像头画面一般不透明
            }

            const avgR = Math.floor(totalR / pixelCount);
            const avgG = Math.floor(totalG / pixelCount);
            const avgB = Math.floor(totalB / pixelCount);

            // 转成十六进制颜色格式
            const hexColor = `#${((1 << 24) + (avgR << 16) + (avgG << 8) + avgB).toString(16).slice(1)}`;
            setColorValue(hexColor);

            // 方案2：提取中心像素的RGB值（如需使用，替换上面的计算部分即可）
            // const centerX = Math.floor(canvas.width / 2);
            // const centerY = Math.floor(canvas.height / 2);
            // const pixelIndex = (centerY * canvas.width + centerX) * 4;
            // const centerR = data[pixelIndex];
            // const centerG = data[pixelIndex + 1];
            // const centerB = data[pixelIndex + 2];
            // const hexColor = `#${((1 << 24) + (centerR << 16) + (centerG << 8) + centerB).toString(16).slice(1)}`;
            // setColorValue(hexColor);

            // 继续处理下一帧
            requestAnimationFrame(processFrame);
          };

          processFrame();
        });
      }) 
      .catch(err => { 
        console.error("摄像头访问出错:", err); 
      }); 
  }; 

  return ( 
    <div> 
      <video ref={videoRef} />
      {/* 隐藏Canvas，仅用于处理帧数据 */}
      <canvas ref={canvasRef} style={{ display: 'none' }} />
      <div style={{ marginTop: '16px' }}>
        当前颜色值：
        <span style={{ 
          display: 'inline-block', 
          width: '30px', 
          height: '30px', 
          margin: '0 8px', 
          backgroundColor: colorValue,
          borderRadius: '4px'
        }} />
        {colorValue}
      </div>
    </div> 
  ) 
} 

export default Camera;

关键说明 #

1. 权限处理：确保用户允许浏览器访问摄像头，否则会触发错误捕获逻辑。
2. 性能考量：使用requestAnimationFrame来处理帧，能保证和浏览器刷新频率同步，避免性能浪费。
3. 两种方案选择：
   • 取颜色平均值：实现更简单，结果更稳定，适合需要整体画面色调的场景。
   • 取中心像素：精准获取画面中心点的颜色，适合需要聚焦特定位置的场景，只需要注释掉方案1的代码，启用方案2即可。

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