WebAssembly dans le traitement vidéo : Optimisation des performances et mise en pratique

Présentation de WebAssembly

WebAssembly (abrégé WASM) est un langage d'assemblage de bas niveau exécutable dans les navigateurs modernes, avec des performances d'exécution proches du code natif. En compilant des langages tels que C/C++/Rust en WASM, les développeurs peuvent exécuter des tâches de calcul intensif hautes performances dans le navigateur. Le traitement vidéo est l'un des scénarios d'application les plus importants.

Avantages clés de WebAssembly

• Haute performance : vitesse d'exécution proche du code natif, généralement 10 à 30 fois plus rapide que JavaScript
• Multiplateforme : compilation unique, exécution partout, compatible avec tous les navigateurs modernes
• Sécurité : exécution dans un environnement bac à sable, respect de la politique de même origine du navigateur
• Compact : format binaire, petite taille, chargement rapide
• Interopérabilité avec JS : appel transparent avec JavaScript, mémoire partagée

Scénarios d'application du traitement vidéo

WebAssembly trouve de nombreux cas d'application dans le domaine du traitement vidéo, en particulier dans les scénarios nécessitant la protection de la vie privée des utilisateurs et la réduction de la charge serveur :

1. Conversion de format vidéo

La conversion de format vidéo s'effectue côté navigateur : l'utilisateur n'a pas besoin de télécharger la vidéo sur le serveur, ce qui protège la vie privée et économise la bande passante et les coûts serveur. Prend en charge la conversion entre de nombreux formats tels que MP4, WebM, AVI, MKV, etc.

2. Découpage et montage vidéo

Des opérations simples de découpage, coupe, assemblage, rotation de vidéo peuvent être effectuées côté navigateur. Associé à l'API WebCodecs et à l'API Canvas, on peut créer des outils de montage vidéo en ligne légers.

3. Filtres et effets vidéo

Filtres vidéo en temps réel, embellissement, superposition d'effets, etc. On peut porter le système de filtres FFmpeg sur WASM, ou utiliser OpenGL ES via WebGL pour implémenter des effets vidéo accélérés par matériel.

4. Encodage et décodage vidéo

Décoder des vidéos aux formats non conventionnels dans le navigateur, ou réencoder des vidéos. Bien que les navigateurs modernes prennent déjà en charge de nombreux encodages vidéo, un encodage/décodage personnalisé reste nécessaire dans certains scénarios particuliers.

5. Traitement des métadonnées vidéo

Extraction rapide de méta-informations vidéo, génération de vignettes, extraction de sous-titres, etc. Ces opérations ne nécessitent généralement que l'analyse de l'en-tête du fichier vidéo, pas de décodage complet, ce qui est idéal pour être effectué côté front-end.

Données de comparaison des performances

Voici une comparaison des performances entre WebAssembly et JavaScript pur dans des tâches typiques de traitement vidéo (exemple avec une vidéo 1080p) :

• Décodage vidéo (H.264) : WASM est environ 15 à 25 fois plus rapide que JS
• Redimensionnement vidéo (vers 720p) : WASM est environ 10 à 20 fois plus rapide que JS
• Traitement de filtre (flou gaussien) : WASM est environ 8 à 15 fois plus rapide que JS
• Conversion de format (MP4 vers WebM) : WASM est environ 20 à 30 fois plus rapide que JS

Il faut noter que bien que les performances de WebAssembly soient proches du natif, elles restent environ 20 à 50 % plus lentes qu'un programme C++ local, principalement en raison du mécanisme de bac à sable du navigateur et du support limité de SIMD.

Utilisation de FFmpeg.js / ffmpeg.wasm

FFmpeg est l'outil de traitement vidéo open source le plus populaire. En le compilant en WebAssembly, nous pouvons utiliser directement les puissantes fonctionnalités de FFmpeg dans le navigateur. ffmpeg.wasm est actuellement le projet FFmpeg WASM le plus mature.

Prise en main rapide

// Importer ffmpeg.wasm
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

const ffmpeg = createFFmpeg({ log: true });

async function initFFmpeg() {
    await ffmpeg.load();
}

async function convertVideo(inputFile) {
    // Écrire le fichier dans le système de fichiers virtuel FFmpeg
    ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(inputFile));
    
    // Exécuter la commande FFmpeg
    await ffmpeg.run('-i', 'input.mp4', '-c:v', 'libvpx', '-crf', '30', 'output.webm');
    
    // Lire le fichier de sortie
    const data = ffmpeg.FS('readFile', 'output.webm');
    
    // Créer un lien de téléchargement
    const url = URL.createObjectURL(
        new Blob([data.buffer], { type: 'video/webm' })
    );
    
    return url;
}

Extraire une vignette vidéo

async function extractThumbnail(videoFile, time = '00:00:01') {
    ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(videoFile));
    
    await ffmpeg.run(
        '-i', 'input.mp4',
        '-ss', time,
        '-vframes', '1',
        '-s', '320x180',
        'thumb.jpg'
    );
    
    const data = ffmpeg.FS('readFile', 'thumb.jpg');
    return URL.createObjectURL(
        new Blob([data.buffer], { type: 'image/jpeg' })
    );
}

Vidéo vers GIF

async function videoToGif(videoFile) {
    ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(videoFile));
    
    await ffmpeg.run(
        '-i', 'input.mp4',
        '-t', '5',
        '-vf', 'fps=10,scale=320:-1',
        'output.gif'
    );
    
    const data = ffmpeg.FS('readFile', 'output.gif');
    return URL.createObjectURL(
        new Blob([data.buffer], { type: 'image/gif' })
    );
}

Accélération de l'encodage et du décodage

Bien que ffmpeg.wasm soit puissant, les performances de l'encodage/décodage purement logiciel restent limitées. Dans les applications pratiques, on peut combiner les capacités natives du navigateur pour améliorer les performances :

API WebCodecs

L'API WebCodecs est une API d'encodage/décodage audio-vidéo bas niveau fournie par le navigateur, qui permet d'accéder directement aux codecs matériels. Pour les formats d'encodage courants (H.264, VP8, VP9, AV1), privilégiez WebCodecs, dont les performances sont bien supérieures à l'encodage/décodage logiciel WASM.

// Décoder des trames vidéo avec WebCodecs
const decoder = new VideoDecoder({
    output: (frame) => {
        // Traiter la trame vidéo décodée
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        ctx.drawImage(frame, 0, 0);
        frame.close();
    },
    error: (e) => console.error(e)
});

decoder.configure({
    codec: 'avc1.42001E',
    codedWidth: 1920,
    codedHeight: 1080
});

// Décoder une trame
decoder.decode(new EncodedVideoChunk({
    type: 'key',
    timestamp: 0,
    data: chunkData
}));

Solution hybride

La bonne pratique consiste à adopter une solution hybride : utiliser WASM pour l'analyse de format et les encodages non conventionnels, WebCodecs pour l'encodage/décodage des encodages grand public, et WebGL/Canvas pour les effets vidéo et le rendu. Tirer le meilleur parti de chacun pour des performances optimales.

Implémentation d'effets de filtre

Les filtres vidéo sont un autre scénario d'application important de WebAssembly. Ils peuvent être implémentés de plusieurs manières :

Filtres FFmpeg

En utilisant le système de filtres FFmpeg, on peut implémenter des centaines d'effets de filtre vidéo, tels que flou, netteté, réglage des couleurs, superposition de filigranes, etc. L'avantage est la richesse des fonctionnalités, l'inconvénient est des performances moindres, inadaptées au traitement en temps réel.

WebGL Shader

Pour les filtres vidéo en temps réel, l'utilisation de WebGL Shader est un meilleur choix. La caractéristique de calcul parallèle du GPU rend les opérations au niveau pixel très efficaces, permettant des effets de filtre en temps réel à 60 fps.

Mixte Canvas + WASM

Pour des algorithmes complexes (tels que la reconnaissance faciale, la segmentation d'image), on peut d'abord utiliser Canvas pour obtenir les données de pixels, puis utiliser WASM pour le calcul, et enfin redessiner le résultat sur Canvas.

Précautions de développement

1. Optimisation de la taille des fichiers

Les fichiers FFmpeg WASM sont généralement volumineux (plusieurs dizaines de MB), ce qui peut affecter la vitesse de chargement de la page. Nous recommandons :

• Ne compiler que les codecs et modules fonctionnels nécessaires, éliminer les parties inutiles
• Utiliser la compression gzip/brotli, le volume de transfert réel peut être réduit de 60 à 70 %
• Chargement paresseux : charger le module WASM uniquement lorsque l'utilisateur en a réellement besoin
• Utiliser un CDN pour accélérer la distribution des fichiers WASM

2. Gestion de la mémoire

La mémoire WebAssembly doit être allouée à l'avance, et l'occupation mémoire sera élevée lors du traitement de vidéos haute définition :

• Définir raisonnablement la mémoire initiale et la mémoire maximale
• Libérer rapidement les fichiers et la mémoire qui ne sont plus nécessaires
• Pour le traitement de grandes vidéos, envisager un traitement par fragments pour éviter de charger l'intégralité du fichier d'un coup

3. Optimisation des performances

• Activer le support SIMD (nécessite la prise en charge du navigateur)
• Utiliser le multithreading (SharedArrayBuffer + pthread)
• Pour les fichiers volumineux, utiliser le traitement en flux plutôt que le chargement en une seule fois
• Privilégier les API natives du navigateur (WebCodecs, WebGL), WASM en complément

4. Gestion de la compatibilité

Bien que les navigateurs modernes prennent tous en charge WebAssembly, il faut rester attentif à :

• Détecter le support WASM, fournir une solution de repli
• SIMD et le multithreading ne sont pas pris en charge par tous les navigateurs, nécessitent une détection de fonctionnalités
• Dans les cas inter-domaines, configurer correctement les en-têtes CORS et COOP/COEP

5. Expérience utilisateur

• Afficher la progression du traitement pour que l'utilisateur sache combien de temps il reste à attendre
• Ne pas bloquer le thread principal pendant le traitement, on peut utiliser un Web Worker
• Fournir une fonction d'annulation
• Donner une estimation du temps avant le traitement des fichiers volumineux

Conclusion

WebAssembly ouvre de nouvelles portes au traitement vidéo côté navigateur, permettant d'effectuer efficacement des tâches qui nécessitaient auparavant un serveur, directement sur l'appareil de l'utilisateur. Des projets tels que ffmpeg.wasm permettent d'utiliser directement les puissantes fonctionnalités de FFmpeg dans le navigateur. Associés à des API natives telles que WebCodecs et WebGL, on peut créer des applications de traitement vidéo purement front-end aux performances excellentes.

Dans le développement pratique, il faut choisir la solution technique adaptée au scénario spécifique, exploiter pleinement les capacités natives du navigateur, et utiliser WASM là où les capacités natives ne suffisent pas. Parallèlement, prêter attention à la taille des fichiers, à la gestion de la mémoire et à l'expérience utilisateur, pour que l'application Web dispose de capacités de traitement vidéo proches du natif.

Vous voulez expérimenter le charme du traitement vidéo côté navigateur ? Essayez notre Outil M3U8 vers MP4 et notre Outil de compression vidéo, tous les traitements s'effectuent localement dans le navigateur, sécurisés et rapides.