ZDEV-XXR/make-videos-with-Remotion

Mit Remotion Videos erstellen

Erstelle ein Video mit Remotion, wobei ein neues Projekt initialisiert, React-Komponenten für die Szenen geschrieben und das finale Video generiert wird. Verwende dies, wenn der Nutzer ein animiertes oder datengesteuertes Video benötigt.

Voraussetzungen

• Node.js und npm müssen installiert sein.
• Der Agent hat Lese-/Schreibzugriff auf das Dateisystem.
• Der Nutzer hat die Erstellung eines Remotion-Projekts autorisiert.

Schritte

1. Projekt verstehen

Wenn der Nutzer ein Video beschreibt, extrahiere die Schlüsselanforderungen:

• Inhalt des Videos (Text, Elemente, Animationen)
• Dauer (falls angegeben)
• Ausgabeformat (Standard ist MP4)
• Komplexität (einfache Animation, mehrere Szenen usw.)

Kläre bei Unklarheiten, bevor du fortfährst.

2. Projekt initialisieren

Führe den Befehl zum Erstellen eines neuen Remotion-Projekts aus:

npm init video

Wähle die Standardvorlage "JavaScript" (oder "TypeScript", wenn vom Nutzer gewünscht). Akzeptiere die Standardeinstellungen für das Projekt-Setup.

3. Ansichtskomponente definieren

Standardmäßig verwendet Remotion src/Root.js (oder src/Root.ts) als Einstiegspunkt. Ersetze deren Inhalt durch eine Komponente, die die beschriebenen Szenen rendert.

Wenn mehrere Szenen benötigt werden:

• Erstelle separate Komponentendateien im Verzeichnis src/ (z.B. src/MyScene.js).
• Importiere sie in Root.js und kombiniere sie mit <Sequence>.

Beispiel:

import { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig } from 'remotion';

// Beispiel-Titelsequenz
const Title: React.FC<{ text: string }> = ({ text }) => {
  const frame = useCurrentFrame();
  const opacity = Math.min(frame / 30, 1);
  return (
    <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: '#1a1a2e' }}>
      <h1 style={{ color: 'white', fontSize: 60, opacity }}>{text}</h1>
    </AbsoluteFill>
  );
};

export const MyVideo: React.FC = () => {
  return (
    <>
      <Sequence from={0} durationInFrames={90}>
        <Title text="Willkommen zu meinem Video" />
      </Sequence>
    </>
  );
};

4. Komposition registrieren

Öffne src/index.js (oder src/index.ts) und registriere eine Komposition mit der Dauer (in Frames), Auflösung und FPS:

import { Composition } from 'remotion';
import { MyVideo } from './Root';

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="MyVideo"
      component={MyVideo}
      durationInFrames={150} /* z.B. 5 Sekunden bei 30fps */
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

5. Video rendern

Führe den folgenden Befehl aus, um das endgültige Video zu generieren:

npx remotion render src/index.js MyVideo out/myvideo.mp4

Dies erstellt eine out/myvideo.mp4-Datei.

6. Ausgabe validieren

Überprüfe, ob die Ausgabedatei existiert, und gib deren Pfad an den Nutzer aus.

Fehlerbehandlung

• Abhängigkeiten fehlen: Führe npm install oder npm install remotion @remotion/cli aus.
• Build-Fehler: Überprüfe die Konsolenausgabe auf Syntaxfehler oder fehlende Importe.
• Render-Fehler: Stelle sicher, dass der Kompositions-ID-String mit dem in src/index.js definierten übereinstimmt.

Notizen

• Die Fähigkeit erzeugt nur Planungsartefakte (Code und Konfiguration) für das Video; die eigentliche Ausführung des Renderbefehls ist Teil der Implementierung.
• Warte nach jedem Schritt auf eine Bestätigung des Nutzers, wenn Fehler auftreten, bevor du fortfährst.