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

NicolasBrondin/basic-react-video

An boilerplate project to start experimenting the remotion library to build videos using React ! - NicolasBrondin/basic-react-video

GitHubNicolasBrondin

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

Write videos in React | Remotion

Create MP4 motion graphics in React. Leverage CSS, SVG, WebGL and more technologies to render videos programmatically!

RemotionRemotion

J'espère que cet article vous aura été utile, et à bientôt sur le blog !

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !

Photo par Wahid Khene sur Unsplash