Salut et bienvenue dans ce nouvel épisode du podcast de Code Garage. Je m'appelle L'école
à fond dans Bernard et aujourd'hui on va parler de comment générer des vidéos à partir de
code et à partir de technologie web. L'outil dont je vais vous parler aujourd'hui c'est un outil
que j'ai commencé à expérimenter il y a quelques années et là je me suis remis un petit peu plus
dedans et cet outil il s'appelle Remotion. Remotion c'est tout simplement une bibliothèque
basée sur React. Est-ce qu'on peut dire une bibliothèque je sais pas, c'est une suite d'outils
on va dire presque. C'est un seul outil mais il y a tellement de choses dedans que qu'on ne peut pas
l'assimiler simplement une bibliothèque mais en tout cas c'est basé sur React et ça permet de
réaliser des vidéos à partir de code JavaScript et ça va vous donner toute une galerie d'outils
pour créer et générer ces vidéos. Ça inclut des scènes, des animations, il y a tout un outil
de prévisualisation dans le navigateur directement donc vous pouvez jouer vos vidéos qui sont
générées à partir de code avant même de faire le rendu final mais vous pouvez aussi
voir à partir de quel moment commence telle scène, telle séquence, telle animation,
à partir de quand apparaît tel texte, tel image etc. Et ça se fait hyper hyper facilement. Vous
avez même un outil qui permet de créer un projet de base, vous pouvez faire un NPM in-it
vidéo et tout simplement ça va vous installer tout ce qu'il faut pour tout simplement commencer à
utiliser Remotion. Vous avez un projet d'exemple avec des petites animations et plusieurs séquences
rien que pour découvrir le fonctionnement. Moi j'ai été vraiment bluffé au départ parce que c'est
très très simple à utiliser. En gros le fonctionnement c'est que vous avez des séquences et tout l'ensemble
de votre vidéo est basé sur des index d'image puisque évidemment comme dans une vidéo chaque
image le rendu de la vidéo est fait image par image et donc on ne va pas parler en termes de temps
mais en termes d'image. Au départ on va pouvoir définir son ratio d'image par seconde et ensuite
tout va être basé là-dessus. Donc on va pouvoir dire j'ai ma séquence qui commence à l'image 0
et qui se termine à l'image 30 et bien ça veut dire que notre séquence elle fait tout simplement
une seconde après ça on peut le calculer dynamiquement très facilement mais ensuite on va pouvoir
et bien faire une application React classique c'est à dire que vous allez avoir du HTML, du JavaScript,
du CSS et tout ça va pouvoir être mis compilé dans une vidéo à la fin. Donc par exemple moi j'ai
fait un projet où j'assemble plusieurs petits morceaux de vidéo je prends trois secondes de
vidéo à chaque fois je les mets ensemble dans le fond d'une vidéo puis j'ai du texte qui apparaît
à l'écran toutes les trois secondes aussi donc chaque fois qu'une vidéo se change il y a un nouveau
morceau de texte qui s'affiche j'ai un son en fond ma voix que j'ai pris en train de parler et puis
j'ai ajouté une une musique de fond tout simplement et en fait tout ça on va pouvoir faire tout notre
montage comme on pourrait le faire dans un logiciel de montage classique mais directement dans du
code avec React alors on peut se demander ben pourquoi est ce qu'on le ferait dans du code et pas
dans un logiciel de montage l'avantage principal c'est justement de pouvoir générer et régénérer
éventuellement des vidéos à partir de simples données donc moi si je change l'url des vidéos
que j'ai utilisées puis que je change les textes simplement c'est comme changer un simple fichier de
Jason je clique sur faire le rendu et j'ai une nouvelle vidéo j'ai simplement mis 15 secondes à
régénérer une nouvelle vidéo et on peut même le faire de manière automatique typiquement quand
vous avez par exemple des comptes instagram ou des comptes réseaux sociaux qui publient des
résultats des résultats de match des résultats sportifs ou la météo ou des choses comme ça
et bien beaucoup utilisent cette néctologie là beaucoup utilisent remotion pour balancer même
parfois c'est simplement un call API qui va retourner des données et vous dans votre template
de vidéo que vous avez fait avec remotion et bien tout va s'enchaîner correctement va y avoir des
des des affichages conditionnels des animations des choses comme ça et donc honnêtement le
rendu le rendu est pas mieux que ce qu'on pourrait faire dans le logiciel de montage on peut tout faire
dans le logiciel de montage mais par contre le temps gagné entre générer une vidéo et 150
vidéos et bien c'est complètement complètement fou puisque et par on a on saute toute une étape
de modification manuelle alors évidemment certains logiciels vidéo permettent de faire un petit peu
de programmation à l'intérieur mais très honnêtement c'est quand même pas la même
accessibilité c'est beaucoup plus compliqué beaucoup moins user friendly qu'une simple application
réacte que vous allez pouvoir modifier donc il ya quand même quelques petites contraintes si vous
utilisez des animations css natives on va dire il y a des chances que votre rendu ne soit pas le bon
tout simplement parce que remotion parallélise le rendu d'image donc vous avez par exemple
quatre instances de remotion qui vont rendre et bien chacun une image donc quatre images en même temps
au lieu d'une ce qui permet d'accélérer le rendu mais par contre la contrainte c'est que les animations
css ne sont pas réellement synchronisées pas bien synchronisées et donc ça c'est une contrainte
navigateur on va dire et donc et bien votre vidéo va être parfois saccadée ou des choses comme ça je
sais qu'il ya des bibliothèques spécialement écrites pour emotion pour synchroniser justement
ces animations css je les ai pas encore testé donc je peux pas vraiment vous donner vous dire ce que
ça donne par contre il ya aussi plein plein plein de petits outils dans remotion pour simplement
faire des animations soi même avec avec des courbes des courbes quadratiques des choses
comme ça pour avoir des animations fluide et donc on va simplement se baser sur l'index de la
frame donc le numéro de l'image pour et bien simplement effectuer notre animation et avoir une
valeur de zoom une valeur de déplacement peu importe moi je vous conseille vraiment d'essayer
et ce qui m'a bluffé c'est que la première chose que j'ai voulu à faire que j'ai voulu faire
pardon avec ce nouvel outil c'était d'avoir un audiogramme donc tout simplement bah comme dans
un logiciel de montage vidéo vous avez et bien des courbes qui montent et qui descendent en fonction
d'un d'un audio d'une piste audio et ça ça se fait très honnêtement en quelques en quelques
lignes de code puisque remotion nous prémâche le travail c'est même déjà dans la doc ils ont
toute une section de la doc qui est dédiée à ça donc je l'ai fait littéralement je pense en
une minute et demi je vais vous donner évidemment un lien vers un exemple de vidéo que j'ai généré
moi entièrement avec remotion mais surtout là où je pense que ça devient très intéressant et
c'est aussi pour ça que je suis revenu en partie sur cet outil c'est qu'aujourd'hui avec ce qu'on
peut faire avec l'intelligence artificielle au niveau du multimédia donc image son vidéo et bien
ça risque de prendre une vraie grosse ampleur et je pense que c'est très intéressant de commencer
vraiment à s'y mettre maintenant moi j'ai fait des tests avec par exemple de la voix générée par
hey jen et des images générée avec mid journey ou d'autres pour arriver à faire des vidéos
quasi complètement en automatique on peut même générer du texte avec jadjp t etc on peut réellement
générer une vidéo alors on parle pas de vidéo comme serait un fil mais plutôt de vidéo de
contenu pour les réseaux sociaux des choses comme ça quasi entièrement générée par intelligence
artificielle et là pour le coup on parle même plus de 15 secondes de génération on parle juste du
temps de réponse de la pays et ensuite la vidéo génère toute seule donc ça peut être assez incroyable
évidemment essayer quand vous faites des choses comme ça d'y mettre votre patte votre
créativité vos idées mais par contre ça permet de faire des choses assez incroyables un petit cas
d'usage que moi j'utilise notamment sur sur code garage où ça va venir ça va apparaître très
bientôt sur le site ce sont des vidéos de de code où on voit du code se taper en temps réel et
c'est une vidéo et moi je n'ai absolument pas pris en pris en vidéo mon éditeur j'ai simplement
balancé un snippet de code a remotion et je l'ai mis dans un petit template réacte où j'ajoute
eh bien de la de la coloration syntaxique une petite animation pour que le texte se tape tout seul
et on a l'impression que c'est quelqu'un qui tape du code on peut on peut y voir plein plein plein
d'opportunités en tout cas moi je vous invite vraiment à essayer ce type parce que ça m'a bluffé
et je voulais vous en parler j'espère que cet épisode vous aura plu il a un petit peu changé
d'habitude puisque c'est rare que je vous présente des outils que je vous parle d'outils mais c'est
très récurrent que je parle de cet outil là qui pour moi était quand même très très connu aujourd'hui
et il est encore vraiment pas assez par rapport aux possibilités qu'il offre et la simplicité
d'utilisation donc c'est pour ça que je voulais vous faire cet épisode qui est un petit peu
différente d'habitude je vous donne rendez-vous la semaine prochaine pour un prochain épisode
du podcast ou directement sur code garage.fr pour retrouver tous nos articles de blog tous
les épuisotes de podcast et évidemment tous nos cours complets avec les quiz les exercices les
certificats de validation mais surtout pensez à mettre cinq étoiles au podcast pour aider au
référencement et qu'on rentre enfin dans ce top 10 des podcasts technologiques sur Spotify c'est
l'objectif de 2024 alors s'il vous plaît aidez nous et dernière chose si jamais vous avez des
idées de gens que vous avez envie que j'interview dans le podcast de code garage n'hésitez pas à les
mentionner soit me les envoyer en message privé sur LinkedIn Twitter peu importe ou les
mentionner directement dans les commentaires quand un épisode du podcast sort ça me permettra
de contacter et d'essayer d'arranger ça je vous donne rendez-vous la semaine prochaine ciao