电脑浏览器Canvas动画录制教程：一键生成视频动画分享，谷歌浏览器操作指南

时间：2025-03-08

计算机浏览器可以将画布绘制的动画记录到视频中，从而实现一键视频动画共享，从而使视频制作更加轻松，更快。在这里，我将讨论实施过程。

准备

建议在Google Chrome上对其进行测试

记录视频

一些浏览器可以使用Mediarecorder类录制视频，如下所示，以检查是否受到支持

if(!MediaRecorder){
	alert('当前浏览器不支持录制视频');
	return;
}

文档中发现的帆布标签元素，画布帆布传递给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;
},

配置的模拟型是可选的。其他浏览器似乎不支持它，只有Google Chrome浏览器支持它。

生成视频

您可以将代码更改为以下来生成MP4文件

let url = URL.createObjectURL(new Blob(data, { type:'video/mp4' }));

测试后，一些玩家在播放此MP4视频时会遇到帧丢失问题，并且无法调整播放进度。这样，生成的MP4视频就存在问题。

最好直接生成默认的WebM视频并通过工具将其转换为MP4视频。

调用方法createrecorder（画布），然后开始录制。定时开始时，停止录制。代码如下

//...
const recorder = this.createRecorder(canvas);
//定时10s
let endTime = 10000;
//开始录制
recorder.start();
setTimeout(()=>{
	recorder.stop()
	//this.closeTimer();
},endTime);
//开始canvas动画...

停止录制后，通过方法createObjectUrl（）访问生成的视频视频，并通过标签视频直接播放。

<video :src="videoSrc" />

创建标签，模拟单击按钮下载视频，代码如下

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记录功能。建议将常规编码记录为“视频/WebM”类型。使用其他编码视频录制时，可能会出现转码错误或兼容性问题。