DEV Community
·
作为独立开发者构建 TypeScript 视频编辑器
💡
原文英文，约1900词，阅读约需7分钟。
📝
内容提要
作者在经历四年的SaaS开发后，重建了一个简单的视频编辑器，使用Svelte 5和Pixi.js等技术。该编辑器通过同步视频和音频元素、处理文本渲染等功能，解决了多个技术挑战。尽管存在性能问题，作者仍在持续优化，期待投入生产。
🎯
关键要点
-
作者在经历四年的SaaS开发后，重建了一个简单的视频编辑器。
-
视频编辑器使用Svelte 5和Pixi.js等技术，解决了多个技术挑战。
-
编辑器通过同步视频和音频元素、处理文本渲染等功能来实现。
-
使用GSAP进行时间线管理和复杂动画。
-
在构建视频编辑器时，面临同步视频/音频与时间线的挑战。
-
文本渲染比想象中复杂，使用CSS和GSAP的TextSplitter进行处理。
-
创建了SVGGenerator类来解决文本渲染问题，支持表情符号和自定义字体。
-
采用组合而非继承的方式重构组件，简化了组件的生命周期管理。
-
后端使用Express和BullMQ处理渲染请求，使用Playwright/Puppeteer进行视频帧处理。
-
渲染过程中遇到性能问题，决定从Pixi 8降级到Pixi 7以提高速度。
-
项目的其他部分包括使用MongoDB存储场景数据，前端使用SvelteKit和GraphQL。
-
作者期待在解决现有问题后将新编辑器投入生产。
➡️
