From c472319d6ddd65c6fdd3e4c8213ea87a67dfe619 Mon Sep 17 00:00:00 2001 From: Dario Blanco Date: Fri, 14 Sep 2018 19:39:32 +0200 Subject: [PATCH] twilio-video 2.0.0-beta1 types fix (#28882) After developing a bit more the production application with the new types, and had the need of using manual local tracks, I discovered a few fixes to be made: - Two missing functions in `LocalParticipant`: `unpublishTrack` and `unpublishTracks`. See [LocalParticipant documentation](https://media.twiliocdn.com/sdk/js/video/releases/2.0.0-beta1/docs/LocalParticipant.html). - When creating a single track using `createLocalVideoTrack` or `createLocalAudioTrack`, the documentation defines a non optional `logLevel`, but the examples don't specify it and the code works without it. See [Examples](https://media.twiliocdn.com/sdk/js/video/releases/2.0.0-beta1/docs/global.html#createLocalVideoTrack__anchor). Therefore, `logLevel` is optional in `CreateLocalTrackOptions` as well (and documented in the code). - `CreateLocalTrackOptions` should extend `MediaTrackConstraints`. Currently, it will complain when writing our own video and audio constraints. [CreateLocalTrackOptions](https://media.twiliocdn.com/sdk/js/video/releases/2.0.0-beta1/docs/global.html#CreateLocalTrackOptions) - [x] Use a meaningful title for the pull request. Include the name of the package modified. - [x] Test the change in your own code. (Compile and run.) - [x] Add or edit tests to reflect the change. (Run with `npm test`.) - [x] Follow the advice from the [readme](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/README.md#make-a-pull-request). - [x] Avoid [common mistakes](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/README.md#common-mistakes). - [x] Run `npm run lint package-name` (or `tsc` if no `tslint.json` is present). If changing an existing definition: - [x] Provide a URL to documentation or source code which provides context for the suggested changes: https://media.twiliocdn.com/sdk/js/video/releases/2.0.0-beta1/docs - [x] Increase the version number in the header if appropriate. - [x] If you are making substantial changes, consider adding a `tslint.json` containing `{ "extends": "dtslint/dt.json" }`. --- types/twilio-video/index.d.ts | 11 ++++--- types/twilio-video/twilio-video-tests.ts | 42 ++++++++++++++++++++---- 2 files changed, 43 insertions(+), 10 deletions(-) diff --git a/types/twilio-video/index.d.ts b/types/twilio-video/index.d.ts index cc65da2c2c..83d3d27111 100644 --- a/types/twilio-video/index.d.ts +++ b/types/twilio-video/index.d.ts @@ -94,7 +94,7 @@ export class LocalParticipant extends Participant { tracks: Map; videoTracks: Map; - publishTrack(localTrack: LocalTrack): Promise; + publishTrack(track: LocalTrack): Promise; publishTrack( mediaStreamTrack: MediaStreamTrack, options?: LocalTrackOptions, ): Promise; @@ -102,6 +102,8 @@ export class LocalParticipant extends Participant { tracks: LocalTrack[] | MediaStreamTrack[], ): Promise; setParameters(encodingParameters?: EncodingParameters | null): LocalParticipant; + unpublishTrack(track: LocalTrack): LocalTrackPublication; + unpublishTracks(tracks: LocalTrack): LocalTrackPublication[]; } export class LocalTrackPublication extends TrackPublication { isTrackEnabled: boolean; @@ -472,10 +474,11 @@ export interface ConnectOptions { tracks?: LocalTrack[] | MediaStreamTrack[]; video?: boolean | CreateLocalTrackOptions; } -export interface CreateLocalTrackOptions { - logLevel: LogLevel | LogLevels; +export interface CreateLocalTrackOptions extends MediaTrackConstraints { + // In API reference logLevel is not optional, but in the Twilio examples it is + logLevel?: LogLevel | LogLevels; name?: string; - workaroundWebKitBug180748?: boolean; // Lol + workaroundWebKitBug180748?: boolean; } export interface CreateLocalTracksOptions { audio?: boolean | CreateLocalTrackOptions; diff --git a/types/twilio-video/twilio-video-tests.ts b/types/twilio-video/twilio-video-tests.ts index b5cfe43e01..b06bf9b168 100644 --- a/types/twilio-video/twilio-video-tests.ts +++ b/types/twilio-video/twilio-video-tests.ts @@ -2,12 +2,37 @@ import * as Video from 'twilio-video'; // Examples taken from https://twilio.github.io/twilio-video/ (v2.x) -Video.connect('$TOKEN', { name: 'room-name' }).then(room => { - room.participants.forEach(participantConnected); - room.on('participantConnected', participantConnected); - room.on('participantDisconnected', participantDisconnected); - room.once('disconnected', error => room.participants.forEach(participantDisconnected)); -}); +let room: Video.Room | null = null; +let localVideoTrack: Video.LocalVideoTrack | null = null; +let localAudioTrack: Video.LocalAudioTrack | null = null; + +async function initRoom() { + // Connect to Twilio without creating audio and video track + room = await Video.connect('$TOKEN', { name: 'room-name', video: false, audio: false }); + // Create local video track from default input + localVideoTrack = await Video.createLocalVideoTrack({ name: 'camera' }); + // Create local audio track from default input + localAudioTrack = await Video.createLocalAudioTrack({ name: 'microphone' }); + // Publish audio track + room.localParticipant.publishTrack(localAudioTrack); + // Subscribe to remote participant tracks + room.participants.forEach(participantConnected); + // Set up listeners + room.on('participantConnected', participantConnected); + room.on('participantDisconnected', participantDisconnected); + room.once('disconnected', (room: Video.Room, error: Video.TwilioError) => { + room.participants.forEach(participantDisconnected); + room.localParticipant.tracks.forEach((publication: Video.LocalTrackPublication) => { + publication.unpublish(); + if (publication.track.kind !== 'data') trackUnsubscribed(publication.track); + }); + }); +} + +function unpublishTracks() { + if (room && localVideoTrack) room.localParticipant.unpublishTrack(localVideoTrack); + if (room && localAudioTrack) room.localParticipant.unpublishTrack(localAudioTrack); +} function participantConnected(participant: Video.Participant) { participant.on('trackSubscribed', trackSubscribed); @@ -43,3 +68,8 @@ function trackUnsubscribed(track: Video.VideoTrack | Video.AudioTrack) { function insertDomElement(element: any) { // Do something with the dom element } + +initRoom(); +// Do something with your video +// You can call unpublish tracks +unpublishTracks();