如何将Canvas绘制过程转为视频_UTF_8

杰罗姆

如果我们用 Canvas 实现了一些动画效果，需要将它回放出来，很多人通常就是用录屏工具将屏幕内容录下来播放，很少有人知道，Canvas 可以直接通过现代浏览器支持的 Media Streams API 来转成视频。Canvas 对象支持 captureStream 方法，这个方法会返回一个 MediaStream 对象。然后，我们可以通过这个对象创建一个 MediaRecorder 来录屏。我们看一个简单的例子。录制视频首先我们写一个非常简单的 Canvas 动画效果，代码如下：constcanvas=document.querySelector('canvas');constctx=canvas.getContext('2d');const{width,height}=canvas;ctx.fillStyle='red';functiondraw(rotation=0){ctx.clearRect(0,0,1000,1000);ctx.save();ctx.translate(width/2,height/2);ctx.rotate(rotation);ctx.translate(-width/2,-height/2);ctx.beginPath();ctx.rect(200,200,200,200);ctx.fill();ctx.restore();}functionupdate(t){draw(t/500);requestAnimationFrame(update);}update(0);这个效果实现一个 200 宽高的矩形在画布中心旋转。接下来，我们将这个效果录制下来，假设我们录制 6 秒的视频，首先我们要获取 MediaStream 对象：conststream=canvas.captureStream();然后，我们创建一个 MediaRecorder：constrecorder=newMediaRecorder(stream,{mimeType:'video/webm'});接着我们可以注册 ondataavailable 事件，将数据记录下来：constdata=[];recorder.ondataavailable=function(event){if(event.data&event.data.size){data.push(event.data);}};在 onstop 事件里，我们通过 Blob 对象，将数据写入到页面上的 video 标签中。recorder.onstop=()=>{consturl=URL.createObjectURL(newBlob(data,{type:'video/webm'}));document.querySelector("#videoContainer").style.display="block";document.querySelector("video").src=url;};如果你不了解 Blob 对象，可在文章底部查看文档。最后，我们开始录制视频，并设定在 6 秒钟之后停止录制：recorder.start();setTimeout(()=>{recorder.stop();},6000);这样，就可以达到我们想要的录屏效果了。完整的代码在 https://codepen.io/akira-cn/pen/LYNVewy。与音频结合Canvas 录制好的视频，我们还可以将它和音频结合，方法是通过 ffmpeg 的 Web 端来合成。浏览器可以通过 WebAssembly 来集成 ffmpeg，具体的项目在 https://github.com/ffmpegwasm/ffmpeg.wasm，有兴趣的同学可以研究下。ffmpeg 的 Web API 用起来还比较复杂，奇舞团的同学开发了一个非常好用的封装，项目地址 https://github.com/welefen/canvas2video，可以在这里 https://codepen.io/akira-cn/pen/XWdbZbd看到具体的例子。总结在一些需要动态回放需求的场景里，我们可以用 Canvas 来实时创建视频然后回放，从而不必使用 JS 重新绘制，这是一种比较节省资源的方式。另外，Canvas 的录制功能对于一些在线教学的场景也很有价值，录屏软件消耗资源较多，而在 Web 上直接录制 Canvas，这可能是一种更简单便捷的方式。资料推荐Media Streams API：https://developer.mozilla.org/zh-CN/docs/Web/API/Media_Streams_APIBlob 对象：https://github.com/akira-cn/FE_You_dont_know/issues/12欢迎关注「字节前端ByteFE」简历投递联系邮箱「tech@bytedance.com」点击阅读原文，快来加入我们吧！