Media tech · Digital Signage · Création de contenu en autonomie.
Un créateur de vidéos promotionnelles en quelques clics, pensé pour les non-techniciens.
Le contexte
Les utilisateurs de la plateforme de digital signage devaient créer leurs propres médias pour alimenter leurs écrans en boutique : vidéos promotionnelles sur des produits, affiches d'horaires d'ouverture, annonces visuelles. Jusqu'ici, ils passaient par Canva, After Effects ou des outils externes — des solutions pensées pour des graphistes, pas pour des gérants de magasin. Résultat : des contenus trop longs à produire, souvent mal formatés pour les écrans, avec une qualité visuelle inégale selon les magasins. Chaque mise à jour représentait un effort disproportionné pour des non-techniciens.
Ce que j'ai construit
Un outil de création vidéo guidé en 4 étapes, intégré directement dans la plateforme. L'utilisateur compose visuellement ses scènes sur un canvas (Fabric.js), choisit sa transition, et génère sa vidéo HD directement dans le navigateur via FFmpeg.wasm — sans logiciel, sans serveur de rendu, sans formation technique. Le livrable est une vidéo propre, optimisée pour le web et les écrans, dans le bon format (portrait, paysage, format borne), prête à être uploadée dans la plateforme et diffusée en boutique.
Mon Rôle
Conception de l'architecture complète de l'outil. Développement de l'éditeur canvas interactif (Fabric.js), du moteur de transition paramétrable, du pipeline de génération vidéo hybride (FFmpeg.wasm local ou API distante selon les capacités du device), de la persistance locale (IndexedDB) et de l'interface guidée (Nuxt 4 + Tailwind).
Architecture technique
| Couche | Technologie |
|---|---|
| Framework frontend | Nuxt 4 · Vue 3 · TypeScript |
| Éditeur canvas | Fabric.js (textes, images, formes, polices) |
| Génération vidéo | FFmpeg.wasm (encodage 100% navigateur) |
| State management | Pinia |
| Persistance locale | IndexedDB (sauvegarde auto du projet) |
| Style | Tailwind CSS |
| Stockage cloud | AWS S3 (dépôt des vidéos finales) |
| Formats de sortie | Portrait · Paysage · Format borne spécifique |
| CI/CD & déploiement | Docker · GitLab CI/CD · gestion des branches et MEP |
Défis techniques
Rendre la création vidéo accessible à des non-techniciens : UX guidée en 4 étapes claires, prévisualisation fidèle au rendu final, aucun jargon technique exposé.
Encodage HD sans serveur : FFmpeg.wasm déporte l'intégralité du rendu dans le navigateur via WebAssembly — zéro infrastructure de rendu, zéro coût variable.
Éditeur canvas pixel-perfect : Fabric.js permet une manipulation précise des éléments visuels avec une prévisualisation identique au résultat final.
Pipeline hybride intelligent : Si le device n'a pas assez de mémoire pour l'encodage local (fichiers lourds), le pipeline bascule automatiquement sur un encodage API distant.
Zéro perte de travail : IndexedDB sauvegarde en continu l'état du projet. Un rechargement accidentel ne coûte rien.
Cohérence visuelle garantie : Système de thèmes, palettes et polices centralisé pour que chaque vidéo respecte la charte graphique, quel que soit l'opérateur.
Pipeline GitLab CI/CD : Build Docker automatisé sur push, déploiement par branche. La mise en production est pilotée via les pipelines GitLab sans action manuelle sur les serveurs.
Problèmes résolus
| Avant | Après |
|---|---|
| Canva, After Effects : inaccessibles pour les gérants de boutique | Interface en 4 étapes guidées → n'importe qui crée sa vidéo sans formation |
| Médias mal formatés pour les écrans en magasin | Formats prédéfinis (portrait, paysage, borne) → vidéo prête à l'affichage immédiatement |
| Processus chronophage : des heures pour une simple mise à jour | Génération en quelques minutes → autonomie totale des équipes boutique |
| Coûts de sous-traitance à chaque changement de contenu | Production en autonomie → réduction drastique des dépendances externes |
| Incohérence visuelle entre les magasins | Templates et charte centralisés → identité uniforme sur tout le réseau |
Résultats
"Un gérant de boutique peut créer sa vidéo promotionnelle ou son affiche d'horaires en quelques minutes, sans logiciel dédié, sans formation, depuis son navigateur. Le livrable est directement uploadable dans la plateforme de digital signage. La qualité visuelle est uniforme sur l'ensemble du réseau. Les équipes sont autonomes, les coûts de production supprimés."
En chiffres
4 étapes guidées pour créer une vidéo
3 formats de sortie (Portrait, Paysage, Borne)
Encodage HD 100% navigateur via FFmpeg.wasm
Sauvegarde automatique du projet (IndexedDB)
Zéro logiciel requis, zéro formation
Pour vous
Vos équipes terrain créent leurs contenus sur des outils inadaptés ? Vous avez un réseau de boutiques dont chacune devrait pouvoir mettre à jour ses visuels d'affichage sans passer par un graphiste ? Ce type d'outil s'intègre dans toute plateforme de digital signage et s'applique à toute organisation qui produit des contenus visuels en série.