详解如何将 Canvas 绘制过程转为视频

如果我们用Canvas实现了一些动画效果，需要将它回放出来，很多人通常就是用 录屏 工具将屏幕内容录下来播放，很少有人 知道 ，Canvas可以直接通过现代浏览器支持的 Media Streams API 来转成视频。

Canvas对象支持captureStre am 方法，这个方法会返回一个MediaStream对象。然后，我们可以通过这个对象创建一个MediaRecorder来录屏。

我们看一个 简单 的例子。

录制 视频

首先我们写一个非常简单的Canvas动画效果，代码如下：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const {width, h ei ght} = canvas;

ctx.fillStyle = ' red ';

function draw(rotation = 0) {
  ctx.clearRect(0, 0, 1000, 1000);
  ctx.save();
  ctx.translate(width / 2, height / 2);
  ctx.rotate(rotation);
  ctx.translate(-width / 2, -height / 2);
  ctx.be gin Path();
  ctx.rect(200, 200, 200, 200);
  ctx.fill();
  ctx.re Store ();
}

function update(t) {
  draw(t / 500);
   requestAnimationFrame (update);
}
update(0);

这个效果实现一个200 宽 高的矩形在 画布 中心旋转。

接下来，我们将这个效果录制下来，假设我们录制6秒的视频，首先我们要获取MediaStream对象：

const stream = canvas.captureStream();

然后，我们创建一个MediaRecorder：

const recorder = new MediaRecorder(stream, { mimeTy PE : 'video/webm' });

接着我们可以注册ondataav ai lable事件，将数据记录下来：

const data = [];
recorder.ondataavailable = function (event) {
  if (event.data  &&  event.data.size) {
    data.push(event.data);
  }
};

在onstop事件里，我们通过Blob对象，将数据写入到页面上的 video标签 中。

recorder.onstop = () => {
  const url = URL.createObjectURL(new Blob(data, { type: 'video/webm' }));
  document.querySelector(" #vi deoContainer").style.dis play  = "block";
  document.querySelector("video").src = url;
};

如果你不 了解 Blob 对象，可以看 这篇文章 。

最后，我们 开始 录制视频，并设定在6秒钟之后停止录制：

recorder.start();

setTimeout(() => {
  recorder.stop();
}, 6000);

这样，就可以达到我们想要的录屏效果了。

完整的代码在 https://codepen.io/akira-cn/pen/LYNVewy 。

与音频结合

Canvas 录制好的视频，我们还可以将它和音频结合，方法是通过 ffmpeg 的 Web 端来合成。
浏览器可以通过 WebAs SEM bly 来集成 ffmpeg，具体的项目在 这里 ，有兴趣的 同学 可以研究下。
ffmpeg 的 Web API 用起来还比较复杂，奇舞团的同学开发了一个非常好用的封装，项目地址在 这里 ，可以在这里看到 具体的例子 。

到此这篇关于详解如何将 Canvas 绘制 过程转为视频的 文章 就介绍到这了,更多相关Canvas 绘制过程转为视频内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 详解如何将 Canvas 绘制过程转为视频 全部内容，希望文章能够帮你解决 详解如何将 Canvas 绘制过程转为视频 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于详解如何将 Canvas 绘制过程转为视频的详细内容...