Vous avez déjà essayé de faire du traitement vidéo dans le navigateur

Bienvenue en enfer ! Et dire que pendant 20 ans, la seule solution viable c’était de compiler FFmpeg en WebAssembly, attendre 10 secondes que 40 Mo de code se chargent, puis regarder votre RAM fondre comme neige au soleil.

Heureusement, MediaBunny débarque et compte bien changer les choses !

En effet, cette bibliothèque TypeScript vous permet de lire, écrire et convertir des fichiers vidéo et audio directement dans le navigateur. MP4, WebM, MKV, MP3, WAV, Ogg, FLAC, vous nommez simplement le format, et MediaBunny le gère. Et la bibliothèque ne pèse que 5 Ko en version minifiée. Ça semble peu mais en fait, au lieu d’essayer de porter un outil desktop vers le web, Vanilagy (le créateur) a construit MediaBunny from scratch pour exploiter ce que le navigateur savait déjà faire.

La clé, c’est donc l’API WebCodecs qui existe depuis Chrome 94 sorti en 2021, mais que presque personne n’utilise. Cette API donne accès direct à Javascript à l’accélération matérielle de votre GPU pour encoder et décoder la vidéo que ce soit du H.264, H.265, VP8, VP9 et tout ça en temps réel. Et MediaBunny se branche dessus et vous donne une interface propre pour manipuler vos médias.

Vous voulez extraire les métadonnées d’une vidéo MP4, convertir un WebM en MP4 ou encore extraire une piste audio d’une vidéo ? En 3 lignes de code c’est plié, et tout ça en local dans votre navigateur.

MediaBunny supporte plus de 25 codecs vidéo, audio et sous-titres. H.264, H.265, VP8, VP9, AV1 pour la vidéo. AAC, Opus, Vorbis, MP3, FLAC pour l’audio. WebVTT pour les sous-titres…etc.

Et l’outil étant pensé avec un design modulaire qui permet de faire du tree-shaking , vous pouvez embarquer uniquement le code dont vous avez besoin, ce qui allège encore plus le bouzin. MediaBunny est d’aillerus l’évolution technique de deux projets du même auteur : mp4-muxer et webm-muxer. Ces bibliothèques faisaient déjà du bon boulot pour écrire des vidéos MP4 et WebM côté client, mais MediaBunny va beaucoup plus loin en supportant la lecture, l’écriture et la conversion pour tous les formats courants.

Si ça vous chauffe, pour installer MediaBunny, c’est du classique :

npm install mediabunny

const input = new Input({
 source: new UrlSource('./bigbuckbunny.mp4'),
 formats: ALL_FORMATS, // .mp4, .webm, .wav, ...
});

const duration = await input.computeDuration();

const videoTrack = await input.getPrimaryVideoTrack();
const { displayWidth, displayHeight, rotation } = videoTrack;

const audioTrack = await input.getPrimaryAudioTrack();
const { sampleRate, numberOfChannels } = audioTrack;

// Get the frame halfway through the video
const sink = new VideoSampleSink(videoTrack);
const frame = await sink.getSample(duration / 2);

// Loop over all frames of the video
for await (const frame of sink.samples()) {
 // ...
}

Pendant que Burp Suite avale 500 Mo de RAM au démarrage, HTTP Breakout Proxy lui, tient dans un binaire de quelques Mo qui disparaît dès que vous fermez le terminal.

Alors HTTP Breakout Proxy c’est quoi ?

Hé bien les amis, c’est un proxy HTTP/HTTPS écrit en Go qui intercepte le trafic réseau en temps réel et vous propose une interface web pour analyser tout ce qui passe. Requêtes, réponses, headers, body, timing… Tout est capturé et affiché proprement dans votre navigateur.

Vous le lancez avec ./http-breakout-proxy, il écoute sur 127.0.0.1:8080, et vous ouvrez l’interface dans votre browser. Ensuite, si vous voulez débugger une API par exemple, vous lancez le proxy, vous configurez votre client HTTP pour passer par localhost:8080, et vous voyez tout passer en direct.

C’est vrai que Burp est devenu un monstre à tout faire avec scanner de vulnérabilités, fuzzer, crawler, extensions… Y’a aussi Charles Proxy que j’aime bien mais qui pèse dans les 100 Mo et nécessite une JVM complète. Et même mitmproxy , pourtant réputé léger, a accumulé tellement de fonctionnalités qu’il faut lire 50 pages de doc pour comprendre comment l’utiliser.

Avec HTTP Breakout Proxy, il y a moins de features c’est vrai mais ça va plus vite et c’est gratuit. Maintenant, au niveau technique, le projet utilise l’interception MITM classique. Vous installez le certificat racine fourni par le proxy, et il peut déchiffrer le trafic HTTPS qui passe par lui. Ensuite, l’interface web affiche tout en temps réel via Server-Sent Events. Vous avez du filtrage par regex, du color-coding configurable pour repérer visuellement les requêtes importantes, et même des charts Gantt pour visualiser le timing des connexions…etc.

Que demande le peuple ? Ah oui, y’a aussi l’export vers curl ou Python requests, ce qui est pratique quand vous voulez rejouer une requête dans un script. Et bien sûr la possibilité de mettre la capture en pause pour analyser tranquillement ce qui s’est passé.

Voilà, c’est minimaliste mais ça marche hyper bien et quand on est pas un pro de la sécurité, c’est bien d’avoir des outils de ce style pour explorer un truc vite fait. Et merci à Lorenper pour le partage !

A découvrir ici !