@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

1. Add your apikey to the Android project:

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

2. Add your apikey to the Android project:

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

Setting up iOS StreamVideo apikey

1. 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

1. 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

2. 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

3. 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...";

4. 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

1. 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>

2. 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.

API

• login(...)
• logout()
• call(...)
• endCall()
• setMicrophoneEnabled(...)
• setCameraEnabled(...)
• addListener('callEvent', ...)
• removeAllListeners()
• acceptCall()
• rejectCall()
• isCameraEnabled()
• getCallStatus()
• Interfaces
• Type Aliases
• Enums

login(...)

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

Login to Stream Video service

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>

Check if camera is enabled

Returns: Promise<CameraEnabledResponse>

---

getCallStatus()

getCallStatus() => Promise<CallEvent>

Get the current call status

Returns: Promise<CallEvent>

---

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	CallType	Type of call, defaults to 'default'
ring	boolean	Whether to ring the other user, defaults to true
team	string	Team name to call

CallEvent

Prop	Type	Description
callId	string	ID of the call
state	CallState	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, if applicable

CallState

CallState is the current state of the call as seen by an SFU.

Prop	Type	Description
participants	Participant[]	participants is the list of participants in the call. In large calls, the list could be truncated in which case, the list of participants contains fewer participants than the counts returned in participant_count. Anonymous participants are NOT included in the list.
startedAt	Timestamp	started_at is the time the call session actually started.
participantCount	ParticipantCount	participant_count contains the summary of the counts.
pins	Pin[]	the list of pins in the call. Pins are ordered in descending order (most important first).

Participant

those who are online in the call

Prop	Type	Description
userId	string
sessionId	string
publishedTracks	TrackType[]	map of track id to track type
joinedAt	Timestamp
trackLookupPrefix	string
connectionQuality	ConnectionQuality
isSpeaking	boolean
isDominantSpeaker	boolean
audioLevel	number
name	string
image	string
custom	Struct
roles	string[]

Timestamp

A Timestamp represents a point in time independent of any time zone or local calendar, encoded as a count of seconds and fractions of seconds at nanosecond resolution. The count is relative to an epoch at UTC midnight on January 1, 1970, in the proleptic Gregorian calendar which extends the Gregorian calendar backwards to year one.

All minutes are 60 seconds long. Leap seconds are "smeared" so that no leap second table is needed for interpretation, using a 24-hour linear smear.

The range is from 0001-01-01T00:00:00Z to 9999-12-31T23:59:59.999999999Z. By restricting to that range, we ensure that we can convert to and from RFC 3339 date strings.

Examples

Example 1: Compute Timestamp from POSIX time().

<a href="#timestamp">Timestamp</a> timestamp;
timestamp.set_seconds(time(NULL));
timestamp.set_nanos(0);

Example 2: Compute Timestamp from POSIX gettimeofday().

struct timeval tv;
gettimeofday(&tv, NULL);

<a href="#timestamp">Timestamp</a> timestamp;
timestamp.set_seconds(tv.tv_sec);
timestamp.set_nanos(tv.tv_usec * 1000);

Example 3: Compute Timestamp from Win32 GetSystemTimeAsFileTime().

FILETIME ft;
GetSystemTimeAsFileTime(&ft);
UINT64 ticks = (((UINT64)ft.dwHighDateTime) << 32) | ft.dwLowDateTime;

// A Windows tick is 100 nanoseconds. Windows epoch 1601-01-01T00:00:00Z
// is 11644473600 seconds before Unix epoch 1970-01-01T00:00:00Z.
<a href="#timestamp">Timestamp</a> timestamp;
timestamp.set_seconds((INT64) ((ticks / 10000000) - 11644473600LL));
timestamp.set_nanos((INT32) ((ticks % 10000000) * 100));

Example 4: Compute Timestamp from Java System.currentTimeMillis().

long millis = System.currentTimeMillis();

<a href="#timestamp">Timestamp</a> timestamp = <a href="#timestamp">Timestamp</a>.newBuilder().setSeconds(millis / 1000)
    .setNanos((int) ((millis % 1000) * 1000000)).build();

Example 5: Compute Timestamp from Java Instant.now().

Instant now = Instant.now();

<a href="#timestamp">Timestamp</a> timestamp =
    <a href="#timestamp">Timestamp</a>.newBuilder().setSeconds(now.getEpochSecond())
        .setNanos(now.getNano()).build();

Example 6: Compute Timestamp from current time in Python.

timestamp = <a href="#timestamp">Timestamp</a>()
timestamp.GetCurrentTime()

JSON Mapping

In JSON format, the Timestamp type is encoded as a string in the RFC 3339 format. That is, the format is "{year}-{month}-{day}T{hour}:{min}:{sec}[.{frac_sec}]Z" where {year} is always expressed using four digits while {month}, {day}, {hour}, {min}, and {sec} are zero-padded to two digits each. The fractional seconds, which can go up to 9 digits (i.e. up to 1 nanosecond resolution), are optional. The "Z" suffix indicates the timezone ("UTC"); the timezone is required. A proto3 JSON serializer should always use UTC (as indicated by "Z") when printing the Timestamp type and a proto3 JSON parser should be able to accept both UTC and other timezones (as indicated by an offset).

For example, "2017-01-15T01:30:15.01Z" encodes 15.01 seconds past 01:30 UTC on January 15, 2017.

In JavaScript, one can convert a Date object to this format using the standard toISOString() method. In Python, a standard datetime.datetime object can be converted to this format using strftime with the time format spec '%Y-%m-%dT%H:%M:%S.%fZ'. Likewise, in Java, one can use the Joda Time's ISODateTimeFormat.dateTime() to obtain a formatter capable of generating timestamps in this format.

Prop	Type	Description
seconds	string	Represents seconds of UTC time since Unix epoch 1970-01-01T00:00:00Z. Must be from 0001-01-01T00:00:00Z to 9999-12-31T23:59:59Z inclusive.
nanos	number	Non-negative fractions of a second at nanosecond resolution. Negative second values with fractions must still have non-negative nanos values that count forward in time. Must be from 0 to 999,999,999 inclusive.

Struct

Struct represents a structured data value, consisting of fields which map to dynamically typed values. In some languages, Struct might be supported by a native representation. For example, in scripting languages like JS a struct is represented as an object. The details of that representation are described together with the proto support for the language.

The JSON representation for Struct is JSON object.

Prop	Type	Description
fields	{ [key: string]: Value; }	Unordered map of dynamically typed values.

Value

Value represents a dynamically typed value which can be either null, a number, a string, a boolean, a recursive struct value, or a list of values. A producer of value is expected to set one of these variants. Absence of any variant indicates an error.

The JSON representation for Value is JSON value.

Prop	Type
kind	{ oneofKind: 'nullValue'; nullValue: NullValue; } | { oneofKind: 'numberValue'; numberValue: number; } | { oneofKind: 'stringValue'; stringValue: string; } | { oneofKind: 'boolValue'; boolValue: boolean; } | { oneofKind: 'structValue'; structValue: Struct; } | { oneofKind: 'listValue'; listValue: ListValue; } | { oneofKind: undefined; }

ListValue

ListValue is a wrapper around a repeated field of values.

The JSON representation for ListValue is JSON array.

Prop	Type	Description
values	Value[]	Repeated field of dynamically typed values.

ParticipantCount

Prop	Type	Description
total	number	Total number of participants in the call including the anonymous participants.
anonymous	number	Total number of anonymous participants in the call.

Pin

Prop	Type	Description
userId	string	the user to pin
sessionId	string	the user sesion_id to pin, if not provided, applies to all sessions

CameraEnabledResponse

Prop	Type
enabled	boolean

Type Aliases

CallType

'default' | 'audio_room' | 'livestream' | 'development'

CallState

'idle' | 'ringing' | 'joining' | 'reconnecting' | 'joined' | 'leaving' | 'left' | 'created' | 'session_started' | 'rejected' | 'missed' | 'accepted' | 'ended' | 'unknown'

Enums

TrackType

Members	Value
UNSPECIFIED	0
AUDIO	1
VIDEO	2
SCREEN_SHARE	3
SCREEN_SHARE_AUDIO	4

ConnectionQuality

Members	Value
UNSPECIFIED	0
POOR	1
GOOD	2
EXCELLENT	3

NullValue

Members	Value	Description
NULL_VALUE	0	Null value.