Javascript 我想在React的画布上录制视频

我找了很久，觉得有必要在这里问一下。我以前使用的npm包没有任何作用。以前有没有人做过或经历过这样的申请？我想做的就是在画布元素上绘图时将其录制为视频。提前谢谢。

是的，您可以使用，为此

下面是一个示例，在画布上绘制一些彩色正方形，然后通过录制创建视频：

const canvas=document.querySelector（'canvas'）；
const ctx=canvas.getContext（'2d'）；
const stream=canvas.captureStream（）；
const recorder=new media recorder（流，{mimeType:'video/webm'}）；
const video=document.querySelector（'video'）；
ctx.fillStyle='红色'；
ctx.fillRect（100,100,50,50）；
设置超时（（）=>{
ctx.fillStyle='蓝色'；
ctx.fillRect（200,50,50,50）；
}, 1000);
recorder.start（）；
setTimeout（（）=>recorder.stop（），2000）；
recorder.addEventListener（'dataavailable'，（evt）=>{
const url=url.createObjectURL（evt.data）；
video.src=url；
});

非常感谢您的回复。但是，我没有在问题中说明我想为react做些什么。很抱歉我的主要问题实际上是在react方面。是的，但这是一个纯JS解决方案，所以它在react中工作，问题在哪里？事实上，问题是我还没有开始react，我不知道如何将它转换为react。当我像这样传输它时，我在视频src部分得到一个属性null错误。我还收到一个错误，如无法读取null的属性“getContext”。不幸的是，它会犯很多错误。只要使用而不是
querySelector
，你就很好了。如果您不解释您的用例并包括，那么“如何将其转化为反应”很难进一步回答。啊。坦克你，我会看看参考的部分。