这段代码可以将Canvas录制为webm视频文件

2020年6月我做了一个给程序员专用的虚拟鼓励师插件叫“Rainbow Fart Waifu”，VSCode和HBuilderX的插件市场里都可以搜到。

总之就是让没有妹子陪伴的程序员朋友们写代码时不孤单...

这个插件获得了HBuilderX插件开发大赛的二等奖，据很多用户朋友们说，这是个值得特等奖的插件！

上周对这个插件又进行了一个小更新，可以一键导出截图和导出一段五秒短视频。

其中导出五秒短视频正是看了 @十年踪迹 大佬的这一篇 【前端冷知识】如何将Canvas绘制过程转为视频 后才加入的。

这个API的使用非常简单，下面这段代码将录制到下载一气呵成

var canvas = document.getElementById("mycanvas");
var stream = canvas.captureStream();
var recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
console.log("开始录制");
const data = [];
recorder.ondataavailable = function (event) {
    if (event.data && event.data.size) {
        data.push(event.data);
    }
};
recorder.onstop = () => {
  //结束录制时下载视频
    const url = URL.createObjectURL(new Blob(data, { type: 'video/webm' }));
    var element = document.createElement('a');
    element.setAttribute('href', url);
    element.setAttribute('download', "");
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
};
//录制开始
recorder.start();
//5秒后录制结束
setTimeout(() => {
    recorder.stop();
    console.log("结束录制");
}, 5000);

录制完成后，浏览器会下载一个.webm格式的文件

你电脑里的视频播放器大概率无法直接播放这个格式的视频

但是不要慌，我们把它拖拽到浏览器里

在浏览器里的表现和播放一般视频无二

WebM格式介绍

WebM由Google提出，是一个开放、免费的媒体文件格式。WebM 影片格式其实是以 Matroska（即 MKV）容器格式为基础开发的新容器格式，里面包括了VP8影片轨和 Ogg Vorbis 音轨，其中Google将其拥有的VP8视频编码技术以类似BSD授权开源，Ogg Vorbis 本来就是开放格式。 WebM标准的网络视频更加偏向于开源并且是基于HTML5标准的，WebM 项目旨在为对每个人都开放的网络开发高质量、开放的视频格式，其重点是解决视频服务这一核心的网络用户体验。Google 说 WebM 的格式相当有效率，应该可以在 netbook、tablet、手持式装置等上面顺畅地使用。

所以，如果你录制的结果本就打算在浏览器中播放，那直接用webm格式就行了。如果非要生成其他格式，我们可以利用 ffmpeg的js版本 将其转换为mp4等...

不过我尝试了一下在使用这个WebAssembly版的ffmpeg，最终需要加载一个20mb以上的.wasm的模块，暂时还不是太适合在网站前端里用。如果是electron的话，可以直接用命令行ffmpeg，也没必要用这个js版。