【Canvas】使用画布绘制动画录制成MP4视频解决方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Canvas】使用画布绘制动画录制成MP4视频解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

电脑浏览器上是可以将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);
},

完善功能

目前录制视频还没有声音，需要的话，可以借助专业的视频编辑工具给其配音，
可以把声音文件作为素材加入视频的时间轴中来，实现视频播放有声音

兼容问题

有些浏览器可能不支持WebRTC录制功能，使用浏览器建议录制通用编码为"video/webm"类型，使用其它编码视频录制可能会出现转码出错或兼容问题
canvas录屏,Canvas画布绘图,javascript,音视频,前端,录制视频,MediaRecorder 文章来源地址https://www.toymoban.com/news/detail-618822.html