Pourquoi nous avons construit un outil de traitement vidéo basé sur navigateur

Lorsque nous avons entrepris de construire des outils vidéo pour le web, la sagesse conventionnelle était claire : le traitement vidéo appartient au serveur. Téléchargez le fichier, exécutez FFmpeg, renvoyez le résultat. Simple, éprouvé, et profondément limité par la bande passante, le coût et la confidentialité.

Nous pensions qu'il devait y avoir une meilleure solution. Il s'avère qu'il y en a une — et elle était là, dans nos navigateurs, depuis le début.

Le statu quo : ffmpeg.wasm

Ces dernières années, ffmpeg.wasm a été la solution de référence pour le traitement vidéo dans le navigateur. Il compile FFmpeg en WebAssembly, vous donnant accès à la boîte à outils complète de FFmpeg directement dans le navigateur. Cela fonctionne, mais cela présente des inconvénients majeurs :

• Taille de bundle importante : le cœur de ffmpeg.wasm est d'environ 25 Mo, avec des codecs spécifiques au format le poussant à plus de 30 Mo
• Initialisation lente : Chargement d'un module WebAssembly de 25 Mo avant le début de tout traitement
• Mono-threadé par défaut : Pas d'accès à l'accélération matérielle
• Contraintes de mémoire : Les limites de mémoire linéaire de WebAssembly (4 Go) créent des problèmes avec les fichiers volumineux
• Pas de décodage matériel : Décodage/encodage uniquement logiciel, absence totale d'accélération GPU

Dans nos benchmarks, une compression vidéo MP4 de 50 Mo à 70 % de qualité a pris 45 à 60 secondes avec ffmpeg.wasm. Pas terrible, mais pas génial non plus.

L'approche WebCodecs

L'API WebCodecs est une API de navigateur relativement nouvelle qui offre un accès direct aux codecs multimédias natifs du navigateur — les mêmes que ceux utilisés pour la lecture vidéo sur YouTube, Netflix et toutes les autres plateformes de streaming. Avantages clés :

• Accélération matérielle : Utilise le GPU pour le décodage et l'encodage lorsque disponible
• Zéro surcharge de bundle : Pas de WebAssembly, pas de binaires compilés — c'est une API de navigateur native
• Initialisation rapide : Disponible immédiatement, pas de temps de chargement
• Prise en charge complète des formats : H.264, H.265, VP8, VP9, AV1 — tout ce que votre navigateur prend en charge

Le hic ? WebCodecs est de bas niveau. Vous devez gérer le démultiplexage, l'encodage image par image, le formatage du conteneur, et tout le reste. C'est beaucoup de travail technique.

Voici mediabunny

Nous avons construit mediabunny — une bibliothèque légère qui enveloppe WebCodecs avec une API simple et ergonomique. Elle gère les parties complexes :

• Démultiplexage automatique : Détecte le format du conteneur et extrait les flux vidéo/audio
• Contrôle au niveau de l'image : Accédez aux images individuelles pour une édition précise
• Ré-encodage intelligent : Préréglages de qualité configurables avec progression en temps réel
• Streaming économe en mémoire : Traite les images par blocs, pas toutes en même temps

Comparaison des performances

3 à 5 fois plus rapide dans l'ensemble, avec une utilisation de la mémoire considérablement réduite et zéro surcharge de bundle.

Confidentialité : la fonctionnalité clé

La performance est excellente, mais voici ce qui distingue vraiment le traitement basé sur navigateur : la confidentialité par l'architecture.

Avec les outils basés sur serveur, vous confiez vos données à quelqu'un d'autre. Même les services bien intentionnés ont des serveurs qui peuvent être piratés, soumis à des assignations ou mal configurés. Avec VideosKit :

• Les fichiers ne quittent jamais votre appareil — il n'y a littéralement aucun point de terminaison de serveur pour les téléchargements de fichiers
• Pas de cookies, pas de suivi, pas d'analyse du contenu des fichiers
• Fonctionne hors ligne une fois chargé — traitez des vidéos dans un avion, sur un réseau restreint, n'importe où
• Adapté aux entreprises pour le contenu sensible — pas de problèmes de résidence des données ou de conformité

Les défis de développement

Construire cela n'a pas été sans défis :

Gestion des fichiers volumineux

Les navigateurs ne vous donnent pas un accès aléatoire aux fichiers. Nous utilisons l'API File + le streaming pour traiter les vidéos image par image sans charger le fichier entier en mémoire. Cela a nécessité une gestion minutieuse des tampons et un réglage de la collecte des déchets.

Compatibilité inter-navigateurs

WebCodecs est pris en charge par Chrome 94+, Edge 94+ et Safari 16.4+. Firefox a ajouté le support dans la version 130. Nous détectons les capacités et affichons un message pour les navigateurs non pris en charge.

Gestion de la mémoire

Les images vidéo sont volumineuses — une seule image 4K non compressée fait environ 33 Mo. Nous avons implémenté la mise en commun des images (frame pooling) et des pipelines de streaming pour maintenir l'utilisation de la mémoire sous contrôle, même avec du contenu 4K.

Rapports de progression

Les utilisateurs ont besoin de savoir combien de temps attendre. Nous avons construit un système de rappel qui rapporte la progression en fonction de la position de l'image, offrant des mises à jour précises en temps réel.

Open Source

VideosKit et mediabunny sont tous deux open source. Découvrez le code :

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

Les contributions, les problèmes et les commentaires sont les bienvenus.

L'avenir de la vidéo basée sur navigateur

WebCodecs est toujours en évolution. L'encodage AV1, le traitement alimenté par WebGPU et les extensions MediaSource améliorées rendront la vidéo basée sur navigateur encore plus puissante. Nous sommes ravis de repousser les limites du possible.

Si vous n'avez pas encore essayé VideosKit, visitez videoskit.cc. Compressez, convertissez, coupez ou inspectez une vidéo — tout cela dans votre navigateur, et tout cela gratuitement.