Comment nous avons développé l'Éclairage Studio de Streamfizz

Chez Streamfizz, nous croyons fermement à la philosophie des petits ajouts subtils d'UX qu'on perçoit à peine mais qui rendent l'expérience globalement meilleure. L'effet Éclairage Studio fait partie de ces détails qui, sans être remarqués consciemment par l'utilisateur, contribuent à créer une atmosphère plus immersive et cinématographique.

L'inspiration : créer un effet "cinéma"

L'idée était simple : reproduire l'effet visuel que l'on retrouve dans certaines plateformes de streaming populaires ou dans l'esprit des téléviseurs haut de gamme équipés de technologies d'éclairage d'ambiance. Ces systèmes projettent les couleurs dominantes de l'image vidéo sur les bords de l'écran, créant une extension visuelle naturelle qui plonge l'utilisateur dans l'ambiance du contenu.

Dans notre implémentation, la performance devait être notre priorité absolue. Nous ne pouvions nous permettre d'impacter l'expérience utilisateur, même marginalement.

Étape par étape

Cette section détaille l'implémentation technique de l'effet Éclairage Studio. Nous allons explorer le principe général en JavaScript/TypeScript, depuis la capture de l'image vidéo jusqu'au rendu final des couleurs d'ambiance. L'approche se décompose en trois étapes clés : la création d'un canvas pour capturer les frames, l'analyse des couleurs par zones, et l'application visuelle via CSS.

1. Création du canvas et capture depuis le player vidéo

La première étape consiste à capturer les frames de la vidéo en cours de lecture pour les analyser. Cette opération doit être particulièrement optimisée car elle s'exécute en continu.

Points techniques clés :

• Gestion du Shadow DOM : Les players vidéo modernes (HLS, DASH) encapsulent souvent l'élément <video> dans un shadow DOM. Notre code détecte et accède à l'élément vidéo réel.
• Optimisation drastique : Le facteur d'échelle de 0.1 signifie qu'une vidéo 1920×1080 sera analysée en 192×108 pixels, divisant le travail de traitement par 100.
• Canvas réutilisable : Le canvas n'est redimensionné que si nécessaire, évitant les allocations mémoire répétées.

2. Division de l'image en 12 sections

L'image est divisée en 12 zones stratégiquement placées sur le pourtour pour créer l'effet d'éclairage périphérique :

3. Extraction de la couleur dominante par zone

Pour chaque zone, la fonction getRegionColor parcourt tous les pixels de la région et accumule les valeurs RGB pour calculer la moyenne. Voici comment fonctionne concrètement l'extraction :

Principe concret : Chaque pixel de l'image est représenté par 4 valeurs dans le tableau imageData.data : Rouge, Vert, Bleu et Alpha (transparence). Pour une position (x,y), l'index du pixel rouge est (y × largeur + x) × 4. On additionne toutes les valeurs R, G, B des pixels de la zone, puis on divise par le nombre de pixels pour obtenir la couleur moyenne.

L'échantillonnage avec saut de pixels (skipPixels = 2) signifie qu'on analyse 1 pixel sur 4, ce qui divise le temps de calcul par 4 tout en conservant une précision visuelle suffisante pour l'effet d'ambiance.

Le défi performance : les Web Workers à la rescousse

Très rapidement, nous avons identifié un problème majeur : l'analyse des couleurs en temps réel sur le thread principal causait des micro-freezes, particulièrement sur les appareils moins puissants.

Contexte historique des Web Workers

Les Web Workers, introduits dans HTML5 vers 2009, ont révolutionné la façon de gérer le multithreading en JavaScript. Avant leur arrivée, JavaScript était strictement mono-thread, ce qui signifiait que toute opération coûteuse bloquait entièrement l'interface utilisateur. Les Web Workers ont ouvert la voie à l'exécution parallèle en créant des threads de fond isolés.

Cette technologie s'avère particulièrement précieuse pour les opérations de traitement d'image comme notre analyse de couleurs, où des milliers de pixels doivent être traités rapidement sans impacter la fluidité de l'interface.

Principe des Web Workers

Les Web Workers permettent d'exécuter du JavaScript en parallèle du thread principal, sans bloquer l'interface utilisateur. C'est l'équivalent du multithreading en JavaScript : le code s'exécute dans un contexte isolé et communique avec le thread principal via un système de messages.

Migration vers le Web Worker

Nous avons déplacé toute la logique d'analyse des couleurs dans un Web Worker dédié. Le thread principal se contente de :

1. Capturer la frame vidéo sur un canvas réduit (opération rapide)
2. Envoyer les données image au worker via postMessage
3. Recevoir les couleurs calculées de manière asynchrone
4. Appliquer les styles CSS aux éléments d'interface

Cette architecture nous permet de maintenir des performances fluides sur l'interface utilisateur tout en analysant les couleurs à 20 FPS (une frame toutes les 50ms), un compromis optimal entre fluidité visuelle et performance.

L'habillage visuel : CSS et effets

Une fois les couleurs extraites, il ne restait plus qu'à créer l'effet visuel. Bien que nous analysions 12 zones distinctes, nous avons opté pour 4 blocs CSS qui utilisent des gradients pour interpoler entre les couleurs adjacentes :

Les styles CSS créent l'effet de diffusion lumineuse en utilisant les 12 zones de couleur dans des gradients fluides :

Le blur(80px) crée l'effet de diffusion lumineuse, tandis que saturate(150%) intensifie les couleurs pour un rendu plus saisissant. L'opacité adaptative selon le thème (sombre/clair) assure une intégration harmonieuse.

Exemples

Voici l'exemple de l'éclairage studio sans le filter css pour mettre en évidence la logique.

Et voici avec le filter css appliqué

Résultat : l'immersion subtile

Le système fonctionne de manière transparente : analysant les miniatures lors du chargement, puis basculant vers l'analyse temps réel dès que la lecture commence. L'utilisateur bénéficie d'un halo coloré qui s'adapte naturellement au contenu, sans jamais percevoir l'impact sur les performances.

Les 12 zones de couleur créent des transitions fluides qui épousent parfaitement les changements d'ambiance du contenu vidéo. Que ce soit une scène d'action aux tons chauds ou un paysage nocturne aux teintes froides, l'Éclairage Studio s'adapte en temps réel pour renforcer l'immersion.

Cette approche illustre parfaitement notre philosophie produit chez Streamfizz : des améliorations techniques mais qui contribuent à élever l'expérience globale. L'Éclairage Studio transforme subtilement chaque visionnage en moment plus cinématographique, sans que l'utilisateur ait à y penser.