Erste Schritte

1. Paket installieren

   npm

   npm i @capgo/capacitor-ffmpeg

   pnpm

   pnpm add @capgo/capacitor-ffmpeg

   yarn

   yarn add @capgo/capacitor-ffmpeg

   bun

   bun add @capgo/capacitor-ffmpeg

2. Mit nativen Projekten synchronisieren

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

Verwendung

Importieren Sie das Plugin und verwenden Sie es zur Neucodierung von Videos:

import { CapacitorFFmpeg } from '@capgo/capacitor-ffmpeg';

// Video mit benutzerdefinierten Einstellungen neu codieren
const processVideo = async () => {
  await CapacitorFFmpeg.reencodeVideo({
    inputPath: '/pfad/zur/eingabe/video.mp4',
    outputPath: '/pfad/zur/ausgabe/video.mp4',
    width: 1280,
    height: 720,
    bitrate: 2000000 // Optional: 2 Mbps
  });
};

// Plugin-Version abrufen
const checkVersion = async () => {
  const { version } = await CapacitorFFmpeg.getPluginVersion();
  console.log('FFmpeg-Plugin-Version:', version);
};

API-Referenz

reencodeVideo(options)

Codiert eine Videodatei mit angegebenen Abmessungen und Bitrate neu.

await CapacitorFFmpeg.reencodeVideo({
  inputPath: '/pfad/zur/eingabe.mp4',
  outputPath: '/pfad/zur/ausgabe.mp4',
  width: 1920,
  height: 1080,
  bitrate: 5000000 // Optional: 5 Mbps
});

Parameter:

• inputPath (string): Vollständiger Pfad zur Eingabevideodatei
• outputPath (string): Vollständiger Pfad, wo das Ausgabevideo gespeichert wird
• width (number): Zielbreite in Pixeln
• height (number): Zielhöhe in Pixeln
• bitrate (number, optional): Ziel-Bitrate in Bits pro Sekunde

getPluginVersion()

Ruft die native Capacitor-Plugin-Version ab.

const { version } = await CapacitorFFmpeg.getPluginVersion();

Vollständiges Beispiel

import { CapacitorFFmpeg } from '@capgo/capacitor-ffmpeg';
import { Filesystem, Directory } from '@capacitor/filesystem';

export class VideoProcessor {
  /**
   * Video komprimieren, um Dateigröße zu reduzieren
   */
  async compressVideo(inputPath: string, quality: 'low' | 'medium' | 'high') {
    const qualitySettings = {
      low: { width: 640, height: 360, bitrate: 500000 },
      medium: { width: 1280, height: 720, bitrate: 2000000 },
      high: { width: 1920, height: 1080, bitrate: 5000000 }
    };

    const settings = qualitySettings[quality];
    const outputPath = inputPath.replace('.mp4', `_${quality}.mp4`);

    try {
      await CapacitorFFmpeg.reencodeVideo({
        inputPath,
        outputPath,
        width: settings.width,
        height: settings.height,
        bitrate: settings.bitrate
      });

      console.log(`Video auf ${quality}-Qualität komprimiert:`, outputPath);
      return outputPath;
    } catch (error) {
      console.error('Videokomprimierung fehlgeschlagen:', error);
      throw error;
    }
  }

  /**
   * Video auf bestimmte Abmessungen skalieren
   */
  async resizeVideo(
    inputPath: string,
    width: number,
    height: number
  ): Promise<string> {
    const outputPath = inputPath.replace('.mp4', '_resized.mp4');

    await CapacitorFFmpeg.reencodeVideo({
      inputPath,
      outputPath,
      width,
      height
    });

    return outputPath;
  }

  /**
   * Miniaturansicht-Qualität eines Videos erstellen
   */
  async createThumbnailVideo(inputPath: string): Promise<string> {
    return this.compressVideo(inputPath, 'low');
  }

  /**
   * Mehrere Videos stapelweise verarbeiten
   */
  async processMultipleVideos(
    videoPaths: string[],
    width: number,
    height: number,
    bitrate?: number
  ): Promise<string[]> {
    const outputPaths: string[] = [];

    for (const inputPath of videoPaths) {
      const outputPath = inputPath.replace('.mp4', '_processed.mp4');

      try {
        await CapacitorFFmpeg.reencodeVideo({
          inputPath,
          outputPath,
          width,
          height,
          bitrate
        });

        outputPaths.push(outputPath);
      } catch (error) {
        console.error(`Verarbeitung von ${inputPath} fehlgeschlagen:`, error);
      }
    }

    return outputPaths;
  }
}

Best Practices

1. Geeignete Bitraten verwenden Wählen Sie die Bitrate basierend auf Auflösung und Anwendungsfall:

   // Mobiles Teilen (niedrige Bandbreite)
   const lowQuality = { width: 640, height: 360, bitrate: 500000 };
   
   // Standardqualität
   const standardQuality = { width: 1280, height: 720, bitrate: 2000000 };
   
   // Hohe Qualität
   const highQuality = { width: 1920, height: 1080, bitrate: 5000000 };

2. Seitenverhältnis beibehalten Berechnen Sie Abmessungen, um das Seitenverhältnis zu erhalten:

   function calculateDimensions(originalWidth: number, originalHeight: number, targetWidth: number) {
     const aspectRatio = originalWidth / originalHeight;
     return {
       width: targetWidth,
       height: Math.round(targetWidth / aspectRatio)
     };
   }

3. Dateipfade korrekt handhaben Verwenden Sie Capacitor Filesystem für plattformübergreifende Pfadbehandlung:

   import { Filesystem, Directory } from '@capacitor/filesystem';
   
   const inputPath = await Filesystem.getUri({
     directory: Directory.Documents,
     path: 'input.mp4'
   });

4. Fortschritt für Benutzer anzeigen Videoverarbeitung kann langsam sein - informieren Sie Benutzer:

   async function processWithProgress(inputPath: string) {
     // Ladeindikator anzeigen
     showLoading('Video wird verarbeitet...');
   
     try {
       await CapacitorFFmpeg.reencodeVideo({
         inputPath,
         outputPath: '/pfad/zur/ausgabe.mp4',
         width: 1280,
         height: 720
       });
   
       showSuccess('Video erfolgreich verarbeitet!');
     } catch (error) {
       showError('Videoverarbeitung fehlgeschlagen');
     } finally {
       hideLoading();
     }
   }

5. Temporäre Dateien aufräumen Entfernen Sie Zwischendateien, um Speicherplatz zu sparen:

   async function processAndCleanup(inputPath: string) {
     const outputPath = inputPath.replace('.mp4', '_output.mp4');
   
     await CapacitorFFmpeg.reencodeVideo({
       inputPath,
       outputPath,
       width: 1280,
       height: 720
     });
   
     // Original entfernen, wenn nicht mehr benötigt
     await Filesystem.deleteFile({ path: inputPath });
   
     return outputPath;
   }

Plattformhinweise

iOS

• Erfordert iOS 11.0+
• Große Videoverarbeitung kann Hintergrund-Task-Berechtigungen erfordern
• Verwendet natives iOS VideoToolbox für Hardwarebeschleunigung

Android

• Erfordert Android 5.0 (API 21)+
• Hardwarebeschleunigung variiert je nach Gerät
• Kann WRITE_EXTERNAL_STORAGE-Berechtigung für Dateizugriff erfordern

Web

• Nicht auf Web-Plattform unterstützt

Leistungstipps

1. Niedrigere Auflösung für schnellere Verarbeitung: Kleinere Abmessungen = schnellere Codierung
2. Hardwarebeschleunigung verwenden: Lassen Sie die native Plattform die Codierung optimieren
3. Im Hintergrund verarbeiten: Blockieren Sie nicht die UI während der Videoverarbeitung
4. Speicherverbrauch überwachen: Große Videos können erheblichen Speicher verbrauchen
5. Auf echten Geräten testen: Emulatoren spiegeln möglicherweise nicht die tatsächliche Leistung wider