Image illustrant l'article : Revideo - Pour créer des vidéos avec du code

Revideo - Pour créer des vidéos avec du code

par Korben ✨ 2 min

Revideo, c’est une bibliothèque open-source qui permet de créer des vidéos époustouflantes en codant avec TypeScript ! Pas besoin d’être un pro de la réalisation ou du montage, quelques lignes de code suffisent pour obtenir un résultat bluffant !

S’inspirant des meilleures fonctionnalités de Motion Canvas (une lib pour créer des animations et des graphiques interactifs), Revideo y ajoute tout ce qu’il faut pour générer des vidéos professionnelles : support de l’audio, paramétrage avancé du rendu, synchronisation son/image, export au format MP4… Bref, c’est du lourd !

Pour commencer à utiliser cette alternative open-source à des outils propriétaires comme Remotion, rien de plus simple. Ouvrez votre terminal, et lancez la commande :

npm init @revideo@latest

Choisissez un dossier pour votre projet, et laissez la magie opérer ! Vous devriez voir apparaître un exemple de projet avec le code suivant :

import {Audio, Img, Video, makeScene2D} from '@revideo/2d';
import {all, chain, createRef, waitFor} from '@revideo/core';

export default makeScene2D(function* (view) {
 const logoRef = createRef<Img>();

 yield view.add(
 <>
 <Video
 src={'https://revideo-example-assets.s3.amazonaws.com/stars.mp4'}
 play={true}
 size={['100%', '100%']}
 />
 <Audio
 src={'https://revideo-example-assets.s3.amazonaws.com/chill-beat.mp3'}
 play={true}
 time={17.0}
 />
 </>
 );

 yield* waitFor(1);

 view.add(
 <Img
 width={'1%'}
 ref={logoRef}
 src={'https://revideo-example-assets.s3.amazonaws.com/revideo-logo-white.png'}
 />
 );

 yield* chain(
 all(logoRef().scale(40, 2), logoRef().rotation(360, 2)),
 logoRef().scale(60, 1)
 );
});

Pour compiler la vidéo, placez vous dans le dossier de votre projet et faites d’abord un

npm install

Puis un

npm start

Pour lancer l’interface accessible via http://localhost:9000. Ensuite, y’a plus qu’à cliquer sur le bouton render. Et tout cela dont la génération du rendu peut-être automatisé via l’API de Revideo.

C’est votre scène de base, avec une vidéo d’arrière-plan, un logo qui pivote et grossit, et une musique de fond. Pas mal pour un début, non ?

Revideo offre un univers infini de créativité pour vos vidéos, le tout piloté par du code TypeScript. À vous d’explorer les possibilités ! La documentation très complète vous guidera pas à pas.

A demain \o/ !

Cet article peut contenir des images générées à l'aide de l'IA - J'apporte le plus grand soin à chaque article, toutefois, si vous repérez une boulette, faites-moi signe !
Photo de Korben
Vous avez aimé cet article ?

Alors rejoignez ma communauté sur Patreon et accédez à des articles exclusifs, des tutos avancés et plein d'autres surprises que je réserve à mes soutiens. C'est grâce à vous que je peux continuer à partager ma passion depuis 20 ans !

Rejoindre l'aventure

Articles récents

Les métiers de la cybersécurité avec Guardia