详解如何将 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截图_动力节点Java学院整理
Jul 11 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
使用css3实现超炫的loading加载动画效果
May 07 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
浅析HTML5中的 History 模式
Jun 22 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
HTML5 背景的显示区域实现
Jul 09 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 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
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
php学习笔记之 函数声明
2011/06/09 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
splice slice区别
2006/10/09 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
python基于queue和threading实现多线程下载实例
2014/10/08 Python
python实现清屏的方法
2015/04/30 Python
django实现用户登陆功能详解
2017/12/11 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
python下载微信公众号相关文章
2019/02/26 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
材料物理专业个人求职信
2013/12/15 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
工程部文员岗位职责
2015/02/04 职场文书
开学典礼校长致辞
2015/07/29 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技