使用 ffmpeg.wasm 从 React.js Canvas 动画导出 WebM/MP4 视频：面向 Upwork 客户的解决方案
💡
原文英文，约300词，阅读约需1分钟。
📝
内容提要
最近，我为一位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分钟。
- 节省了服务器请求，视频质量良好且文件较小。
➡️
