0:0-0:0
WebAV
AI video generation is becoming increasingly popular. As a frontend developer, it's worth learning about video editing and display functionality.
FFmpeg is a powerful video processing tool, but its API is quite complex with a steep learning curve and slow processing speed. I'll skip it for now.
WebCodecs is a new browser API for video processing with improving browser support. I learned a lot about video knowledge from former Bilibili employee Feng Hen's articles. However, when exploring mp4box + WebCodecs myself, I encountered many issues. After several attempts, I found that the WebAV SDK from this blog author was more suitable.
WebAV Notes
- Remember to await clip.ready - ready itself is a Promise that needs to be awaited. No need to execute ready()
- clip.tick gets frame data, make sure to set a larger interval or it may return null
- The frame search logic isn't as intuitive as searching frame by frame, involving nearest match and caching. Repeated searches are also quite slow
- So using thumbnails is more suitable for displaying frame images (uses async processing)
- For video cutting, there's only split to divide into two parts. Could consider contributing code for start-end cutting
- clip has no output design, need to use
Combinatorfor output - Default Combinator output files are quite large, need to configure the bitrate. Currently 3e6 seems suitable (default is 5e6)
- For codec configuration, file size doesn't change much