@capgo/capacitor-stream-call

➡️ Get Instant updates for your App with Capgo 🚀

Fix your annoying bug now, Hire a Capacitor expert 💪

WIP: We are actively working on this plugin. not yet ready for production. Uses the https://getstream.io/ SDK to implement calling in Capacitor

Install

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

Setting up Android StreamVideo apikey

Add your apikey to the Android project:

your_app/android/app/src/main/res/values/strings.xml

Add your apikey to the Android project:

<string name="CAPACITOR_STREAM_VIDEO_APIKEY">your_api_key</string>

Setting up iOS StreamVideo apikey

Add your apikey to the iOS project:

your_app/ios/App/App/Info.plist

Add the following to the Info.plist file:

<dict>
  <key>CAPACITOR_STREAM_VIDEO_APIKEY</key>
  <string>n8wv8vjmucdw</string>
  <!-- other keys -->
</dict>

Native Localization

iOS

Add Localizable.strings and Localizable.stringsdict files to your Xcode project if you don't have them:

/App/App/en.lproj/Localizable.strings
/App/App/en.lproj/Localizable.stringsdict

Add new languages to your project in Xcode:
- Open project settings
- Select your project
- Click "Info" tab
- Under "Localizations" click "+"
- Select the languages you want to add
Add the translations in your Localizable.strings:

// en.lproj/Localizable.strings
"stream.video.call.incoming" = "Incoming call from %@";
"stream.video.call.accept" = "Accept";
"stream.video.call.reject" = "Reject";
"stream.video.call.hangup" = "Hang up";
"stream.video.call.joining" = "Joining...";
"stream.video.call.reconnecting" = "Reconnecting...";

Configure the localization provider in your AppDelegate.swift:

import StreamVideo

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Set localization provider to use your app's bundle
        Appearance.localizationProvider = { key, table in
            Bundle.main.localizedString(forKey: key, value: nil, table: table)
        }
        return true
    }
}

You can find all available localization keys in the StreamVideo SDK repository.

Android

Create string resources in /app/src/main/res/values/strings.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="stream_video_call_incoming">Incoming call from %1$s</string>
    <string name="stream_video_call_accept">Accept</string>
    <string name="stream_video_call_reject">Reject</string>
    <string name="stream_video_call_hangup">Hang up</string>
    <string name="stream_video_call_joining">Joining...</string>
    <string name="stream_video_call_reconnecting">Reconnecting...</string>
</resources>

Add translations for other languages in their respective folders (e.g., /app/src/main/res/values-fr/strings.xml):

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="stream_video_call_incoming">Appel entrant de %1$s</string>
    <string name="stream_video_call_accept">Accepter</string>
    <string name="stream_video_call_reject">Refuser</string>
    <string name="stream_video_call_hangup">Raccrocher</string>
    <string name="stream_video_call_joining">Connexion...</string>
    <string name="stream_video_call_reconnecting">Reconnexion...</string>
</resources>

The SDK will automatically use the system language and these translations.

login(...)

login(options: LoginOptions) => Promise<SuccessResponse>

Param	Type	Description
`options`	`LoginOptions`	- Login configuration

Returns: Promise<SuccessResponse>

logout()

logout() => Promise<SuccessResponse>

Logout from Stream Video service

Returns: Promise<SuccessResponse>

call(...)

call(options: CallOptions) => Promise<SuccessResponse>

Initiate a call to another user

Param	Type	Description
`options`	`CallOptions`	- Call configuration

Returns: Promise<SuccessResponse>

endCall()

endCall() => Promise<SuccessResponse>

End the current call

Returns: Promise<SuccessResponse>

setMicrophoneEnabled(...)

setMicrophoneEnabled(options: { enabled: boolean; }) => Promise<SuccessResponse>

Enable or disable microphone

Param	Type	Description
`options`	`{ enabled: boolean; }`	- Microphone state

Returns: Promise<SuccessResponse>

setCameraEnabled(...)

setCameraEnabled(options: { enabled: boolean; }) => Promise<SuccessResponse>

Enable or disable camera

Param	Type	Description
`options`	`{ enabled: boolean; }`	- Camera state

Returns: Promise<SuccessResponse>

addListener('callEvent', ...)

addListener(eventName: 'callEvent', listenerFunc: (event: CallEvent) => void) => Promise<{ remove: () => Promise<void>; }>

Add listener for call events

Param	Type	Description
`eventName`	`'callEvent'`	- Name of the event to listen for
`listenerFunc`	`(event: CallEvent) => void`	- Callback function

Returns: Promise<{ remove: () => Promise<void>; }>

removeAllListeners()

removeAllListeners() => Promise<void>

Remove all event listeners

acceptCall()

acceptCall() => Promise<SuccessResponse>

Accept an incoming call

Returns: Promise<SuccessResponse>

rejectCall()

rejectCall() => Promise<SuccessResponse>

Reject an incoming call

Returns: Promise<SuccessResponse>

isCameraEnabled()

isCameraEnabled() => Promise<CameraEnabledResponse>

Returns: Promise<CameraEnabledResponse>

Interfaces

SuccessResponse

Prop	Type	Description
`success`	`boolean`	Whether the operation was successful

LoginOptions

Prop	Type	Description
`token`	`string`	Stream Video API token
`userId`	`string`	User ID for the current user
`name`	`string`	Display name for the current user
`imageURL`	`string`	Optional avatar URL for the current user
`apiKey`	`string`	Stream Video API key
`magicDivId`	`string`	ID of the HTML element where the video will be rendered

CallOptions

Prop	Type	Description
`userIds`	`string[]`	User ID of the person to call
`type`	`string`	Type of call, defaults to 'default'
`ring`	`boolean`	Whether to ring the other user, defaults to true

CallEvent

Prop	Type	Description
`callId`	`string`	ID of the call
`state`	`string`	Current state of the call
`userId`	`string`	User ID of the participant in the call who triggered the event
`reason`	`string`	Reason for the call state change

CameraEnabledResponse

Prop	Type
`enabled`	`boolean`