如何使用Agora与React.js捕获视频流图像实现考勤功能？

你遇到的核心问题是：useMicrophoneAndCameraTracks返回的tracks[1]是Agora的LocalVideoTrack/RemoteVideoTrack实例，不是HTMLVideoElement，所以直接传给drawImage是无效的。下面给你两种可行的解决方法：

方法一：通过绑定的video元素截图 #

Agora的视频轨需要先播放到一个video元素上，你可以创建一个隐藏的video元素，把track挂载上去，再从这个元素截图：

import { useMicrophoneAndCameraTracks } from "agora-rtc-react";
import { useEffect, useRef } from "react";

const YourComponent = () => {
  const { ready, tracks } = useMicrophoneAndCameraTracks();
  const videoRef = useRef(null);

  // 组件挂载时将视频轨绑定到video元素
  useEffect(() => {
    if (tracks[1] && videoRef.current) {
      tracks[1].play(videoRef.current);
    }
    return () => {
      if (tracks[1]) tracks[1].stop();
    };
  }, [tracks]);

  const captureSnapshot = () => {
    if (!videoRef.current) return;
    
    const canvas = document.createElement("canvas");
    canvas.width = videoRef.current.videoWidth;
    canvas.height = videoRef.current.videoHeight;
    const ctx = canvas.getContext("2d");
    ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
    
    const dataUrl = canvas.toDataURL("image/png");
    const link = document.createElement("a");
    link.href = dataUrl;
    link.download = "snapshot.png";
    link.click();
  };

  return (
    <div>
      {/* 隐藏的video元素，用于承载视频轨 */}
      <video ref={videoRef} style={{ display: "none" }} />
      <button onClick={captureSnapshot} disabled={!ready}>
        捕获截图
      </button>
    </div>
  );
};

方法二：使用Agora的CanvasRenderer直接渲染 #

Agora SDK提供了createCanvasRenderer方法，可以直接将视频帧渲染到画布上，不需要额外的video元素：

const captureSnapshot = () => {
  if (!tracks[1]) return;

  const canvas = document.createElement("canvas");
  const renderer = tracks[1].createCanvasRenderer();
  // 设置画布尺寸匹配视频轨
  const { width, height } = tracks[1].getVideoDimensions();
  canvas.width = width;
  canvas.height = height;
  
  // 将当前帧渲染到画布
  renderer.render(canvas);
  
  const dataUrl = canvas.toDataURL("image/png");
  const link = document.createElement("a");
  link.href = dataUrl;
  link.download = "snapshot.png";
  link.click();
  
  // 销毁渲染器释放资源
  renderer.destroy();
};

为什么你之前的代码无效？ #

你尝试的captureStream方法需要视频轨处于播放状态，而且Agora的Track实例的captureStream返回的MediaStream需要绑定到video元素后才能获取有效帧。另外，requestFrame需要配合画布渲染或video元素的播放状态才能触发帧更新，单独调用不会生效。

内容的提问来源于stack exchange，提问作者pınar altınışık