Éditeur vidéo: Challenge
Montage vidéo sur une timeline avec textes animés, rendu côté serveur et suivi de la progression en direct.
Dans cette étude de cas
Vue d'ensemble
Un éditeur vidéo développé avec Next.js et un service de rendu Express/Remotion. Les utilisateurs peuvent réordonner les clips, déplacer et redimensionner des textes animés sur plusieurs clips, zoomer sur la timeline et télécharger les vidéos MP4 tout en suivant le rendu via Server-Sent Events.
Résultats
- Une timeline avec réordonnancement des clips, zoom et textes déplaçables et redimensionnables avec alignement sur les limites des clips.
- Des textes animés couvrant plusieurs clips et un rendu côté serveur vers une vidéo MP4 téléchargeable.
- Un suivi du rendu en direct avec états de chargement, de réussite et d’erreur.
Démonstration vidéo
Fonctionnalités clés
- Réordonnancement des clips par glisser-déposer
- Textes animés sur plusieurs clips
- Déplacement et redimensionnement alignés sur les clips
- Zoom sur la timeline et interactions tactiles
- Rendu MP4 côté serveur
- Progression du rendu en direct et téléchargement
Architecture
Un monorepo sépare l’éditeur Next.js du service de rendu Express. Le frontend conserve l’ordre des clips et les plages des textes en unités de clips. Le service de rendu convertit leurs durées en séquences Remotion à 30 images par seconde, compose la vidéo et les textes animés, puis produit un MP4. Chaque rendu reçoit un identifiant, avec une progression transmise au client via SSE et un endpoint de téléchargement pour la vidéo terminée.
Choix techniques
Les principaux choix derrière l'implémentation.
- Stocker les positions des textes en unités de clips plutôt qu’en pixels pour conserver leur placement lors du réordonnancement des clips ou du zoom.
- Calculer la durée des textes en additionnant les durées de tous les clips couverts afin qu’ils restent visibles sur toute la plage sélectionnée.
- Utiliser Server-Sent Events pour transmettre la progression du rendu, avec une requête distincte pour démarrer le traitement et un endpoint pour télécharger le résultat.
- Utiliser DnD Kit pour trier les clips avec un seuil d’activation de 5px, tout en séparant les interactions de déplacement et de redimensionnement des textes pour éviter les conflits.
- Faire boucler les animations Lottie sur toute la durée du texte au lieu de les arrêter à leur dernière image.
Défis rencontrés
Garder la timeline de l’éditeur et la vidéo exportée synchronisées. Les textes couvrant plusieurs clips nécessitaient de convertir les durées cumulées en plages d’images, tandis que le tri des clips et le redimensionnement des textes demandaient des interactions distinctes. Il fallait aussi afficher la progression, la fin du rendu et les erreurs sans bloquer l’interface de montage.