Erste Schritte

Installation

npm install @capgo/capacitor-stream-call
npx cap sync

yarn add @capgo/capacitor-stream-call
npx cap sync

pnpm add @capgo/capacitor-stream-call
npx cap sync

bun add @capgo/capacitor-stream-call
npx cap sync

Voraussetzungen

Sie benötigen ein Stream-Konto und API-Anmeldeinformationen. Registrieren Sie sich bei Stream, falls Sie noch kein Konto haben.

Plattform-Konfiguration

iOS

Fügen Sie die erforderlichen Berechtigungen zu Ihrer Info.plist hinzu:

<key>NSCameraUsageDescription</key>
<string>Diese App benötigt Kamerazugriff für Videoanrufe</string>
<key>NSMicrophoneUsageDescription</key>
<string>Diese App benötigt Mikrofonzugriff für Videoanrufe</string>

Android

Fügen Sie die erforderlichen Berechtigungen zu Ihrer AndroidManifest.xml hinzu:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

Verwendungsbeispiel

import { StreamCall } from '@capgo/capacitor-stream-call';

// Stream SDK initialisieren
await StreamCall.initialize({
  apiKey: 'your-stream-api-key',
  userId: 'user-123',
  userToken: 'user-token'
});

// Einen Anruf erstellen
await StreamCall.createCall({
  callId: 'call-123',
  callType: 'default'
});

// Einem Anruf beitreten
await StreamCall.joinCall({
  callId: 'call-123'
});

// Kamera aktivieren/deaktivieren
await StreamCall.toggleCamera({
  enabled: true
});

// Mikrofon aktivieren/deaktivieren
await StreamCall.toggleMicrophone({
  enabled: true
});

// Kamera wechseln (vorne/hinten)
await StreamCall.switchCamera();

// Den Anruf verlassen
await StreamCall.leaveCall();

// Auf Anrufereignisse hören
StreamCall.addListener('callStarted', (data) => {
  console.log('Call started:', data);
});

StreamCall.addListener('callEnded', (data) => {
  console.log('Call ended:', data);
});

StreamCall.addListener('participantJoined', (data) => {
  console.log('Participant joined:', data);
});

StreamCall.addListener('participantLeft', (data) => {
  console.log('Participant left:', data);
});

API-Referenz

initialize(options)

initialize(options: InitializeOptions) => Promise<void>

Initialisiert das Stream Video SDK.

Param	Type
`options`	`InitializeOptions`

createCall(options)

createCall(options: CreateCallOptions) => Promise<void>

Erstellt einen neuen Videoanruf.

Param	Type
`options`	`CreateCallOptions`

joinCall(options)

joinCall(options: JoinCallOptions) => Promise<void>

Tritt einem bestehenden Videoanruf bei.

Param	Type
`options`	`JoinCallOptions`

leaveCall()

leaveCall() => Promise<void>

Verlässt den aktuellen Anruf.

toggleCamera(options)

toggleCamera(options: { enabled: boolean }) => Promise<void>

Aktiviert oder deaktiviert die Kamera.

Param	Type
`options`	`{ enabled: boolean }`

toggleMicrophone(options)

toggleMicrophone(options: { enabled: boolean }) => Promise<void>

Aktiviert oder deaktiviert das Mikrofon.

Param	Type
`options`	`{ enabled: boolean }`

switchCamera()

switchCamera() => Promise<void>

Wechselt zwischen Vorder- und Rückkamera.

setSpeakerphone(options)

setSpeakerphone(options: { enabled: boolean }) => Promise<void>

Aktiviert oder deaktiviert den Lautsprecher.

Param	Type
`options`	`{ enabled: boolean }`

sendCallInvite(options)

sendCallInvite(options: InviteOptions) => Promise<void>

Sendet eine Anrufeinladung an einen Benutzer.

Param	Type
`options`	`InviteOptions`

acceptCall(options)

acceptCall(options: { callId: string }) => Promise<void>

Nimmt einen eingehenden Anruf an.

Param	Type
`options`	`{ callId: string }`

rejectCall(options)

rejectCall(options: { callId: string }) => Promise<void>

Lehnt einen eingehenden Anruf ab.

Param	Type
`options`	`{ callId: string }`

Schnittstellen

InitializeOptions

Prop	Type	Beschreibung
`apiKey`	`string`	Stream API-Schlüssel
`userId`	`string`	Benutzer-ID
`userToken`	`string`	Benutzer-Authentifizierungstoken
`userName`	`string`	Anzeigename des Benutzers (optional)
`userImage`	`string`	Profilbild-URL des Benutzers (optional)

CreateCallOptions

Prop	Type	Beschreibung
`callId`	`string`	Eindeutiger Anruf-Identifikator
`callType`	`string`	Anruftyp (z.B. ‘default’, ‘audio-only’)
`members`	`string[]`	Array von Benutzer-IDs zum Einladen (optional)

JoinCallOptions

Prop	Type	Beschreibung
`callId`	`string`	Anruf-ID zum Beitreten

InviteOptions

Prop	Type	Beschreibung
`callId`	`string`	Anruf-ID
`userId`	`string`	Benutzer-ID zum Einladen

Event-Listener

Verfügbare Ereignisse

callStarted - Anruf wurde gestartet
callEnded - Anruf wurde beendet
participantJoined - Ein Teilnehmer ist dem Anruf beigetreten
participantLeft - Ein Teilnehmer hat den Anruf verlassen
incomingCall - Eingehender Anruf empfangen
callAccepted - Anruf wurde angenommen
callRejected - Anruf wurde abgelehnt
error - Ein Fehler ist aufgetreten

Ereignis-Beispiel

// Auf eingehende Anrufe hören
StreamCall.addListener('incomingCall', (data) => {
  console.log('Incoming call from:', data.callerId);
  console.log('Caller name:', data.callerName);

  // Eingehenden Anruf-UI anzeigen
  showIncomingCallScreen({
    callerId: data.callerId,
    callerName: data.callerName,
    callerImage: data.callerImage,
    callId: data.callId
  });
});

// Auf Anrufannahme hören
StreamCall.addListener('callAccepted', (data) => {
  console.log('Call accepted');
  // Zum Anruf-Bildschirm navigieren
});

// Auf Fehler hören
StreamCall.addListener('error', (error) => {
  console.error('Call error:', error.message);
  // Fehler angemessen behandeln
});

// Listener entfernen, wenn fertig
const listener = await StreamCall.addListener('callStarted', (data) => {
  console.log('Call started');
});

// Später...
listener.remove();

Vollständiges Beispiel

import { StreamCall } from '@capgo/capacitor-stream-call';

class VideoCallService {
  async initialize(userId: string, userName: string) {
    try {
      await StreamCall.initialize({
        apiKey: 'your-stream-api-key',
        userId: userId,
        userToken: await this.getUserToken(userId),
        userName: userName
      });

      this.setupEventListeners();
    } catch (error) {
      console.error('Failed to initialize Stream:', error);
    }
  }

  setupEventListeners() {
    // Eingehende Anrufe behandeln
    StreamCall.addListener('incomingCall', async (data) => {
      const accepted = await this.showIncomingCallDialog(data);

      if (accepted) {
        await StreamCall.acceptCall({ callId: data.callId });
        await StreamCall.joinCall({ callId: data.callId });
      } else {
        await StreamCall.rejectCall({ callId: data.callId });
      }
    });

    // Anrufereignisse behandeln
    StreamCall.addListener('callStarted', () => {
      console.log('Call started');
    });

    StreamCall.addListener('callEnded', () => {
      console.log('Call ended');
      this.navigateToHome();
    });

    StreamCall.addListener('participantJoined', (data) => {
      console.log('Participant joined:', data.participantName);
    });
  }

  async startCall(recipientId: string) {
    try {
      const callId = `call-${Date.now()}`;

      // Anruf erstellen und beitreten
      await StreamCall.createCall({
        callId: callId,
        callType: 'default',
        members: [recipientId]
      });

      await StreamCall.joinCall({ callId: callId });

      // Einladung senden
      await StreamCall.sendCallInvite({
        callId: callId,
        userId: recipientId
      });

      console.log('Call started');
    } catch (error) {
      console.error('Failed to start call:', error);
    }
  }

  async endCall() {
    try {
      await StreamCall.leaveCall();
      console.log('Call ended');
    } catch (error) {
      console.error('Failed to end call:', error);
    }
  }

  async toggleVideo(enabled: boolean) {
    await StreamCall.toggleCamera({ enabled });
  }

  async toggleAudio(enabled: boolean) {
    await StreamCall.toggleMicrophone({ enabled });
  }

  async flipCamera() {
    await StreamCall.switchCamera();
  }

  private async getUserToken(userId: string): Promise<string> {
    // Benutzer-Token von Ihrem Backend abrufen
    const response = await fetch(`/api/stream-token?userId=${userId}`);
    const data = await response.json();
    return data.token;
  }

  private async showIncomingCallDialog(data: any): Promise<boolean> {
    // Nativen Dialog oder benutzerdefinierte UI anzeigen
    return confirm(`Incoming call from ${data.callerName}`);
  }

  private navigateToHome() {
    // Zum Startbildschirm navigieren
    window.location.href = '/';
  }
}

// Verwendung
const videoCall = new VideoCallService();
await videoCall.initialize('user-123', 'John Doe');

// Einen Anruf starten
await videoCall.startCall('user-456');

// Steuerelemente umschalten
await videoCall.toggleVideo(false); // Video deaktivieren
await videoCall.toggleAudio(false); // Stummschalten
await videoCall.flipCamera(); // Kamera wechseln

// Anruf beenden
await videoCall.endCall();

Best Practices

Initialisieren Sie das SDK früh im Lebenszyklus Ihrer App
Berechtigungsanfragen vor dem Start von Anrufen behandeln
Implementieren Sie eine ordnungsgemäße Fehlerbehandlung für Netzwerkprobleme
Listener aufräumen, wenn Komponenten demontiert werden
Auf echten Geräten testen (nicht nur Emulatoren)
Wiederverbindungslogik für Netzwerkunterbrechungen implementieren
Visuelles Feedback für Anrufzustände bereitstellen
Hintergrund-/Vordergrund-Übergänge behandeln

Lokalisierung

Das Plugin unterstützt mehrere Sprachen für native UI-Elemente. Konfigurieren Sie dies in Ihren plattformspezifischen Einstellungen.

Anwendungsfälle

Einzelgespräche per Video
Gruppen-Videokonferenzen
Nur-Audio-Anrufe
Bildschirmfreigabe-Sitzungen
Kundensupport per Video-Chat
Telemedizinische Konsultationen
Remote-Zusammenarbeit