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


Posted in HTML / CSS onJanuary 25, 2021

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

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

我们看一个简单的例子。

录制视频

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

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const {width, height} = 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.beginPath();
  ctx.rect(200, 200, 200, 200);
  ctx.fill();
  ctx.restore();
}

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

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

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

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

const stream = canvas.captureStream();

然后,我们创建一个MediaRecorder:

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

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

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("#videoContainer").style.display = "block";
  document.querySelector("video").src = url;
};

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

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

recorder.start();

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

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

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

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

与音频结合

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

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

HTML / CSS 相关文章推荐
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 #HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 #HTML / CSS
浅析HTML5页面元素及属性
Jan 20 #HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 #HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 #HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 #HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
Jan 14 #HTML / CSS
You might like
如何开发一个虚拟域名系统
2006/10/09 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
简历中个人求职的自我评价模板
2013/11/29 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
工程技术员岗位职责
2014/03/02 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
婚庆答谢词
2015/01/04 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB