Memulai

Instalasi

npm

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

yarn

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

pnpm

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

bun

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

Prasyarat

Anda memerlukan akun Stream dan kredensial API. Daftar di Stream jika Anda belum memilikinya.

Konfigurasi Platform

iOS

Tambahkan izin yang diperlukan ke Info.plist Anda:

<key>NSCameraUsageDescription</key>
<string>This app needs camera access for video calls</string>
<key>NSMicrophoneUsageDescription</key>
<string>This app needs microphone access for video calls</string>

Android

Tambahkan izin yang diperlukan ke AndroidManifest.xml Anda:

<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" />

Contoh Penggunaan

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

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

// Create a call
await StreamCall.createCall({
  callId: 'call-123',
  callType: 'default'
});

// Join a call
await StreamCall.joinCall({
  callId: 'call-123'
});

// Enable/disable camera
await StreamCall.toggleCamera({
  enabled: true
});

// Enable/disable microphone
await StreamCall.toggleMicrophone({
  enabled: true
});

// Switch camera (front/back)
await StreamCall.switchCamera();

// Leave the call
await StreamCall.leaveCall();

// Listen for call events
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);
});

Referensi API

initialize(options)

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

Inisialisasi Stream Video SDK.

Param	Type
options	InitializeOptions

createCall(options)

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

Buat panggilan video baru.

Param	Type
options	CreateCallOptions

joinCall(options)

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

Bergabung dengan panggilan video yang ada.

Param	Type
options	JoinCallOptions

leaveCall()

leaveCall() => Promise<void>

Keluar dari panggilan saat ini.

toggleCamera(options)

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

Aktifkan atau nonaktifkan kamera.

Param	Type
options	{ enabled: boolean }

toggleMicrophone(options)

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

Aktifkan atau nonaktifkan mikrofon.

Param	Type
options	{ enabled: boolean }

switchCamera()

switchCamera() => Promise<void>

Beralih antara kamera depan dan belakang.

setSpeakerphone(options)

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

Aktifkan atau nonaktifkan speakerphone.

Param	Type
options	{ enabled: boolean }

sendCallInvite(options)

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

Kirim undangan panggilan ke pengguna.

Param	Type
options	InviteOptions

acceptCall(options)

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

Terima panggilan masuk.

Param	Type
options	{ callId: string }

rejectCall(options)

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

Tolak panggilan masuk.

Param	Type
options	{ callId: string }

Interfaces

InitializeOptions

Prop	Type	Description
apiKey	string	Stream API key
userId	string	User ID
userToken	string	User authentication token
userName	string	User display name (optional)
userImage	string	User profile image URL (optional)

CreateCallOptions

Prop	Type	Description
callId	string	Unique call identifier
callType	string	Call type (e.g., ‘default’, ‘audio-only’)
members	string[]	Array of user IDs to invite (optional)

JoinCallOptions

Prop	Type	Description
callId	string	Call ID to join

InviteOptions

Prop	Type	Description
callId	string	Call ID
userId	string	User ID to invite

Event Listeners

Event yang Tersedia

• callStarted - Panggilan telah dimulai
• callEnded - Panggilan telah berakhir
• participantJoined - Peserta bergabung dengan panggilan
• participantLeft - Peserta meninggalkan panggilan
• incomingCall - Panggilan masuk diterima
• callAccepted - Panggilan telah diterima
• callRejected - Panggilan telah ditolak
• error - Terjadi kesalahan

Contoh Event

// Listen for incoming calls
StreamCall.addListener('incomingCall', (data) => {
  console.log('Incoming call from:', data.callerId);
  console.log('Caller name:', data.callerName);

  // Show incoming call UI
  showIncomingCallScreen({
    callerId: data.callerId,
    callerName: data.callerName,
    callerImage: data.callerImage,
    callId: data.callId
  });
});

// Listen for call acceptance
StreamCall.addListener('callAccepted', (data) => {
  console.log('Call accepted');
  // Navigate to call screen
});

// Listen for errors
StreamCall.addListener('error', (error) => {
  console.error('Call error:', error.message);
  // Handle error appropriately
});

// Remove listener when done
const listener = await StreamCall.addListener('callStarted', (data) => {
  console.log('Call started');
});

// Later...
listener.remove();

Contoh Lengkap

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() {
    // Handle incoming calls
    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 });
      }
    });

    // Handle call events
    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()}`;

      // Create and join call
      await StreamCall.createCall({
        callId: callId,
        callType: 'default',
        members: [recipientId]
      });

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

      // Send invitation
      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> {
    // Fetch user token from your backend
    const response = await fetch(`/api/stream-token?userId=${userId}`);
    const data = await response.json();
    return data.token;
  }

  private async showIncomingCallDialog(data: any): Promise<boolean> {
    // Show native dialog or custom UI
    return confirm(`Incoming call from ${data.callerName}`);
  }

  private navigateToHome() {
    // Navigate to home screen
    window.location.href = '/';
  }
}

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

// Start a call
await videoCall.startCall('user-456');

// Toggle controls
await videoCall.toggleVideo(false); // Disable video
await videoCall.toggleAudio(false); // Mute
await videoCall.flipCamera(); // Switch camera

// End call
await videoCall.endCall();

Praktik Terbaik

• Inisialisasi SDK lebih awal dalam siklus hidup aplikasi Anda
• Tangani permintaan izin sebelum memulai panggilan
• Implementasikan penanganan error yang tepat untuk masalah jaringan
• Bersihkan listener ketika komponen di-unmount
• Uji pada perangkat nyata (bukan hanya emulator)
• Implementasikan logika reconnection untuk gangguan jaringan
• Berikan umpan balik visual untuk status panggilan
• Tangani transisi background/foreground

Lokalisasi

Plugin mendukung banyak bahasa untuk elemen UI native. Konfigurasi di pengaturan spesifik platform Anda.

Kasus Penggunaan

• Panggilan video satu-lawan-satu
• Konferensi video grup
• Panggilan audio saja
• Sesi berbagi layar
• Obrolan video dukungan pelanggan
• Konsultasi telemedicine
• Kolaborasi jarak jauh