get video color

get-video-color.ts

useEffect(() => {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d', {
    alpha: false,
  });

  const colorSampling = () => {
    const { videoWidth, videoHeight } = videoRef.current;

    context.drawImage(videoRef.current, 0, 0, videoWidth, videoHeight);

    setTimeout(() => {
      const firstPixel = context.getImageData(0, 0, 1, 1).data;
      const rgbColor = `rgb(${firstPixel[0]}, ${firstPixel[1]}, ${firstPixel[2]})`;

      console.log(rgbColor);
    }, 100);
  };

  if (videoRef.current.readyState === 4) {
    colorSampling();
  } else {
    videoRef.current.addEventListener('loadedmetadata', colorSampling);
  }

  return () => {
    canvas.remove();
  };
}, []);