网站首页 > 技术文章 正文
如果我们用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宽高的矩形在画布中心旋转。
接下来,我们将这个效果录制下来,假设我们录制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;
};
复制代码
最后,我们开始录制视频,并设定在6秒钟之后停止录制:
recorder.start();
setTimeout(() => {
recorder.stop();
}, 6000);
复制代码
这样,就可以达到我们想要的录屏效果了。
与音频结合
Canvas录制好的视频,我们还可以将它和音频结合,方法是通过ffmpeg的Web端来合成。
浏览器可以通过WebAssembly来集成ffmpeg,有兴趣的同学可以研究下。
总结
在一些需要动态回放需求的场景里,我们可以用Canvas来实时创建视频然后回放,从而不必使用JS重新绘制,这是一种比较节省资源的方式。另外,Canvas的录制功能对于一些在线教学的场景也很有价值,录屏软件消耗资源较多,而在Web上直接录制Canvas,这可能是一种更简单便捷的方式。
最后
如果你觉得这篇内容对你挺有启发,我想邀请你帮我二个小忙:
- 点个「 在看 」,让更多的人也能看到这篇内容(喜欢不点在看,都是耍流氓 -_-)
- 欢迎加关注私信“01”,拉你进技术群,长期交流学习.
点个在看支持我吧,转发就更好了
猜你喜欢
- 2024-11-26 视频播放必备神器,解锁H5 Player的强大功能
- 2024-11-26 NAS下搭建具备web管理界面并自动上传视频的bilibili录播姬
- 2024-11-26 html5的面试中,大概率会问到的音频和视频的那些知识点
- 2024-11-26 老司机福利,迅雷X新版可以下载网页视频了
- 2024-11-26 随笔:前端音视频的那些名词
- 2024-11-26 基于flutter/dart仿抖音app实例
- 2024-11-26 今年找工作到底有多难,真的不好找工作吗 @抖音短视频
- 2024-11-26 基于flutter3.x跨端仿抖音app实战|flutter-douyin短视频直播
- 2024-11-26 Sketch 免费入门视频教程 - 设计/前端/产品都应该学的设计利器
- 2024-11-26 MiroTalk:基于 WebRTC 的免费 4K 实时视频会议框架
你 发表评论:
欢迎- 599℃几个Oracle空值处理函数 oracle处理null值的函数
- 591℃Oracle分析函数之Lag和Lead()使用
- 579℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 575℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 571℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 564℃【数据统计分析】详解Oracle分组函数之CUBE
- 550℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 545℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- 前端获取当前时间 (50)
- 前端接口 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)