我想用 React 在画布上录制视频答案

【问题标题】：I want to record video on canvas in React我想用 React 在画布上录制视频
【发布时间】：2021-05-21 07:47:37
【问题描述】：

我做了很长时间的搜索，觉得有必要在这里问一下。我之前使用的 npm 包什么也没做。有没有人做过或经历过这样的应用程序？我要做的就是在画布元素上绘制时将其录制为视频。提前致谢。

【问题讨论】：

【解决方案1】：

是的，您可以为此使用MediaStream、captureStream 和MediaRecorder

这是一个示例，在画布上绘制了一些彩色方块，然后使用录制创建了一个视频：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const stream = canvas.captureStream();
const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
const video = document.querySelector('video');

ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 50, 50);
setTimeout(() => {
  ctx.fillStyle = 'blue';
  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;
});

<canvas></canvas>
<video controls></video>

但基本上，一旦你获得了录音 URL，你就可以用它做任何事情，包括创建下载链接、自动下载录音等。

【讨论】：

非常感谢您的回复。但是，我没有说明我想在这个问题中做出什么反应。对不起。我的主要问题实际上是在反应方面。
是的，但它是一个纯 JS 解决方案，所以它可以在 React 中运行，问题出在哪里？
其实问题是我还没有开始react，也不知道具体怎么转react。当我像这样传输它时，我在视频 src 部分得到一个属性空错误。我还收到一个错误，例如无法读取 null 的属性“getContext”。所以不幸的是它犯了很多错误。
那么只需使用refs 而不是querySelector 就可以了。如果您不解释您的用例并包含 an MRE，那么“如何将其转移到 React”很难进一步回答。
啊。坦克你我会看看参考零件。