电脑浏览器上是可以将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"类型，使用其它编码视频录制可能会出现转码出错或兼容问题
