I previously shared my frame extraction tool (videotojpg.com) here about a month ago. The feedback was great, but it taught me that purely WASM-based solutions often hit a performance wall with larger files.
So for VideoCompressors.com, I wanted to see how close we could get to "native performance" in a browser.
The Architecture (Dual-Engine):
1.The "Fast Lane" (WebCodecs + GPU): The app first attempts to use the WebCodecs API to access your device's hardware encoder.
The Challenge: WebCodecs only outputs raw encoded chunks. The hardest part was implementing the client-side muxing (remuxing these chunks back into a valid MP4 container) without breaking synchronization.
The Result: When active, it's ~10x faster than WASM and keeps your laptop cool.
2.The "Safety Net" (FFmpeg WASM): Since WebCodecs support is still fragmented (looking at you, older Safari versions), I implemented a seamless fallback to FFmpeg (WASM). It detects if hardware encoding fails or if the format isn't supported, and switches engines automatically.
Privacy: Zero server uploads. I'm a strong believer that simple utilities shouldn't require cloud processing.
Request for Feedback: I'm currently tuning the bitrate control for the GPU engine. If you try it out, I'd love to hear if the quality-to-size ratio feels right compared to desktop tools like Handbrake!
charlesding2024•1h ago
I previously shared my frame extraction tool (videotojpg.com) here about a month ago. The feedback was great, but it taught me that purely WASM-based solutions often hit a performance wall with larger files.
So for VideoCompressors.com, I wanted to see how close we could get to "native performance" in a browser.
The Architecture (Dual-Engine):
1.The "Fast Lane" (WebCodecs + GPU): The app first attempts to use the WebCodecs API to access your device's hardware encoder.
The Challenge: WebCodecs only outputs raw encoded chunks. The hardest part was implementing the client-side muxing (remuxing these chunks back into a valid MP4 container) without breaking synchronization.
The Result: When active, it's ~10x faster than WASM and keeps your laptop cool.
2.The "Safety Net" (FFmpeg WASM): Since WebCodecs support is still fragmented (looking at you, older Safari versions), I implemented a seamless fallback to FFmpeg (WASM). It detects if hardware encoding fails or if the format isn't supported, and switches engines automatically.
Privacy: Zero server uploads. I'm a strong believer that simple utilities shouldn't require cloud processing.
Request for Feedback: I'm currently tuning the bitrate control for the GPU engine. If you try it out, I'd love to hear if the quality-to-size ratio feels right compared to desktop tools like Handbrake!