电脑浏览器上是可以将Canvas绘制的动画录制成视频的,实现一键生成视频动画分享,让视频制作变得更容易更快捷,这里将实现过程讲一下。
准备
建议在谷歌浏览器上测试
- 熟悉HTML,Canvas,JavaScript知识即可
录制视频
部分浏览器上可以使用MediaRecorder
类,来录制视频,如下代码,检查是否支持
if(!MediaRecorder){
alert('当前浏览器不支持录制视频');
return;
}
从document中找到的canvas标签元素,画布canvas
传给createRecorder()
方法中,代码如下
<html>
<body>
<canvas id="canvas"></canvas>
<script>
window.onload = function() {
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const recorder = createRecorder(canvas);
//...
console.log('init', { canvas, context, recorder })
}
</script>
</body>
</html>
第一种,录制成默认视频的方法,代码如下
createRecorder(canvas){
let stream = canvas.captureStream();
const mimeType = 'video/webm';
let recorder = new MediaRecorder(stream, { mimeType:mimeType });
const data = []
recorder.ondataavailable = function(event){
if(event?.data.size) data.push(event.data);
}
recorder.onstop = () => {
let url = URL.createObjectURL(new Blob(data, { type:mimeType }));
this.videoSrc = url;
}
return recorder;
},
这里生成的是
webm
格式视频文件,通用浏览器都支持
另一种,录制成编码为h264
视频的方法,代码如下
createRecorder(canvas){
let stream = canvas.captureStream();
let recorder = new MediaRecorder(stream, { mimeType:'video/webm;codecs=h264' });
const data = []
recorder.ondataavailable = function(event){
if(event?.data.size) data.push(event.data);
}
recorder.onstop = () => {
let url = URL.createObjectURL(new Blob(data, { type:'video/webm' }));
this.videoSrc = url;
}
recoder.onerror = (err) => console.error(err)
return recorder;
},
其中配置的mimeType
,以下的可选择,其它浏览器好像不支持,只有谷歌Chrome浏览器支持
- “video/webm”
- “video/webm;codecs=vp8”
- “video/webm;codecs=vp9”
- “video/webm;codecs=h264”
- “video/x-matroska;codecs=avc1”
生成视频
可将代码改成以下,可以生成mp4文件
let url = URL.createObjectURL(new Blob(data, { type:'video/mp4' }));
生成的
mp4
视频文件,经测试,部分播放器播放此mp4视频会出现掉帧问题,不能调播放进度,这样生成的mp4视频是有问题的,
最好是直接生成默认的webm视频,通过工具来转换成mp4视频,
- 可以看文章【NodeJs】使用ffmpeg将视频webm转换为mp4
- 把配置mimeType设置成
video/webm;codecs=h264
这样转换快一些
调用方法createRecorder(canvas)
,然后开始录制,定时到了就停止录制,代码如下
//...
const recorder = this.createRecorder(canvas);
//定时10s
let endTime = 10000;
//开始录制
recorder.start();
setTimeout(()=>{
recorder.stop()
//this.closeTimer();
},endTime);
//开始canvas动画...
录制停止后,通过方法createObjectURL()
来访问生成的视频videoSrc
,通过标签video
直接播放
<video :src="videoSrc" />
创建一个a
标签,模拟点击按钮可下载视频,代码如下
onClickDownload(){
let a = document.createElement('a');
a.setAttribute('href', this.videoSrc);
a.setAttribute('download', '');
a.style.display='none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
},
完善功能
目前录制视频还没有声音,需要的话,可以借助专业的视频编辑工具给其配音,
可以把声音文件作为素材加入视频的时间轴中来,实现视频播放有声音文章来源:https://www.toymoban.com/news/detail-618822.html
兼容问题
有些浏览器可能不支持WebRTC
录制功能,使用浏览器建议录制通用编码为"video/webm"
类型,使用其它编码视频录制可能会出现转码出错或兼容问题文章来源地址https://www.toymoban.com/news/detail-618822.html
到了这里,关于【Canvas】使用画布绘制动画录制成MP4视频解决方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!