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。
- 作者期待在解决现有问题后将新编辑器投入生产。
❓
延伸问答
这个视频编辑器使用了哪些技术栈？
视频编辑器使用了Svelte 5和Pixi.js等技术。
在构建视频编辑器时遇到了哪些主要挑战？
主要挑战包括同步视频和音频与时间线、处理文本渲染等。
作者是如何处理文本渲染问题的？
作者创建了SVGGenerator类，使用CSS和GSAP的TextSplitter来处理文本渲染。
为什么作者决定将Pixi.js从8降级到7？
因为Pixi 7的“遗留”版本支持2D画布，渲染速度更快。
视频编辑器的后端是如何处理渲染请求的？
后端使用Express和BullMQ处理渲染请求，并使用Playwright/Puppeteer进行视频帧处理。
作者对新视频编辑器的未来有什么计划？
作者期待在解决现有问题后将新编辑器投入生产。
➡️
