How to Scrub Huge Video Files in the Browser Without Blowing Up RAM

Vidstudio is a browser-based video editor that operates without any server-side support. Its most resource-demanding feature is the timeline, which allows users to load assets and scrub through them. Editing video is notoriously RAM-intensive, and the challenge lies in enabling users to preview files larger than their available RAM.

To prevent system crashes, the solution is to stream the file instead of loading it entirely into memory. However, this creates a new issue: the pipeline that generates each frame must now be executed for every requested time instant. The process begins by reading a chunk of the file at the requested position, decoding it, and displaying it on a two-dimensional canvas.

The user then needs to repeat this process whenever they move the ruler forward or backward in time. A naive implementation of this process is inefficient due to the I/O round trip required to fetch encoded chunks from disk, especially when the user scrubs nearby in the timeline. To address this, a sample cache is implemented to store encoded samples that can be retrieved without accessing the disk.

Encoded samples are more efficient to cache than full frames, as they cost significantly less RAM. Another optimization involves keeping some decoded frames in memory near the user's current position. This window must be kept narrow to avoid exceeding the available RAM budget. If the user seeks beyond the cached bounds, the pipeline must be restarted, which is an expensive operation that should only be performed when necessary.

To further improve efficiency, Vidstudio debounces seek operations and tracks the most recent decode operation, canceling any that started before it. This ensures that only the latest seek consumes resources on the user's device. While Vidstudio has implemented several optimizations to manage RAM consumption, it still needs to optimize the way it starts decoding from a specific position in the file, which requires a separate article.

Vidstudio offers a free online video editor that runs entirely in the browser, requiring no uploads or signups. It features a multi-track timeline, frame-accurate seek, and is powered by WebCodecs and FFmpeg WASM. Your files remain on your device throughout the editing process.