我想在 canvas 上用 React 录制视频

Question

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

Answer 1

是的，您可以使用 MediaStream, captureStream and MediaRecorder

下面是一个示例，其中在 canvas 上绘制了一些彩色方块，然后使用录音创建了一个视频：

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 的地步，你就可以用它做任何事情，包括创建下载 link、自动下载录音等。

我想在 canvas 上用 React 录制视频

I want to record video on canvas in React

javascript

record