详解如何将 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实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
css3的focus-within选择器的使用
May 11 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
HTML文本属性&颜色控制属性的实现
Dec 17 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 HTML / CSS
HTML基础详解(上)
Oct 16 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 UBB 解析实现代码
2011/11/27 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
详解微信UnionID作用
2019/05/15 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python之wxPython菜单使用详解
2014/09/28 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
使用TensorFlow实现SVM
2018/09/06 Python
python opencv读mp4视频的实例
2018/12/07 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
电子商务专业个人的自我评价
2013/12/19 职场文书
生产班组长岗位职责
2014/01/05 职场文书
商场总经理岗位职责
2014/02/03 职场文书
毕业生找工作求职信
2014/08/05 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
会计工作岗位职责
2015/02/03 职场文书
学校中秋节活动总结
2015/03/23 职场文书
排查MySQL生产环境索引没有效果
2022/04/11 MySQL