2020年6月，我为程序员制作了一个虚拟鼓励插件，名为“RainbowFartWaifu”，可以在VSCode和HBuilderX的插件市场找到。
其实就是为了帮助没有美女陪伴的程序员同事写代码的时候不再孤独……
该插件荣获HBuilderX插件开发大赛二等奖。 根据许多用户同事的说法html5视频录制，这个插件值得获得特别奖！
上周这个插件还有另一个小更新，可以一键导入截图和五秒短视频。
其中，五秒的短视频是在阅读了@六年踪迹的这篇文章【前端冷知识】如何将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电影轨道和OggVorbis音轨。 其中，谷歌以类似的BSD许可证开源了其VP8视频编码技术。 OggVorbis 原本是一种开放格式。 WebM 标准在线视频越来越开源并基于 HTML5 标准。 WebM项目致力于开发面向所有人开放的高质量、开放的互联网视频格式，重点解决视频服务的核心问题。 网络用户体验。 谷歌表示，WebM 格式非常高效，应该可以在上网本、平板电脑、手持设备等上顺利运行。
因此，如果您的录制结果打算在浏览器中播放，只需使用 webm 格式即可。 如果我们必须生成其他格式html5视频录制，我们可以使用js版本的ffmpeg将其转换为mp4等...
不过我尝试使用这个WebAssembly版本的ffmpeg，最后需要加载一个20多mb的.wasm模块，暂时不太适合在网站后端使用。 如果是Electron，可以直接使用命令行ffmpeg，不需要使用这个js版本。
