电脑浏览器上是可以将Canvas绘制的动画录制成视频的，实现一键生成视频动画分享，让视频制作变得更容易更快捷，这里将实现过程讲一下。

准备

建议在谷歌浏览器上测试

• 熟悉HTML，Canvas，JavaScript知识即可

录制视频

部分浏览器上可以使用MediaRecorder类，来录制视频，如下代码，检查是否支持

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

从document中找到的canvas标签元素，画布canvas传给createRecorder()方法中，代码如下

第一种，录制成默认视频的方法，代码如下

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直接播放

创建一个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"类型，使用其它编码视频录制可能会出现转码出错或兼容问题