Comment générer des vidéos avec React et Remotion

Vous avez peut-être déjà vu passer l'article dans lequel je vous explique comment "générer un pdf en NodeJS à partir d'une application web", mais aujourd'hui on saute d'un cran en générant directement une vidéo à partir d'une application React !

Remotion

Remotion est une bibliothèque basée sur React et permettant de réaliser des vidéos à partir de code Javascript, incluant la gestion de scènes, d'animations et intégrant même un visionneur directement dans le navigateur.

Pour créer un nouveau projet Remotion, c'est très simple, il vous suffit d'ouvrir votre invité de commandes et de taper :

npm init video

Vous aurez alors un projet d'exemple Remotion à disposition, avec des animations et plusieurs séquences pour découvrir le fonctionnement de la bibliothèque.

Je vous invite à aller lire la documentation officielle en parallèle de la création du projet, notamment pour les questions liées à FFMPEG.

Exemple

Si l'exemple fourni par Remotion est très complet, je voulais vous proposer une version la plus minimale possible d'une séquence pour que vous puissiez voir ce que l'on peut faire avec très peu de code :

import {Sequence, useCurrentFrame, useVideoConfig} from 'remotion';
export const HelloWorld: React.FC<{}> = () => {
  const frame = useCurrentFrame();
  const videoConfig = useVideoConfig();
  const str = 'console.log("Hello World.");'.substr(0,Math.round(frame/3));
  return (
    <Sequence
      from={0} 
      durationInFrames={videoConfig.durationInFrames}
    >
      <div style={{
        display: "flex", 
        flex: 1, 
        flexDirection: "column", 
        backgroundColor: 'white', 
        alignItems: "center", 
        justifyContent: "center", 
        textAlign: "center"
      }}>
      <p style={{fontSize: 60}}>{str}</p>
    </div>
    </Sequence>
  );
};

Le but de la séquence ci-dessus est uniquement d'afficher un texte lettre par lettre en plein milieu de l'écran (une lettre toutes les trois images) en utilisant le hook "useCurrentFrame()" fourni par Remotion et autour duquel s'articulent toutes les séquences.

Résultat

Le code étant très simple, le rendu de la vidéo l'est tout autant. Une fois que votre séquence fonctionne, vous pouvez l'exporter en utilisant la commande :

npm run build

Et voici le résultat !

Si le rendu est vraiment minimaliste, l'exploit d'arriver à utiliser la puissance du DOM et du moteur de rendu HTML/CSS est vraiment impressionnant et offre des perspective intéressantes sur le long terme !

Code source

Vous pouvez retrouver tout le code source de l'exemple directement sur GitHub à l'adresse : https://github.com/NicolasBrondin/basic-react-video

Et je vous invite surtout à consulter le site officiel pour plus d'informations :