如何使用Agora和Reactjs从网络摄像头捕捉图像

Question

我正在尝试建立一个缩放网站，并从参与者的视频流中获取出席人数。我正在将Agora与react.js一起使用。现在，我正试图从视频流中捕捉图像，但我不知道如何使用Agora。这是我拍摄图像的功能。

const captureSnapshot = async () => {
if (tracks[1]) {
const canvas = document.createElement("canvas");
canvas.width = tracks[1].videoWidth;
canvas.height = tracks[1].videoHeight;
canvas.getContext("2d").drawImage(tracks[1], 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();
}

这是我得到的轨道，它保存音频和视频轨道

const { ready, tracks } = useMicrophoneAndCameraTracks();

我从agora文档中找到了一些例子，应该是这样的

const stream = tracks[1].captureStream(0)
stream.getVideoTracks()[0].requestFrame();

但它不起作用

Answer 1

如果您使用的是4.1.0或更高版本，可以尝试使用getCurrentFrameData((从channelParams.remoteVideoTrack获取帧数据：ImageData；方法

//something like this
const image = channelParams.remoteVideoTrack.getCurrentFrameData();

agora网络示例截图https://docs.agora.io/en/video-calling/get-started/get-started-sdk?platform=web

ILocalTrack界面的屏幕截图