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

@@ -94,7 +94,7 @@ export class LocalParticipant extends Participant {
     tracks: Map<Track.SID, LocalTrackPublication>;
     videoTracks: Map<Track.SID, LocalVideoTrackPublication>;
 
-    publishTrack(localTrack: LocalTrack): Promise<LocalTrackPublication>;
+    publishTrack(track: LocalTrack): Promise<LocalTrackPublication>;
     publishTrack(
         mediaStreamTrack: MediaStreamTrack, options?: LocalTrackOptions,
     ): Promise<LocalTrackPublication>;
@@ -102,6 +102,8 @@ export class LocalParticipant extends Participant {
         tracks: LocalTrack[] | MediaStreamTrack[],
     ): Promise<LocalTrackPublication[]>;
     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;

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();