Perché Abbiamo Costruito uno Strumento di Elaborazione Video Basato su Browser

Quando abbiamo deciso di costruire strumenti video per il web, la saggezza convenzionale era chiara: l'elaborazione video appartiene al server. Carica il file, esegui FFmpeg, restituisci il risultato. Semplice, collaudato e profondamente limitato da larghezza di banda, costi e privacy.

Abbiamo pensato che dovesse esserci un modo migliore. Si scopre che c'è — ed è stato nei nostri browser per tutto il tempo.

Lo Status Quo: ffmpeg.wasm

Negli ultimi anni, ffmpeg.wasm è stata la soluzione di riferimento per l'elaborazione video in-browser. Compila FFmpeg in WebAssembly, dandoti accesso all'intero toolkit FFmpeg direttamente nel browser. Funziona, ma comporta significativi svantaggi:

• Grandi dimensioni del bundle: il core di ffmpeg.wasm è di circa 25MB, con codec specifici per formato che lo portano a oltre 30MB
• Inizializzazione lenta: Caricamento di un modulo WebAssembly da 25MB prima che inizi qualsiasi elaborazione
• Single-threaded per impostazione predefinita: Nessun accesso all'accelerazione hardware
• Vincoli di memoria: i limiti di memoria lineare di WebAssembly (4GB) creano problemi con file di grandi dimensioni
• Nessuna decodifica hardware: Decodifica/codifica solo software, manca completamente l'accelerazione GPU

Nei nostri benchmark, la compressione di un video MP4 da 50MB al 70% di qualità ha richiesto 45-60 secondi con ffmpeg.wasm. Non terribile, ma nemmeno eccezionale.

L'Approccio WebCodecs

La WebCodecs API è una API del browser relativamente nuova che fornisce accesso diretto ai codec multimediali nativi del browser — gli stessi utilizzati per la riproduzione video su YouTube, Netflix e ogni altra piattaforma di streaming. Vantaggi chiave:

• Accelerazione hardware: Utilizza la GPU per la decodifica e la codifica dove disponibile
• Zero overhead del bundle: Nessun WebAssembly, nessun binario compilato — è una API nativa del browser
• Inizializzazione veloce: Disponibile immediatamente, nessun tempo di caricamento
• Supporto completo dei formati: H.264, H.265, VP8, VP9, AV1 — qualunque cosa il tuo browser supporti

La fregatura? WebCodecs è di basso livello. Devi gestire il demuxing, la codifica frame per frame, la formattazione del contenitore e tutto il resto. È un bel po' di lavoro.

Ecco mediabunny

Abbiamo costruito mediabunny — una libreria leggera che avvolge WebCodecs con una API semplice ed ergonomica. Gestisce le parti complesse:

• Demuxing automatico: Rileva il formato del contenitore ed estrae i flussi video/audio
• Controllo a livello di frame: Accede ai singoli frame per un'editing preciso
• Ricodifica intelligente: Preset di qualità configurabili con progressi in tempo reale
• Streaming efficiente in termini di memoria: Elabora i frame a blocchi, non tutti in una volta

Confronto delle Prestazioni

3-5 volte più veloce su tutta la linea, con un utilizzo di memoria drasticamente inferiore e zero overhead del bundle.

Privacy: La Funzionalità Chiave

Le prestazioni sono ottime, ma ecco cosa distingue davvero l'elaborazione basata su browser: privacy per architettura.

Con gli strumenti basati su server, stai affidando i tuoi dati a qualcun altro. Anche i servizi ben intenzionati hanno server che possono essere violati, citati in giudizio o mal configurati. Con VideosKit:

• I file non lasciano mai il tuo dispositivo — non esiste letteralmente alcun endpoint server per il caricamento dei file
• Nessun cookie, nessun tracciamento, nessuna analisi del contenuto dei file
• Funziona offline una volta caricato — elabora video su un aereo, in una rete limitata, ovunque
• Adatto alle aziende per contenuti sensibili — nessuna preoccupazione per la residenza dei dati o la conformità

Le Sfide di Sviluppo

Costruire questo non è stato privo di sfide:

Gestione di File di Grandi Dimensioni

I browser non ti danno accesso casuale ai file. Usiamo la File API + streaming per elaborare i video frame per frame senza caricare l'intero file in memoria. Ciò ha richiesto un'attenta gestione del buffer e una messa a punto della garbage collection.

Compatibilità Cross-Browser

WebCodecs è supportato in Chrome 94+, Edge 94+ e Safari 16.4+. Firefox ha aggiunto il supporto nella versione 130. Rileviamo la capacità e, in caso di browser non supportati, forniamo un messaggio.

Gestione della Memoria

I frame video sono grandi — un singolo frame 4K è di circa 33MB non compresso. Abbiamo implementato il pooling dei frame e pipeline di streaming per mantenere l'utilizzo della memoria sotto controllo, anche con contenuti 4K.

Segnalazione dei Progressi

Gli utenti devono sapere quanto tempo attendere. Abbiamo costruito un sistema di callback che riporta i progressi in base alla posizione del frame, fornendo aggiornamenti accurati in tempo reale.

Open Source

VideosKit e mediabunny sono entrambi open source. Dai un'occhiata al codice:

• VideosKit: github.com/nicely-gg/video-tools
• mediabunny: github.com/nicely-gg/mediabunny

Contributi, problemi e feedback sono benvenuti.

Il Futuro del Video Basato su Browser

WebCodecs è ancora in evoluzione. La codifica AV1, l'elaborazione basata su WebGPU e le MediaSource Extensions migliorate renderanno il video basato su browser ancora più potente. Siamo entusiasti di spingere i confini di ciò che è possibile.

Se non hai ancora provato VideosKit, visita videoskit.cc. Comprimi, converti, taglia o ispeziona un video — tutto nel tuo browser, tutto gratuitamente.