Erste Schritte mit Mux Player

1. Plugin installieren

   npm

   npm i @capgo/capacitor-mux-player

   pnpm

   pnpm add @capgo/capacitor-mux-player

   yarn

   yarn add @capgo/capacitor-mux-player

   bun

   bun add @capgo/capacitor-mux-player

2. Native Projekte synchronisieren

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

iOS-Vorbereitung

1. Öffnen Sie den Xcode-Workspace unter ios/App/.
2. Fügen Sie das Swift-Package https://github.com/muxinc/mux-player-swift zu Ihrem App-Ziel hinzu, damit das MuxPlayerSwift-Modul verfügbar ist.
3. Stellen Sie sicher, dass das Deployment Target iOS 15+ ist und erstellen Sie neu.

Android-Vorbereitung

Das Gradle-Modul wird mit den korrekten Repositories und Abhängigkeiten ausgeliefert. Wenn Sie einen benutzerdefinierten unternehmensinternen Proxy verwenden, erlauben Sie Anfragen an https://muxinc.jfrog.io/artifactory/default-maven-release-local.

Player starten

import { MuxPlayer } from '@capgo/capacitor-mux-player';

await MuxPlayer.play({
  playbackId: 'your-playback-id',
  environmentKey: 'your-mux-data-key',
  title: 'Launch Announcement',
  subtitle: 'Filmed live at Capgo HQ',
  poster: 'https://stream.example.com/poster.jpg',
});

Auf Player-Ereignisse abhören

const readyHandle = await MuxPlayer.addListener('ready', ({ playerName }) => {
  console.log('Mux player ready', playerName);
});

const errorHandle = await MuxPlayer.addListener('error', ({ message }) => {
  console.error('Mux player error:', message);
});

// Aufräumen nach dem Schließen des Players
const dismissPlayer = async () => {
  await MuxPlayer.dismiss();
  await readyHandle.remove();
  await errorHandle.remove();
};

Token-basierte Wiedergabe

await MuxPlayer.play({
  playbackId: 'signed-playback-id',
  playbackToken: signedPlaybackToken,
  drmToken: signedDrmToken, // Optional, wenn Sie DRM-Richtlinien aktiviert haben
  autoPlay: true,
  startTime: 120, // beginnen Sie bei 2 Minuten
});

Auf Player-Lebenszyklus reagieren

const { active } = await MuxPlayer.isActive();
if (active) {
  console.log('Player aktuell sichtbar');
}

// Entfernen Sie alle Listener-Registrierungen beim Entfernen
await MuxPlayer.removeAllListeners();

Tipps

• Generieren Sie signierte Playback- und DRM-Tokens auf Ihrem Backend mit Mux-Signaturschlüsseln.
• Übergeben Sie einen playerName, um die Analytik bei mehreren Playern in Ihrer App zu trennen.
• Kombinieren Sie mit enableSmartCache, um die Offline-Stabilität auf unterstützten Plattformen zu verbessern.