Reactjs 如何在react konva中捕获视频的第一帧

我用react konva制作了一个简单的视频播放器，我想在播放视频之前将第一帧显示为缩略图

以下是我的方法：

我使用Konva.Image来显示视频，使用Konva.Animation来更新图像。

从“Konva”导入Konva；
从“React”导入React，{useState，useRef，useffect}；
从“react konva”导入{Stage，Layer，Image，Text}；
功能视频播放器（{宽度，高度}）{
const video=useRef（）；
const image=useRef（）；
const anim=useRef（）；
const text=useRef（）；
const[loading，setLoading]=useState（true）；
useffect（（）=>{
anim.current=新Konva.Animation（（）=>{
image.current.image（video.current）；
}，image.current.getLayer（））；
});
返回(
{
text.current.destroy（）；
video.current.play（）；
anim.current.start（）；
}}
>
玩
{
video.current.pause（）；
动画当前停止（）；
}}
>
暂停
{
设置加载（假）；
}}
src=”https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c4/Physicsworks.ogv/Physicsworks.ogv.240p.vp9.webm"
/>
);
}
导出默认视频播放器您可以使用钩子：

为预览图像创建画布元素
创建一个视频元素
等待视频加载
将第一帧绘制到画布中
未播放视频时，使用预览画布作为源
const usePreview=（url）=>{
const[canvas，setCanvas]=useState（null）；
useffect（（）=>{
const video=document.createElement（“视频”）；
video.src=url；
const onLoad=（）=>{
const canvas=document.createElement（“canvas”）；
canvas.width=video.videoWidth；
canvas.height=video.videoHeight；
video.currentTime=1；
const ctx=canvas.getContext（“2d”）；
ctx.drawImage（视频，0,0）；
设置画布（画布）；
};
video.addEventListener（“canplay”，onLoad）；
return（）=>video.removeEventListener（“加载”，onLoad）；
}，[url]）；
返回画布；
};

完整演示：
我想我在某个地方读到，你可以在屏幕外的画布上播放第1帧，然后抓取画布的图像并将其放入预览支架中，然后销毁屏幕外的画布。@VanquishedWombat我想这就是你的建议。我正在尝试调整它以适应当前的反应，但在实现方面遇到了一些问题非常感谢。我试过类似的方法，现在我知道哪里出了问题