前端JS将Canvas录制为视频文件

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);