经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
详解如何将 Canvas 绘制过程转为视频
来源:jb51  时间:2021/2/1 11:31:57  对本文有异议

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

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

我们看一个简单的例子。

录制视频

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

  1. const canvas = document.querySelector('canvas');
  2. const ctx = canvas.getContext('2d');
  3. const {width, height} = canvas;
  4.  
  5. ctx.fillStyle = 'red';
  6.  
  7. function draw(rotation = 0) {
  8. ctx.clearRect(0, 0, 1000, 1000);
  9. ctx.save();
  10. ctx.translate(width / 2, height / 2);
  11. ctx.rotate(rotation);
  12. ctx.translate(-width / 2, -height / 2);
  13. ctx.beginPath();
  14. ctx.rect(200, 200, 200, 200);
  15. ctx.fill();
  16. ctx.restore();
  17. }
  18.  
  19. function update(t) {
  20. draw(t / 500);
  21. requestAnimationFrame(update);
  22. }
  23. update(0);

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

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

  1. const stream = canvas.captureStream();

然后,我们创建一个MediaRecorder:

  1. const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });

接着我们可以注册ondataavailable事件,将数据记录下来:

  1. const data = [];
  2. recorder.ondataavailable = function (event) {
  3. if (event.data && event.data.size) {
  4. data.push(event.data);
  5. }
  6. };

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

  1. recorder.onstop = () => {
  2. const url = URL.createObjectURL(new Blob(data, { type: 'video/webm' }));
  3. document.querySelector("#videoContainer").style.display = "block";
  4. document.querySelector("video").src = url;
  5. };

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

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

  1. recorder.start();
  2.  
  3. setTimeout(() => {
  4. recorder.stop();
  5. }, 6000);

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

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

与音频结合

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

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号