@capgo/capacitor-stream-call 0.0.42 → 0.0.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +158 -176
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,136 +6,39 @@
|
|
|
6
6
|
<h2><a href="https://capgo.app/consulting/?ref=plugin"> Fix your annoying bug now, Hire a Capacitor expert 💪</a></h2>
|
|
7
7
|
</div>
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
A Capacitor plugin that uses the [Stream Video SDK](https://getstream.io/) to enable video calling functionality in your app.
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## Installation
|
|
12
12
|
|
|
13
13
|
```bash
|
|
14
14
|
npm install @capgo/capacitor-stream-call
|
|
15
15
|
npx cap sync
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
-
##
|
|
18
|
+
## Configuration
|
|
19
19
|
|
|
20
|
-
###
|
|
21
|
-
Modify your `MainActivity.java` to handle incoming calls:
|
|
22
|
-
|
|
23
|
-
```java
|
|
24
|
-
@Override
|
|
25
|
-
protected void onCreate(Bundle savedInstanceState) {
|
|
26
|
-
// Save initial intent for StreamCallPlugin (handles killed-state notification)
|
|
27
|
-
ee.forgr.capacitor.streamcall.StreamCallPlugin.saveInitialIntent(getIntent());
|
|
28
|
-
|
|
29
|
-
super.onCreate(savedInstanceState);
|
|
30
|
-
|
|
31
|
-
// Ensure the activity is visible over the lock screen when launched via full-screen intent
|
|
32
|
-
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O_MR1) {
|
|
33
|
-
setShowWhenLocked(true);
|
|
34
|
-
setTurnScreenOn(true);
|
|
35
|
-
} else {
|
|
36
|
-
getWindow().addFlags(android.view.WindowManager.LayoutParams.FLAG_SHOW_WHEN_LOCKED | android.view.WindowManager.LayoutParams.FLAG_TURN_SCREEN_ON);
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
@Override
|
|
41
|
-
protected void onNewIntent(Intent intent) {
|
|
42
|
-
super.onNewIntent(intent);
|
|
43
|
-
setIntent(intent);
|
|
44
|
-
String action = intent.getAction();
|
|
45
|
-
if ("io.getstream.video.android.action.ACCEPT_CALL".equals(action)) {
|
|
46
|
-
android.app.KeyguardManager km = (android.app.KeyguardManager) getSystemService(KEYGUARD_SERVICE);
|
|
47
|
-
if (km != null && km.isKeyguardLocked()) {
|
|
48
|
-
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
|
|
49
|
-
km.requestDismissKeyguard(this, new KeyguardManager.KeyguardDismissCallback() {
|
|
50
|
-
@Override
|
|
51
|
-
public void onDismissSucceeded() {
|
|
52
|
-
forwardAcceptIntent(intent);
|
|
53
|
-
}
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
} else {
|
|
57
|
-
forwardAcceptIntent(intent);
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
private void forwardAcceptIntent(Intent intent) {
|
|
63
|
-
ee.forgr.capacitor.streamcall.StreamCallPlugin.saveInitialIntent(intent);
|
|
64
|
-
PluginHandle pluginHandle = getBridge().getPlugin("StreamCall");
|
|
65
|
-
if (pluginHandle != null) {
|
|
66
|
-
com.getcapacitor.Plugin pluginInstance = pluginHandle.getInstance();
|
|
67
|
-
if (pluginInstance instanceof ee.forgr.capacitor.streamcall.StreamCallPlugin) {
|
|
68
|
-
((ee.forgr.capacitor.streamcall.StreamCallPlugin) pluginInstance).handleAcceptCallIntent(intent);
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
### Application Class
|
|
75
|
-
Create or modify your Application class to pre-initialize the plugin:
|
|
76
|
-
|
|
77
|
-
```java
|
|
78
|
-
@Override
|
|
79
|
-
public void onCreate() {
|
|
80
|
-
super.onCreate();
|
|
81
|
-
|
|
82
|
-
// Initialize Firebase
|
|
83
|
-
com.google.firebase.FirebaseApp.initializeApp(this);
|
|
84
|
-
|
|
85
|
-
try {
|
|
86
|
-
StreamCallPlugin.preLoadInit(this, this);
|
|
87
|
-
} catch (Exception e) {
|
|
88
|
-
Log.e("App", "Failed to pre-initialize StreamVideo Plugin", e);
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
## Setting up Android StreamVideo apikey
|
|
94
|
-
1. Add your apikey to the Android project:
|
|
95
|
-
```
|
|
96
|
-
your_app/android/app/src/main/res/values/strings.xml
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
2. Add your apikey to the Android project:
|
|
100
|
-
```xml
|
|
101
|
-
<string name="CAPACITOR_STREAM_VIDEO_APIKEY">your_api_key</string>
|
|
102
|
-
```
|
|
20
|
+
### iOS Setup
|
|
103
21
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
```
|
|
107
|
-
your_app/ios/App/App/Info.plist
|
|
108
|
-
```
|
|
22
|
+
#### 1. API Key Configuration
|
|
23
|
+
Add your Stream Video API key to `ios/App/App/Info.plist`:
|
|
109
24
|
|
|
110
|
-
Add the following to the Info.plist file:
|
|
111
25
|
```xml
|
|
112
26
|
<dict>
|
|
113
27
|
<key>CAPACITOR_STREAM_VIDEO_APIKEY</key>
|
|
114
|
-
<string>
|
|
28
|
+
<string>your_api_key_here</string>
|
|
115
29
|
<!-- other keys -->
|
|
116
30
|
</dict>
|
|
117
31
|
```
|
|
118
32
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
### iOS
|
|
122
|
-
|
|
123
|
-
1. Add `Localizable.strings` and `Localizable.stringsdict` files to your Xcode project if you don't have them:
|
|
124
|
-
```
|
|
125
|
-
/App/App/en.lproj/Localizable.strings
|
|
126
|
-
/App/App/en.lproj/Localizable.stringsdict
|
|
127
|
-
```
|
|
33
|
+
#### 2. Localization (Optional)
|
|
34
|
+
To support multiple languages:
|
|
128
35
|
|
|
129
|
-
|
|
130
|
-
-
|
|
131
|
-
-
|
|
132
|
-
- Click "Info" tab
|
|
133
|
-
- Under "Localizations" click "+"
|
|
134
|
-
- Select the languages you want to add
|
|
36
|
+
1. Add localization files to your Xcode project:
|
|
37
|
+
- `/App/App/en.lproj/Localizable.strings`
|
|
38
|
+
- `/App/App/en.lproj/Localizable.stringsdict`
|
|
135
39
|
|
|
136
|
-
|
|
137
|
-
```
|
|
138
|
-
// en.lproj/Localizable.strings
|
|
40
|
+
2. Add translations in `Localizable.strings`:
|
|
41
|
+
```swift
|
|
139
42
|
"stream.video.call.incoming" = "Incoming call from %@";
|
|
140
43
|
"stream.video.call.accept" = "Accept";
|
|
141
44
|
"stream.video.call.reject" = "Reject";
|
|
@@ -144,14 +47,13 @@ Add the following to the Info.plist file:
|
|
|
144
47
|
"stream.video.call.reconnecting" = "Reconnecting...";
|
|
145
48
|
```
|
|
146
49
|
|
|
147
|
-
|
|
50
|
+
3. Configure localization in your `AppDelegate.swift`:
|
|
148
51
|
```swift
|
|
149
52
|
import StreamVideo
|
|
150
53
|
|
|
151
54
|
@UIApplicationMain
|
|
152
55
|
class AppDelegate: UIResponder, UIApplicationDelegate {
|
|
153
56
|
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
|
|
154
|
-
// Set localization provider to use your app's bundle
|
|
155
57
|
Appearance.localizationProvider = { key, table in
|
|
156
58
|
Bundle.main.localizedString(forKey: key, value: nil, table: table)
|
|
157
59
|
}
|
|
@@ -160,12 +62,62 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
|
|
|
160
62
|
}
|
|
161
63
|
```
|
|
162
64
|
|
|
163
|
-
|
|
65
|
+
### Android Setup
|
|
66
|
+
|
|
67
|
+
#### 1. API Key Configuration
|
|
68
|
+
Add your Stream Video API key to `android/app/src/main/res/values/strings.xml`:
|
|
69
|
+
|
|
70
|
+
```xml
|
|
71
|
+
<string name="CAPACITOR_STREAM_VIDEO_APIKEY">your_api_key_here</string>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
#### 2. MainActivity Configuration
|
|
75
|
+
Modify your `MainActivity.java` to handle incoming calls:
|
|
76
|
+
|
|
77
|
+
```java
|
|
78
|
+
@Override
|
|
79
|
+
protected void onCreate(Bundle savedInstanceState) {
|
|
80
|
+
super.onCreate(savedInstanceState);
|
|
81
|
+
|
|
82
|
+
// Enable activity to show over lock screen
|
|
83
|
+
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O_MR1) {
|
|
84
|
+
setShowWhenLocked(true);
|
|
85
|
+
setTurnScreenOn(true);
|
|
86
|
+
} else {
|
|
87
|
+
getWindow().addFlags(android.view.WindowManager.LayoutParams.FLAG_SHOW_WHEN_LOCKED | android.view.WindowManager.LayoutParams.FLAG_TURN_SCREEN_ON);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
#### 3. Application Class Configuration
|
|
93
|
+
Create or modify your Application class to initialize the plugin:
|
|
94
|
+
|
|
95
|
+
```java
|
|
96
|
+
import ee.forgr.capacitor.streamcall.StreamCallPlugin;
|
|
97
|
+
|
|
98
|
+
@Override
|
|
99
|
+
public void onCreate() {
|
|
100
|
+
super.onCreate();
|
|
101
|
+
|
|
102
|
+
// Initialize Firebase
|
|
103
|
+
com.google.firebase.FirebaseApp.initializeApp(this);
|
|
104
|
+
|
|
105
|
+
// Pre-initialize StreamCall plugin
|
|
106
|
+
try {
|
|
107
|
+
StreamCallPlugin.preLoadInit(this, this);
|
|
108
|
+
} catch (Exception e) {
|
|
109
|
+
Log.e("App", "Failed to pre-initialize StreamVideo Plugin", e);
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
> **Note:** If you don't have an Application class, you need to create one and reference it in your `AndroidManifest.xml` with `android:name=".YourApplicationClass"`.
|
|
164
115
|
|
|
165
|
-
|
|
166
|
-
|
|
116
|
+
#### 4. Localization (Optional)
|
|
117
|
+
Add string resources for different languages:
|
|
118
|
+
|
|
119
|
+
**Default (`values/strings.xml`):**
|
|
167
120
|
```xml
|
|
168
|
-
<?xml version="1.0" encoding="utf-8"?>
|
|
169
121
|
<resources>
|
|
170
122
|
<string name="stream_video_call_incoming">Incoming call from %1$s</string>
|
|
171
123
|
<string name="stream_video_call_accept">Accept</string>
|
|
@@ -176,9 +128,8 @@ You can find all available localization keys in the [StreamVideo SDK repository]
|
|
|
176
128
|
</resources>
|
|
177
129
|
```
|
|
178
130
|
|
|
179
|
-
|
|
131
|
+
**French (`values-fr/strings.xml`):**
|
|
180
132
|
```xml
|
|
181
|
-
<?xml version="1.0" encoding="utf-8"?>
|
|
182
133
|
<resources>
|
|
183
134
|
<string name="stream_video_call_incoming">Appel entrant de %1$s</string>
|
|
184
135
|
<string name="stream_video_call_accept">Accepter</string>
|
|
@@ -189,93 +140,124 @@ You can find all available localization keys in the [StreamVideo SDK repository]
|
|
|
189
140
|
</resources>
|
|
190
141
|
```
|
|
191
142
|
|
|
192
|
-
|
|
143
|
+
## Usage
|
|
144
|
+
|
|
145
|
+
### Handling Incoming Calls (Android)
|
|
146
|
+
On Android, to handle incoming calls when the device is locked, you need to listen for the `incomingCall` event and manage the call state properly:
|
|
193
147
|
|
|
194
|
-
|
|
148
|
+
```typescript
|
|
149
|
+
import { StreamCall } from '@capgo/capacitor-stream-call';
|
|
195
150
|
|
|
196
|
-
|
|
151
|
+
export class CallService {
|
|
152
|
+
private incomingCallId: string | null = null;
|
|
153
|
+
private isLockscreenIncoming = false;
|
|
197
154
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
this.incomingCallId = payload.cid;
|
|
202
|
-
this.isLockscreenIncoming = true;
|
|
203
|
-
this.cdr.detectChanges();
|
|
204
|
-
});
|
|
205
|
-
```
|
|
206
|
-
This will allow you to display a custom call screen and then enter or reject the call with :
|
|
155
|
+
constructor() {
|
|
156
|
+
this.setupIncomingCallListener();
|
|
157
|
+
}
|
|
207
158
|
|
|
208
|
-
|
|
159
|
+
private setupIncomingCallListener() {
|
|
160
|
+
StreamCall.addListener('incomingCall', async (payload) => {
|
|
161
|
+
console.log('Incoming call from lockscreen:', payload);
|
|
162
|
+
|
|
163
|
+
// Store the call ID and show incoming call UI
|
|
164
|
+
this.incomingCallId = payload.cid;
|
|
165
|
+
this.isLockscreenIncoming = true;
|
|
166
|
+
|
|
167
|
+
// Show your custom incoming call screen
|
|
168
|
+
this.showIncomingCallScreen(payload);
|
|
169
|
+
});
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
// Accept the incoming call
|
|
209
173
|
async acceptCall() {
|
|
210
|
-
if (!this.incomingCallId)
|
|
174
|
+
if (!this.incomingCallId) {
|
|
175
|
+
console.warn('No incoming call to accept');
|
|
176
|
+
return;
|
|
177
|
+
}
|
|
211
178
|
|
|
212
179
|
try {
|
|
213
180
|
await StreamCall.acceptCall();
|
|
214
|
-
|
|
181
|
+
this.clearIncomingCall();
|
|
182
|
+
console.log('Call accepted successfully');
|
|
215
183
|
} catch (error) {
|
|
216
184
|
console.error('Failed to accept call:', error);
|
|
217
|
-
await this.presentToast('Failed to accept call', 'danger');
|
|
218
185
|
}
|
|
219
186
|
}
|
|
220
187
|
|
|
188
|
+
// Reject the incoming call
|
|
221
189
|
async rejectCall() {
|
|
222
|
-
if (!this.incomingCallId)
|
|
190
|
+
if (!this.incomingCallId) {
|
|
191
|
+
console.warn('No incoming call to reject');
|
|
192
|
+
return;
|
|
193
|
+
}
|
|
223
194
|
|
|
224
195
|
try {
|
|
225
196
|
await StreamCall.rejectCall();
|
|
226
|
-
this.
|
|
227
|
-
|
|
197
|
+
this.clearIncomingCall();
|
|
198
|
+
console.log('Call rejected successfully');
|
|
228
199
|
} catch (error) {
|
|
229
200
|
console.error('Failed to reject call:', error);
|
|
230
|
-
await this.presentToast('Failed to reject call', 'danger');
|
|
231
201
|
}
|
|
232
202
|
}
|
|
233
|
-
```
|
|
234
|
-
This is the only way we found to allow the app to use the same UI when phone is lock for the video call.
|
|
235
|
-
This can be done that way only on Android on IOS this part is handle by the OS.
|
|
236
203
|
|
|
204
|
+
private clearIncomingCall() {
|
|
205
|
+
this.incomingCallId = null;
|
|
206
|
+
this.isLockscreenIncoming = false;
|
|
207
|
+
// Hide your incoming call UI
|
|
208
|
+
this.hideIncomingCallScreen();
|
|
209
|
+
}
|
|
237
210
|
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
getWindow().addFlags(android.view.WindowManager.LayoutParams.FLAG_SHOW_WHEN_LOCKED | android.view.WindowManager.LayoutParams.FLAG_TURN_SCREEN_ON);
|
|
211
|
+
private showIncomingCallScreen(payload: any) {
|
|
212
|
+
// Implement your custom incoming call UI
|
|
213
|
+
// This should show accept/reject buttons and caller information
|
|
214
|
+
// Example: navigate to incoming call page or show modal
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
private hideIncomingCallScreen() {
|
|
218
|
+
// Hide the incoming call UI
|
|
219
|
+
// Example: navigate away from incoming call page or close modal
|
|
248
220
|
}
|
|
249
221
|
}
|
|
250
222
|
```
|
|
251
223
|
|
|
252
|
-
|
|
253
|
-
```java
|
|
254
|
-
import ee.forgr.capacitor.streamcall.StreamCallPlugin;
|
|
224
|
+
> **Important:** This lock-screen handling is only required on Android. On iOS, the system handles incoming call UI automatically.
|
|
255
225
|
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
226
|
+
### Basic Call Operations
|
|
227
|
+
```typescript
|
|
228
|
+
import { StreamCall } from '@capgo/capacitor-stream-call';
|
|
229
|
+
|
|
230
|
+
// Login to Stream Video
|
|
231
|
+
await StreamCall.login({
|
|
232
|
+
token: 'your_user_token',
|
|
233
|
+
userId: 'user_id',
|
|
234
|
+
name: 'User Name',
|
|
235
|
+
apiKey: 'your_api_key',
|
|
236
|
+
magicDivId: 'video-container'
|
|
237
|
+
});
|
|
261
238
|
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
}
|
|
272
|
-
Log.i(TAG, "Application initialization completed");
|
|
273
|
-
}
|
|
274
|
-
```
|
|
239
|
+
// Make a call
|
|
240
|
+
await StreamCall.call({
|
|
241
|
+
userIds: ['user_to_call'],
|
|
242
|
+
type: 'default',
|
|
243
|
+
ring: true
|
|
244
|
+
});
|
|
245
|
+
|
|
246
|
+
// End call
|
|
247
|
+
await StreamCall.endCall();
|
|
275
248
|
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
249
|
+
// Toggle microphone
|
|
250
|
+
await StreamCall.setMicrophoneEnabled({ enabled: false });
|
|
251
|
+
|
|
252
|
+
// Toggle camera
|
|
253
|
+
await StreamCall.setCameraEnabled({ enabled: false });
|
|
254
|
+
|
|
255
|
+
// Switch camera
|
|
256
|
+
await StreamCall.switchCamera({ camera: 'front' });
|
|
257
|
+
|
|
258
|
+
// Logout
|
|
259
|
+
await StreamCall.logout();
|
|
260
|
+
```
|
|
279
261
|
|
|
280
262
|
## API
|
|
281
263
|
|
package/package.json
CHANGED