Comment transformer automatiquement des données en direct en vidéos partageables

• Mise en place d’un workflow web pour transformer des données en direct, mises à jour tous les quelques jours, en vidéos sociales sans intervention humaine à chaque montage
• La source de la vidéo n’est pas un fichier de montage, mais une page web cachée ; Playwright déplace le navigateur image par image, et ffmpeg assemble le tout en MP4 et en GIF
• Un court fichier storyboard.ts et une unique tête de lecture composent les chiffres du jour, les fondus, le point de départ de décembre 2024 et une séquence de croissance sur 18 mois en un clip d’environ 14 secondes
• Une GitHub Action planifiée détecte les changements de données, reconstruit et redéploie le site, génère 4 versions selon les combinaisons de formats et de langues, puis les publie sur le CDN CloudFront
• YouTube permet l’envoi de brouillons non répertoriés, mais Instagram ne prend en charge que la publication immédiate ; une étape de validation humaine est donc conservée pour la revue finale et l’édition des légendes

---

Utiliser une page web comme source vidéo

• La vidéo ne part pas d’un projet de montage séparé, mais d’une page dédiée cachée au sein du site web
• Cette page est conçue pour un format vertical 9:16, utilisé par Reels, Shorts et TikTok
• L’écran réutilise des éléments existants du site live
  • Titre
  • Grand chiffre institutionnel
  • Graphique animé
  • Carte nationale
  • Petite ligne de crédit
• Le système exploite les animations de timeline et les effets de mouvement du navigateur web, tandis qu’un ordinateur contrôle un navigateur headless invisible pour l’utilisateur
• Comme une page web classique, elle peut être ouverte directement dans le navigateur pour avancer et reculer, prévisualiser et déboguer
• Elle hérite telle quelle du framework multilingue du site, ce qui permet de capturer des vidéos pour chaque langue prise en charge
• L’asset bakery, le pipeline de données et le front-end de ce projet sont publiés en open source

storyboard.ts et tête de lecture

• Un seul fichier, storyboard.ts, définit le timing et les transformations de la vidéo comme la liste de plans d’un réalisateur
• La structure se compose de quelques beats nommés et de leurs durées
  • Maintenir le total du jour pendant 1,5 seconde
  • Fondu de 0,7 seconde
  • Maintenir le point de départ des données, en décembre 2024, pendant 1,5 seconde
  • Lire ensuite vers l’avant la séquence de croissance sur 18 mois
  • Revenir se stabiliser sur l’écran du jour
• Le résultat complet est un clip d’environ 14 secondes
• Le tracé du graphique, l’affichage des points sur la carte et l’incrémentation du compteur sont liés à une seule tête de lecture
• À un timestamp donné, la tête de lecture force tous les composants à rendre le même état, afin que les éléments à l’écran ne se désynchronisent pas

Une méthode de « cuisson » image par image

• Le fichier vidéo réel est produit en ouvrant la page web dans un navigateur headless et en contrôlant Chromium avec Playwright
• Au départ, l’idée était d’appuyer virtuellement sur Lecture puis de capturer l’écran, mais l’enregistrement en temps réel pouvait perdre des images ou provoquer des saccades
• Une même vidéo pouvait être fluide en local et se comporter différemment sur du matériel cloud ; lors des premiers essais, elle était même parfois lue anormalement vite
• Pour obtenir un résultat plus fiable, le système génère les images une par une, comme un flipbook, au lieu d’enregistrer en temps réel
  • Demander à la page « montre-moi l’apparence à 0,04 seconde »
  • Prendre une capture d’écran
  • Passer à 0,08 seconde et reprendre une capture
  • Répéter ce processus des centaines de fois
• Comme si l’on feuilletait manuellement une page figée, chaque image est capturée dans un état entièrement rendu
• Le résultat est déterministe et testable : deux exécutions doivent produire les mêmes images de manière vérifiable
• Doubler le nombre d’images double approximativement le temps de calcul et l’espace de stockage nécessaires au rendu

Détails pour stabiliser le rendu serveur

• La carte nationale utilise MapLibre GL JS, avec un rendu via du code WebGL qui s’attend généralement à disposer d’un GPU
• Comme le serveur n’a pas de GPU, Chromium est configuré pour utiliser le rendu logiciel
  • Plus lent qu’un véritable matériel graphique
  • Capable de s’exécuter avec une qualité similaire sur presque toutes les plateformes
• Chaque image est enregistrée en JPEG, et non en PNG
  • L’encodage PNG constitue la partie lente de la capture d’écran
  • Comme la vidéo finale paraît identique, le gain de vitesse se cumule sur plusieurs centaines d’images
• Quelques flags sont nécessaires pour que le navigateur headless fonctionne de manière stable sur un serveur bare server dans un conteneur, et tous les détails figurent dans le dépôt public
• Les centaines d’images générées sont assemblées avec ffmpeg en MP4 et en GIF en boucle

Automatisation basée sur GitHub Action

• L’ensemble du processus est relié à un pipeline de données automatisé exécuté par une GitHub Action planifiée
• Plusieurs fois par jour, il vérifie si les données ont changé
• Lorsqu’une nouvelle donnée arrive, la tâche effectue les opérations suivantes
  • Reconstruction du site
  • Redéploiement du site
  • Génération de 4 versions combinant formats carré/vertical et anglais/espagnol
  • Publication sur le CDN CloudFront
• Une page de téléchargement publique propose les dernières versions pour chaque langue prise en charge
• La dernière étape comprend l’envoi d’un brouillon sur YouTube et une notification pour la publication Instagram
  • Le script pour YouTube est publish-social-youtube.mjs
  • La notification de préparation de publication Instagram est notify-social-ready.mjs
  • Une intégration TikTok est également prévue

La frontière entre automatisation et contrôle éditorial

• Ce projet n’exclut pas l’automatisation complète, mais conserve une revue humaine avant la sortie de chaque vidéo
• Le contrôle éditorial des titres et des légendes, la revue finale et le choix du mode de publication restent confiés à une personne
• La publication automatique aveugle est évitée, car les données d’entrée peuvent être mauvaises ou le système peut produire un résultat incorrect
• YouTube permet de créer des brouillons vidéo non répertoriés via son API officielle
• L’API Instagram ne prenant en charge que la publication publique immédiate, le système crée un brouillon YouTube à chaque nouvelle donnée et envoie un e-mail demandant de préparer manuellement la publication Instagram

Produire des vidéos sociales avec du design web

• L’avantage de cette approche est que le design vidéo devient du design web
• Elle ne dépend pas d’After Effects, de réexportations manuelles, de chiffres obsolètes ni de producteurs web surchargés
• Un changement de couleur ou de libellé se résume à modifier une ligne, et il est pris en compte au rendu suivant
• L’ensemble du système repose sur quelques centaines de lignes de glue code autour d’outils existants
  • Pipeline de données
  • Navigateur headless
  • Cartes et graphiques déjà utilisés par le site
  • ffmpeg
• Le coût d’exécution est de l’ordre de quelques dollars par mois
• À titre de comparaison, le Missouri Vehicle Stops MCP semble actuellement coûter environ 50 dollars par mois
• L’asset bakery a un coût par utilisateur inférieur à celui du MCP, tandis que le MCP ressemble davantage à un outil offrant une interaction plus poussée avec les données

Stratégie et rôle du « shortcut »

• La stratégie consiste à répondre aux plateformes grand public avec des assets générés automatiquement et de qualité pour le partage, tout en prenant aussi en charge des outils de données modernes comme le MCP pour les utilisateurs très impliqués
• L’objectif n’est pas un cirque viral, ni un grand public indistinct, ni un produit unique adapté à tous
• Le shortcut n’est pas une tricherie, mais une façon d’exploiter des ressources déjà disponibles pour aller plus loin et moins s’épuiser
• En reliant les ressources existantes avec une GitHub Action, on n’a besoin de penser à la vidéo que lorsqu’on veut en produire une ou lorsque la situation l’exige vraiment