DEV Community
·
使用 ffmpeg.wasm 从 React.js Canvas 动画导出 WebM/MP4 视频：面向 Upwork 客户的解决方案
内容提要
最近，我为一位Upwork客户解决了其基于React.js的HTML5 Canvas动画应用中导出WebM和MP4视频的问题。使用Konva.js库和多种工具后，遇到处理时间长和应用冻结的问题。最终，通过启用JavaScript SharedArrayBuffer API和使用ffmpeg.wasm的多线程选项，成功减少了运行时间，视频质量良好且文件小。
关键要点
-
为Upwork客户解决基于React.js的HTML5 Canvas动画应用中导出WebM和MP4视频的问题。
-
使用Konva.js库，并尝试多种工具（如canvas-record.js、CCapture.js、record-canvas.js、ffmpeg.wasm等）来实现解决方案。
-
遇到处理时间长和应用冻结的问题。
-
最终选择使用ffmpeg.wasm的多线程选项，并启用JavaScript SharedArrayBuffer API。
-
需要在服务器请求中设置‘Cross-Origin-Embedder-Policy'和'Cross-Origin-Opener-Policy'。
-
在本地环境中成功运行，但需要在启用HTTPS的服务器上才能使ffmpeg.wasm的多线程功能正常工作。
-
成功减少了浏览器中的运行时间，WebM视频导出瞬时，20秒动画大约需要1-1.5分钟。
-
节省了服务器请求，视频质量良好且文件较小。
延伸问答
如何从React.js Canvas动画导出WebM和MP4视频？
可以使用ffmpeg.wasm库结合Konva.js来导出WebM和MP4视频。
在导出视频时遇到哪些问题？
遇到的问题包括处理时间长和应用冻结。
如何解决ffmpeg.wasm的多线程问题？
需要启用JavaScript SharedArrayBuffer API，并设置相应的跨域策略。
使用ffmpeg.wasm导出视频的性能如何？
导出WebM视频瞬时，20秒动画大约需要1-1.5分钟。
在本地环境中如何运行ffmpeg.wasm？
可以在本地环境中运行，但需要在启用HTTPS的服务器上才能正常使用多线程功能。
导出的视频质量如何？
视频质量良好且文件较小。
