@vonage/client-sdk-video 2.25.2

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 ADDED
@@ -0,0 +1,63 @@
1
+ # OpenTok.js
2
+
3
+ [![npm version](https://badge.fury.io/js/%40opentok%2Fclient.svg)](https://badge.fury.io/js/%40opentok%2Fclient)
4
+
5
+ The OpenTok.js library lets you use OpenTok-powered video sessions on the web.
6
+
7
+ ## Installation
8
+
9
+ ```sh
10
+ yarn add @opentok/client
11
+ ```
12
+
13
+ or
14
+
15
+ ```sh
16
+ npm install --save @opentok/client
17
+ ```
18
+
19
+ ## Usage
20
+
21
+ ### As a module
22
+
23
+ The library is bundled as a standalone UMD module so it is CommonJS compatible.
24
+
25
+ Create your application file `app.js`:
26
+
27
+ ```js
28
+ const OT = require('@opentok/client');
29
+ const publisher = OT.initPublisher();
30
+ ```
31
+
32
+ Bundle the application with your favourite bundler. For browserify just run:
33
+
34
+ ```sh
35
+ browserify app.js > bundle.js
36
+ ```
37
+
38
+ And include the bundle in your webpage:
39
+
40
+ ```html
41
+ <script src="bundle.js"></script>
42
+ ```
43
+
44
+ Source maps can be found in `dist/js/`. Make sure your bundler is configured to include them if you need to generate source maps.
45
+
46
+ ### As a global window object
47
+
48
+ Include the `dist/js/opentok.min.js` script in your webpage.
49
+
50
+ Then use the `OT` object exposed in the global scope.
51
+
52
+ ```html
53
+ <script src="node_modules/@opentok/client/dist/js/opentok.min.js"></script>
54
+ <script>
55
+ const publisher = OT.initPublisher();
56
+ </script>
57
+ ```
58
+
59
+ *Note:* OpenTok.js automatically loads CSS and image files from the TokBox CDN when included in a webpage.
60
+
61
+ ## Documentation
62
+
63
+ The API reference and tutorials can be found at https://tokbox.com/developer/sdks/js/
@@ -0,0 +1,580 @@
1
+ declare namespace OT {
2
+ type MediaProcessorConnector = {
3
+ setTrack: (track: MediaStreamTrack) => Promise<MediaStreamTrack>;
4
+ destroy: () => Promise<void>;
5
+ };
6
+
7
+ export type OTError = {
8
+ name: string;
9
+ message: string;
10
+ };
11
+
12
+ export type Dimensions = {
13
+ width: number;
14
+ height: number;
15
+ }
16
+
17
+ export type ScreenSharingCapabilityResponse = {
18
+ extensionInstalled?: boolean;
19
+ supported: boolean;
20
+ supportedSources: {
21
+ application?: boolean;
22
+ screen?: boolean;
23
+ window?: boolean;
24
+ };
25
+ extensionRequired?: string;
26
+ extensionRegistered?: boolean;
27
+ };
28
+
29
+ export function checkScreenSharingCapability(
30
+ callback: (response: ScreenSharingCapabilityResponse) => void
31
+ ): void;
32
+
33
+ export function checkSystemRequirements(): number;
34
+
35
+ export type Device = {
36
+ kind: 'audioInput' | 'videoInput';
37
+ deviceId: string;
38
+ label: string;
39
+ };
40
+
41
+ export type AudioOutputDevice = {
42
+ deviceId: string | null | undefined;
43
+ label: string | null;
44
+ };
45
+
46
+ export type IceConfig = {
47
+ includeServers: 'all' | 'custom';
48
+ transportPolicy: 'all' | 'relay';
49
+ customServers: Array<{
50
+ urls: string | string[];
51
+ username?: string;
52
+ credential?: string;
53
+ }>;
54
+ };
55
+
56
+ export function getDevices(
57
+ callback: (error: OTError | undefined, devices?: Device[]) => void
58
+ ): void;
59
+
60
+ export function getAudioOutputDevices(): Promise<AudioOutputDevice[]>;
61
+
62
+ export function setProxyUrl(proxyUrl: string): void;
63
+
64
+ export function getSupportedCodecs(): Promise<{ videoEncoders: ('H264' | 'VP8')[], videoDecoders: ('H264' | 'VP8')[] }>;
65
+
66
+ export function hasMediaProcessorSupport(): boolean;
67
+
68
+ export function hasEndToEndEncryptionSupport(): boolean;
69
+
70
+ export type WidgetStyle = {
71
+ audioLevelDisplayMode: 'auto' | 'on' | 'off';
72
+ backgroundImageURI: string;
73
+ buttonDisplayMode: 'auto' | 'on' | 'off';
74
+ nameDisplayMode: 'auto' | 'on' | 'off';
75
+ };
76
+
77
+ export type WidgetProperties = {
78
+ fitMode?: 'cover' | 'contain';
79
+ insertDefaultUI?: boolean;
80
+ insertMode?: 'replace' | 'after' | 'before' | 'append';
81
+ showControls?: boolean;
82
+ width?: string | number;
83
+ height?: string | number;
84
+ };
85
+
86
+ export type PublisherStyle = WidgetStyle & {
87
+ archiveStatusDisplayMode: 'auto' | 'off';
88
+ };
89
+
90
+ export type GetUserMediaProperties = {
91
+ audioSource?: string | null | boolean | MediaStreamTrack;
92
+ disableAudioProcessing?: boolean;
93
+ echoCancellation?: boolean;
94
+ noiseSuppression?: boolean;
95
+ autoGainControl?: boolean;
96
+ facingMode?: 'user' | 'environment' | 'left' | 'right';
97
+ frameRate?: 30 | 15 | 7 | 1;
98
+ maxResolution?: Dimensions;
99
+ resolution?: (
100
+ '1920x1080' |
101
+ '1280x960' |
102
+ '1280x720' |
103
+ '640x480' |
104
+ '640x360' |
105
+ '320x240' |
106
+ '320x180'
107
+ );
108
+ videoSource?: string | null | boolean | MediaStreamTrack;
109
+ };
110
+
111
+ export type VideoContentHint = "text" | "detail" | "motion" | "";
112
+
113
+ export type BackgroundBlurFilter = {
114
+ type: 'backgroundBlur';
115
+ blurStrength?: 'low' | 'high';
116
+ };
117
+
118
+ export type BackgroundReplacementFilter = {
119
+ type: 'backgroundReplacement';
120
+ backgroundImgUrl: string;
121
+ };
122
+
123
+ export type VideoFilter = BackgroundBlurFilter | BackgroundReplacementFilter;
124
+
125
+ export type PublisherProperties = WidgetProperties & GetUserMediaProperties & {
126
+ audioBitrate?: number;
127
+ audioFallbackEnabled?: boolean;
128
+ initials?: string;
129
+ mirror?: boolean;
130
+ name?: string;
131
+ publishAudio?: boolean;
132
+ publishVideo?: boolean;
133
+ publishCaptions?: boolean;
134
+ scalableScreenshare?: boolean;
135
+ scalableVideo?: boolean;
136
+ style?: Partial<PublisherStyle>;
137
+ videoContentHint?: VideoContentHint;
138
+ enableDtx?: boolean;
139
+ enableStereo?: boolean;
140
+ videoFilter?: VideoFilter;
141
+ };
142
+
143
+ export type SubscriberStyle = WidgetStyle & {
144
+ videoDisabledDisplayMode: 'auto' | 'on' | 'off';
145
+ audioBlockedDisplayMode: 'auto' | 'on' | 'off';
146
+ };
147
+
148
+ export type SubscriberProperties = WidgetProperties & {
149
+ audioVolume?: number;
150
+ preferredFrameRate?: number;
151
+ preferredResolution?: Dimensions;
152
+ style?: Partial<SubscriberStyle>;
153
+ subscribeToAudio?: boolean;
154
+ subscribeToVideo?: boolean;
155
+ testNetwork?: boolean;
156
+ };
157
+
158
+ export class Connection {
159
+ connectionId: string;
160
+ creationTime: number;
161
+ data: string;
162
+ }
163
+
164
+ export class Stream {
165
+ connection: Connection;
166
+ creationTime: number;
167
+ frameRate: number;
168
+ hasAudio: boolean;
169
+ hasVideo: boolean;
170
+ initials: string;
171
+ name: string;
172
+ streamId: string;
173
+ videoDimensions: {
174
+ width: number;
175
+ height: number;
176
+ };
177
+ videoType: 'camera' | 'screen' | 'custom' | undefined;
178
+ }
179
+
180
+ export type Event<Type, Target> = {
181
+ type: Type;
182
+ cancelable: boolean;
183
+ target: Target;
184
+
185
+ isDefaultPrevented(): boolean;
186
+ preventDefault(): void;
187
+ };
188
+
189
+ export type ExceptionEvent = Event<'exception', {}> & {
190
+ code: number;
191
+ message: string;
192
+ title: string;
193
+ };
194
+
195
+ export type VideoDimensionsChangedEvent<Target> = Event<'videoDimensionsChanged', Target> & {
196
+ oldValue: Dimensions;
197
+ newValue: Dimensions;
198
+ };
199
+
200
+ class OTEventEmitter<EventMap> {
201
+ on<EventName extends keyof EventMap>(
202
+ eventName: EventName,
203
+ callback: (event: EventMap[EventName]) => void,
204
+ context?: object
205
+ ): void;
206
+
207
+ on(
208
+ eventName: string,
209
+ callback: (event: Event<string, any>) => void,
210
+ context?: object
211
+ ): void;
212
+
213
+ on(
214
+ eventMap: object,
215
+ context?: object
216
+ ): void;
217
+
218
+ once<EventName extends keyof EventMap>(
219
+ eventName: EventName,
220
+ callback: (event: EventMap[EventName]) => void,
221
+ context?: object
222
+ ): void;
223
+
224
+ once(
225
+ eventName: string,
226
+ callback: (event: Event<string, any>) => void,
227
+ context?: object
228
+ ): void;
229
+
230
+ once(
231
+ eventMap: object,
232
+ context?: object
233
+ ): void;
234
+
235
+ off<EventName extends keyof EventMap>(
236
+ eventName?: EventName,
237
+ callback?: (event: EventMap[EventName]) => void,
238
+ context?: object
239
+ ): void;
240
+
241
+ off(
242
+ eventName?: string,
243
+ callback?: (event: Event<string, any>) => void,
244
+ context?: object
245
+ ): void;
246
+
247
+ off(
248
+ eventMap: object,
249
+ context?: object
250
+ ): void;
251
+ }
252
+
253
+ export class Publisher extends OTEventEmitter<{
254
+ accessAllowed: Event<'accessAllowed', Publisher>;
255
+ accessDenied: Event<'accessDenied', Publisher>;
256
+ accessDialogClosed: Event<'accessDialogClosed', Publisher>;
257
+ accessDialogOpened: Event<'accessDialogOpened', Publisher>;
258
+
259
+ audioLevelUpdated: Event<'audioLevelUpdated', Publisher> & {
260
+ audioLevel: number
261
+ };
262
+
263
+ destroyed: Event<'destroyed', Publisher>;
264
+
265
+ mediaStopped: Event<'mediaStopped', Publisher> & {
266
+ track: MediaStreamTrack | undefined
267
+ };
268
+
269
+ streamCreated: Event<'streamCreated', Publisher> & {
270
+ stream: Stream;
271
+ };
272
+
273
+ streamDestroyed: Event<'streamDestroyed', Publisher> & {
274
+ stream: Stream;
275
+ reason: string;
276
+ };
277
+
278
+ videoDimensionsChanged: VideoDimensionsChangedEvent<Publisher>;
279
+
280
+ videoElementCreated: Event<'videoElementCreated', Publisher> & {
281
+ element: HTMLVideoElement | HTMLObjectElement;
282
+ };
283
+
284
+ muteForced: Event<'muteForced', Publisher>;
285
+ }> {
286
+ accessAllowed: boolean;
287
+ element?: HTMLElement | undefined;
288
+ id?: string;
289
+ stream?: Stream;
290
+ session?: Session;
291
+
292
+ destroy(): void;
293
+ getImgData(): string | null;
294
+ getStats(callback: (error?: OTError, stats?: PublisherStatsArr) => void): void;
295
+ getRtcStatsReport(): Promise<PublisherRtcStatsReportArr>;
296
+ getStyle(): PublisherStyle;
297
+ applyVideoFilter(videoFilter: VideoFilter): Promise<void>;
298
+ getVideoFilter(): VideoFilter | null;
299
+ clearVideoFilter(): Promise<void>;
300
+ publishAudio(value: boolean): void;
301
+ publishVideo(value: boolean): void;
302
+ publishCaptions(value: boolean): void;
303
+ cycleVideo(): Promise<{ deviceId: string }>;
304
+ setAudioSource(audioSource:string | MediaStreamTrack): Promise<undefined>;
305
+ getAudioSource(): MediaStreamTrack;
306
+ setVideoSource(videoSourceId: string): Promise<undefined>;
307
+ getVideoContentHint(): VideoContentHint;
308
+ setVideoContentHint(hint: VideoContentHint): void;
309
+ getVideoSource(): {deviceId: string | null, type: string | null, track: MediaStreamTrack | null};
310
+ setStyle<Style extends keyof PublisherStyle>(style: Style, value: PublisherStyle[Style]): void;
311
+ videoWidth(): number | undefined;
312
+ videoHeight(): number | undefined;
313
+ setVideoMediaProcessorConnector(connector: MediaProcessorConnector | null): Promise<void>;
314
+ setAudioMediaProcessorConnector(connector: MediaProcessorConnector | null): Promise<void>;
315
+ }
316
+
317
+ export function getUserMedia(
318
+ properties?: GetUserMediaProperties
319
+ ): Promise<MediaStream>;
320
+
321
+ export function initPublisher(
322
+ targetElement?: HTMLElement | string,
323
+ properties?: PublisherProperties,
324
+ callback?: (error?: OTError) => void
325
+ ): Publisher;
326
+
327
+ export function log(message: string): void;
328
+
329
+ export function off(
330
+ eventName?: 'exception',
331
+ callback?: (event: ExceptionEvent) => void,
332
+ context?: object
333
+ ): void;
334
+
335
+ export function on(
336
+ eventName: 'exception',
337
+ callback: (event: ExceptionEvent) => void,
338
+ context?: object
339
+ ): void;
340
+
341
+ export function once(
342
+ eventName: 'exception',
343
+ callback: (event: ExceptionEvent) => void,
344
+ context?: object
345
+ ): void;
346
+
347
+ export class Session extends OTEventEmitter<{
348
+ archiveStarted: Event<'archiveStarted', Session> & {
349
+ id: string;
350
+ name: string;
351
+ };
352
+
353
+ archiveStopped: Event<'archiveStopped', Session> & {
354
+ id: string;
355
+ name: string;
356
+ };
357
+
358
+ connectionCreated: Event<'connectionCreated', Session> & {
359
+ connection: Connection;
360
+ };
361
+
362
+ connectionDestroyed: Event<'connectionDestroyed', Session> & {
363
+ connection: Connection;
364
+ reason: string;
365
+ };
366
+
367
+ sessionConnected: Event<'sessionConnected', Session>;
368
+
369
+ sessionDisconnected: Event<'sessionDisconnected', Session> & {
370
+ reason: string;
371
+ };
372
+
373
+ sessionReconnected: Event<'sessionReconnected', Session>;
374
+ sessionReconnecting: Event<'sessionReconnecting', Session>;
375
+
376
+ signal: Event<'signal', Session> & {
377
+ type?: string;
378
+ data?: string;
379
+ from: Connection | null;
380
+ };
381
+
382
+ streamCreated: Event<'streamCreated', Session> & {
383
+ stream: Stream;
384
+ };
385
+
386
+ streamDestroyed: Event<'streamDestroyed', Session> & {
387
+ stream: Stream;
388
+ reason: string;
389
+ };
390
+
391
+ streamPropertyChanged: (
392
+ Event<'streamPropertyChanged', Session> & {
393
+ stream: Stream;
394
+ } & (
395
+ { changedProperty: 'hasAudio'; oldValue: boolean; newValue: boolean; } |
396
+ { changedProperty: 'hasVideo'; oldValue: boolean; newValue: boolean; } |
397
+ { changedProperty: 'videoDimensions'; oldValue: Dimensions; newValue: Dimensions; }
398
+ )
399
+ );
400
+
401
+ muteForced: Event<'muteForced', Session>;
402
+ }> {
403
+ capabilities: {
404
+ forceDisconnect: number;
405
+ forceUnpublish: number;
406
+ forceMute: number;
407
+ publish: number;
408
+ subscribe: number;
409
+ };
410
+
411
+ connection?: Connection;
412
+ sessionId: string;
413
+
414
+ connect(token: string, callback: (error?: OTError) => void): void;
415
+ disconnect(): void;
416
+ forceDisconnect(connection: Connection, callback: (error?: OTError) => void): void;
417
+ forceUnpublish(stream: Stream, callback: (error?: OTError) => void): void;
418
+ forceMuteStream(stream: Stream): Promise<void>;
419
+ forceMuteAll(excludedStreams?: Stream[]): Promise<void>;
420
+ getPublisherForStream(stream: Stream): Publisher | undefined;
421
+ getSubscribersForStream(stream: Stream): [Subscriber];
422
+ publish(publisher: Publisher, callback?: (error?: OTError) => void): Publisher;
423
+ publish(targetElement: string | HTMLElement, properties?: PublisherProperties, callback?: (error?: OTError) => void): Publisher;
424
+ setEncryptionSecret(secret: string): Promise<void>;
425
+ setIceConfig(iceConfig: IceConfig): Promise <void>;
426
+
427
+ signal(
428
+ signal: { type?: string, data?: string, to?: Connection },
429
+ callback: (error?: OTError) => void
430
+ ): void;
431
+
432
+ subscribe(
433
+ stream: Stream,
434
+ targetElement?: HTMLElement | string,
435
+ properties?: SubscriberProperties,
436
+ callback?: (error?: OTError) => void
437
+ ): Subscriber;
438
+
439
+ unpublish(publisher: Publisher): void;
440
+ unsubscribe(subscriber: Subscriber): void;
441
+ }
442
+
443
+ export function initSession(
444
+ partnerId: string,
445
+ sessionId: string,
446
+ options?: {
447
+ connectionEventsSuppressed?: boolean;
448
+ iceConfig?: IceConfig;
449
+ ipWhitelist?: boolean;
450
+ encryptionSecret?: string;
451
+ }
452
+ ): Session;
453
+
454
+ export type IncomingTrackStats = {
455
+ bytesReceived: number;
456
+ packetsLost: number;
457
+ packetsReceived: number;
458
+ };
459
+
460
+ export type OutgoingTrackStats = {
461
+ bytesSent: number;
462
+ packetsLost: number;
463
+ packetsSent: number;
464
+ }
465
+
466
+ export type SubscriberStats = {
467
+ audio: IncomingTrackStats;
468
+ video: IncomingTrackStats & { frameRate: number; };
469
+ timestamp: number;
470
+ }
471
+
472
+ export type PublisherStats = {
473
+ audio: OutgoingTrackStats;
474
+ video: OutgoingTrackStats & { frameRate: number; };
475
+ timestamp: number;
476
+ }
477
+
478
+ export type PublisherStatContainer = {
479
+ subscriberId?: string,
480
+ connectionId?: string,
481
+ stats: PublisherStats
482
+ }
483
+
484
+ export type PublisherStatsArr = PublisherStatContainer[];
485
+
486
+ export type PublisherRtcStatsReportContainer = {
487
+ subscriberId?: string,
488
+ connectionId?: string,
489
+ rtcStatsReport: RTCStatsReport
490
+ }
491
+
492
+ export type PublisherRtcStatsReportArr = PublisherRtcStatsReportContainer[];
493
+
494
+ export class Subscriber extends OTEventEmitter<{
495
+ audioLevelUpdated: Event<'audioLevelUpdated', Subscriber> & {
496
+ audioLevel: number
497
+ };
498
+
499
+ connected: Event<'connected', Subscriber>;
500
+
501
+ captionReceived: Event<'captionReceived', Subscriber> & {
502
+ streamId: string;
503
+ caption: string;
504
+ isFinal: boolean;
505
+ };
506
+
507
+ destroyed: Event<'destroyed', Subscriber> & {
508
+ reason: string;
509
+ };
510
+
511
+ encryptionSecretMismatch: Event<'encryptionSecretMismatch', Subscriber>;
512
+
513
+ encryptionSecretMatch: Event<'encryptionSecretMatch', Subscriber>;
514
+
515
+ videoDimensionsChanged: VideoDimensionsChangedEvent<Subscriber>;
516
+
517
+ videoDisabled: Event<'videoDisabled', Subscriber> & {
518
+ reason: string;
519
+ };
520
+
521
+ videoDisableWarning: Event<'videoDisableWarning', Subscriber>;
522
+ videoDisableWarningLifted: Event<'videoDisableWarningLifted', Subscriber>;
523
+
524
+ videoElementCreated: Event<'videoElementCreated', Subscriber> & {
525
+ element: HTMLVideoElement | HTMLObjectElement;
526
+ };
527
+
528
+ videoEnabled: Event<'videoEnabled', Subscriber> & {
529
+ reason: string;
530
+ };
531
+ }> {
532
+ element?: HTMLElement;
533
+ id?: string;
534
+ stream?: Stream;
535
+
536
+ getAudioVolume(): number;
537
+ getImgData(): string | null;
538
+ getStats(callback: (error?: OTError, stats?: SubscriberStats) => void): void;
539
+ getRtcStatsReport(): Promise<RTCStatsReport>;
540
+ subscribeToCaptions(value: boolean): Promise<void>;
541
+ isSubscribedToCaptions(): boolean;
542
+ isAudioBlocked(): boolean;
543
+ restrictFrameRate(value: boolean): void;
544
+ setAudioVolume(volume: number): void;
545
+ setPreferredFrameRate(frameRate: number): void;
546
+ setPreferredResolution(resolution: Dimensions): void;
547
+ subscribeToAudio(value: boolean): void;
548
+ subscribeToVideo(value: boolean): void;
549
+
550
+ setStyle<Style extends keyof SubscriberStyle>(
551
+ style: Style,
552
+ value: SubscriberStyle[Style]
553
+ ): void;
554
+
555
+ videoHeight(): number | undefined;
556
+ videoWidth(): number | undefined;
557
+ }
558
+
559
+ export function registerScreenSharingExtension(
560
+ kind: string,
561
+ id: string,
562
+ version: number
563
+ ): void;
564
+
565
+ export function reportIssue(callback: (error?: OTError, reportId?: string) => void): void;
566
+
567
+ export function setAudioOutputDevice(deviceId: string): Promise<void>;
568
+
569
+ export function getActiveAudioOutputDevice(): Promise<AudioOutputDevice>;
570
+
571
+ export function setLogLevel(level: number): void;
572
+
573
+ export function upgradeSystemRequirements(): void;
574
+
575
+ export function unblockAudio(): Promise<undefined>;
576
+ }
577
+
578
+ declare module "@opentok/client" {
579
+ export = OT;
580
+ }