详解如何将 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的appearance属性改变任何元素的浏览器默认风格
Dec 24 HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5新特性之语义化标签
Oct 31 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 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 正则表达式小结
2015/02/12 PHP
PHP实现合并discuz用户
2015/08/05 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
javascript数组详解
2014/10/22 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
详解React 元素渲染
2020/07/07 Javascript
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
使用python实现多维数据降维操作
2020/02/24 Python
python 调整图片亮度的示例
2020/12/03 Python
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
二年级体育教学反思
2014/01/15 职场文书
中药学自荐信
2014/06/15 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
雷锋的故事观后感
2015/06/10 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
Go语言基础知识点介绍
2021/07/04 Golang
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python