livekit-client 0.15.0 → 0.15.1

package/dist/room/track/create.js

@@ -0,0 +1,125 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createLocalScreenTracks = exports.createLocalAudioTrack = exports.createLocalVideoTrack = exports.createLocalTracks = void 0;
+const errors_1 = require("../errors");
+const publishUtils_1 = require("../participant/publishUtils");
+const defaults_1 = require("./defaults");
+const LocalAudioTrack_1 = __importDefault(require("./LocalAudioTrack"));
+const LocalVideoTrack_1 = __importDefault(require("./LocalVideoTrack"));
+const options_1 = require("./options");
+const Track_1 = require("./Track");
+const utils_1 = require("./utils");
+/**
+ * Creates a local video and audio track at the same time. When acquiring both
+ * audio and video tracks together, it'll display a single permission prompt to
+ * the user instead of two separate ones.
+ * @param options
+ */
+function createLocalTracks(options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const opts = utils_1.mergeDefaultOptions(options, defaults_1.audioDefaults, defaults_1.videoDefaults);
+        const constraints = utils_1.constraintsForOptions(opts);
+        const stream = yield navigator.mediaDevices.getUserMedia(constraints);
+        return stream.getTracks().map((mediaStreamTrack) => {
+            const isAudio = mediaStreamTrack.kind === 'audio';
+            let trackOptions = isAudio ? options.audio : options.video;
+            if (typeof trackOptions === 'boolean' || !trackOptions) {
+                trackOptions = {};
+            }
+            let trackConstraints;
+            const conOrBool = isAudio ? constraints.audio : constraints.video;
+            if (typeof conOrBool !== 'boolean') {
+                trackConstraints = conOrBool;
+            }
+            const track = publishUtils_1.mediaTrackToLocalTrack(mediaStreamTrack, trackConstraints);
+            if (track.kind === Track_1.Track.Kind.Video) {
+                track.source = Track_1.Track.Source.Camera;
+            }
+            else if (track.kind === Track_1.Track.Kind.Audio) {
+                track.source = Track_1.Track.Source.Microphone;
+            }
+            return track;
+        });
+    });
+}
+exports.createLocalTracks = createLocalTracks;
+/**
+ * Creates a [[LocalVideoTrack]] with getUserMedia()
+ * @param options
+ */
+function createLocalVideoTrack(options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const tracks = yield createLocalTracks({
+            audio: false,
+            video: options,
+        });
+        return tracks[0];
+    });
+}
+exports.createLocalVideoTrack = createLocalVideoTrack;
+function createLocalAudioTrack(options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const tracks = yield createLocalTracks({
+            audio: options,
+            video: false,
+        });
+        return tracks[0];
+    });
+}
+exports.createLocalAudioTrack = createLocalAudioTrack;
+/**
+ * Creates a screen capture tracks with getDisplayMedia().
+ * A LocalVideoTrack is always created and returned.
+ * If { audio: true }, and the browser supports audio capture, a LocalAudioTrack is also created.
+ */
+function createLocalScreenTracks(options) {
+    var _a;
+    return __awaiter(this, void 0, void 0, function* () {
+        if (options === undefined) {
+            options = {};
+        }
+        if (options.resolution === undefined) {
+            options.resolution = options_1.VideoPresets.fhd.resolution;
+        }
+        let videoConstraints = true;
+        if (options.resolution) {
+            videoConstraints = {
+                width: options.resolution.width,
+                height: options.resolution.height,
+            };
+        }
+        // typescript definition is missing getDisplayMedia: https://github.com/microsoft/TypeScript/issues/33232
+        // @ts-ignore
+        const stream = yield navigator.mediaDevices.getDisplayMedia({
+            audio: (_a = options.audio) !== null && _a !== void 0 ? _a : false,
+            video: videoConstraints,
+        });
+        const tracks = stream.getVideoTracks();
+        if (tracks.length === 0) {
+            throw new errors_1.TrackInvalidError('no video track found');
+        }
+        const screenVideo = new LocalVideoTrack_1.default(tracks[0]);
+        screenVideo.source = Track_1.Track.Source.ScreenShare;
+        const localTracks = [screenVideo];
+        if (stream.getAudioTracks().length > 0) {
+            const screenAudio = new LocalAudioTrack_1.default(stream.getAudioTracks()[0]);
+            screenAudio.source = Track_1.Track.Source.ScreenShareAudio;
+            localTracks.push(screenAudio);
+        }
+        return localTracks;
+    });
+}
+exports.createLocalScreenTracks = createLocalScreenTracks;
+//# sourceMappingURL=create.js.map

package/dist/room/track/create.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../../../src/room/track/create.ts"],"names":[],"mappings":"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"}

package/dist/room/track/defaults.d.ts

@@ -0,0 +1,4 @@
+import { AudioCaptureOptions, TrackPublishDefaults, VideoCaptureOptions } from './options';
+export declare const publishDefaults: TrackPublishDefaults;
+export declare const audioDefaults: AudioCaptureOptions;
+export declare const videoDefaults: VideoCaptureOptions;

package/dist/room/track/defaults.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.videoDefaults = exports.audioDefaults = exports.publishDefaults = void 0;
+const options_1 = require("./options");
+exports.publishDefaults = {
+    audioBitrate: options_1.AudioPresets.speech.maxBitrate,
+    dtx: true,
+    simulcast: true,
+    screenShareEncoding: options_1.ScreenSharePresets.hd_15.encoding,
+    stopMicTrackOnMute: false,
+};
+exports.audioDefaults = {
+    autoGainControl: true,
+    channelCount: 1,
+    echoCancellation: true,
+    noiseSuppression: true,
+};
+exports.videoDefaults = {
+    resolution: options_1.VideoPresets.qhd.resolution,
+};
+//# sourceMappingURL=defaults.js.map

package/dist/room/track/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../src/room/track/defaults.ts"],"names":[],"mappings":";;;AAAA,uCAGmB;AAEN,QAAA,eAAe,GAAyB;IACnD,YAAY,EAAE,sBAAY,CAAC,MAAM,CAAC,UAAU;IAC5C,GAAG,EAAE,IAAI;IACT,SAAS,EAAE,IAAI;IACf,mBAAmB,EAAE,4BAAkB,CAAC,KAAK,CAAC,QAAQ;IACtD,kBAAkB,EAAE,KAAK;CAC1B,CAAC;AAEW,QAAA,aAAa,GAAwB;IAChD,eAAe,EAAE,IAAI;IACrB,YAAY,EAAE,CAAC;IACf,gBAAgB,EAAE,IAAI;IACtB,gBAAgB,EAAE,IAAI;CACvB,CAAC;AAEW,QAAA,aAAa,GAAwB;IAChD,UAAU,EAAE,sBAAY,CAAC,GAAG,CAAC,UAAU;CACxC,CAAC"}

package/dist/room/utils.d.ts

@@ -1,6 +1,6 @@
 export declare function unpackStreamId(packed: string): string[];
-export declare function useLegacyAPI(): boolean;
 export declare function sleep(duration: number): Promise<void>;
+export declare function isFireFox(): boolean;
 export declare const getResizeObserver: () => ResizeObserver;
 export declare const getIntersectionObserver: () => IntersectionObserver;
 export interface ObservableMediaElement extends HTMLMediaElement {

package/dist/room/utils.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getIntersectionObserver = exports.getResizeObserver = exports.sleep = exports.useLegacyAPI = exports.unpackStreamId = void 0;
+exports.getIntersectionObserver = exports.getResizeObserver = exports.isFireFox = exports.sleep = exports.unpackStreamId = void 0;
 const separator = '|';
 function unpackStreamId(packed) {
     const parts = packed.split(separator);
@@ -19,17 +19,16 @@ function unpackStreamId(packed) {
     return [packed, ''];
 }
 exports.unpackStreamId = unpackStreamId;
-function useLegacyAPI() {
-    // react native is using old stream based API
-    return typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
-}
-exports.useLegacyAPI = useLegacyAPI;
 function sleep(duration) {
     return __awaiter(this, void 0, void 0, function* () {
         return new Promise((resolve) => setTimeout(resolve, duration));
     });
 }
 exports.sleep = sleep;
+function isFireFox() {
+    return navigator.userAgent.indexOf('Firefox') !== -1;
+}
+exports.isFireFox = isFireFox;
 function roDispatchCallback(entries) {
     for (const entry of entries) {
         entry.target.handleResize(entry);

package/dist/room/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/room/utils.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,GAAG,CAAC;AAEtB,SAAgB,cAAc,CAAC,MAAc;IAC3C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IACtC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;QACpB,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;KACvD;IACD,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AACtB,CAAC;AAND,wCAMC;AAED,SAAgB,YAAY;IAC1B,6CAA6C;IAC7C,OAAO,OAAO,SAAS,KAAK,WAAW,IAAI,SAAS,CAAC,OAAO,KAAK,aAAa,CAAC;AACjF,CAAC;AAHD,oCAGC;AAED,SAAsB,KAAK,CAAC,QAAgB;;QAC1C,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IACjE,CAAC;CAAA;AAFD,sBAEC;AAED,SAAS,kBAAkB,CAAC,OAA8B;IACxD,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;QAC1B,KAAK,CAAC,MAAiC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;KAC9D;AACH,CAAC;AAED,SAAS,kBAAkB,CAAC,OAAoC;IAC9D,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;QAC1B,KAAK,CAAC,MAAiC,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC;KACzE;AACH,CAAC;AAED,IAAI,cAAc,GAA0B,IAAI,CAAC;AAC1C,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,IAAI,CAAC,cAAc;QAAE,cAAc,GAAG,IAAI,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC7E,OAAO,cAAc,CAAC;AACxB,CAAC,CAAC;AAHW,QAAA,iBAAiB,qBAG5B;AAEF,IAAI,oBAAoB,GAAgC,IAAI,CAAC;AACtD,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,IAAI,CAAC,oBAAoB;QAAE,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;IAC/F,OAAO,oBAAoB,CAAC;AAC9B,CAAC,CAAC;AAHW,QAAA,uBAAuB,2BAGlC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/room/utils.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,GAAG,CAAC;AAEtB,SAAgB,cAAc,CAAC,MAAc;IAC3C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IACtC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;QACpB,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;KACvD;IACD,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AACtB,CAAC;AAND,wCAMC;AAED,SAAsB,KAAK,CAAC,QAAgB;;QAC1C,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IACjE,CAAC;CAAA;AAFD,sBAEC;AAED,SAAgB,SAAS;IACvB,OAAO,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;AACvD,CAAC;AAFD,8BAEC;AAED,SAAS,kBAAkB,CAAC,OAA8B;IACxD,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;QAC1B,KAAK,CAAC,MAAiC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;KAC9D;AACH,CAAC;AAED,SAAS,kBAAkB,CAAC,OAAoC;IAC9D,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;QAC1B,KAAK,CAAC,MAAiC,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC;KACzE;AACH,CAAC;AAED,IAAI,cAAc,GAA0B,IAAI,CAAC;AAC1C,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,IAAI,CAAC,cAAc;QAAE,cAAc,GAAG,IAAI,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC7E,OAAO,cAAc,CAAC;AACxB,CAAC,CAAC;AAHW,QAAA,iBAAiB,qBAG5B;AAEF,IAAI,oBAAoB,GAAgC,IAAI,CAAC;AACtD,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,IAAI,CAAC,oBAAoB;QAAE,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;IAC/F,OAAO,oBAAoB,CAAC;AAC9B,CAAC,CAAC;AAHW,QAAA,uBAAuB,2BAGlC"}

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "0.15.0";
+export declare const version = "0.15.1";
 export declare const protocolVersion = 5;

package/dist/version.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.protocolVersion = exports.version = void 0;
-exports.version = '0.15.0';
+exports.version = '0.15.1';
 exports.protocolVersion = 5;
 //# sourceMappingURL=version.js.map

package/example/index.html

@@ -72,11 +72,22 @@
               <input
                 type="checkbox"
                 class="form-check-input"
-                id="adaptive-video"
+                id="dynacast"
                 checked
               />
-              <label for="adaptive-video" class="form-check-label">
-                Adaptive video
+              <label for="dynacast" class="form-check-label">
+                Dynacast
+              </label>
+            </div>
+            <div>
+              <input
+                type="checkbox"
+                class="form-check-input"
+                id="adaptive-stream"
+                checked
+              />
+              <label for="adaptive-stream" class="form-check-label">
+                AdaptiveStream
               </label>
             </div>
             <div>

package/example/sample.ts

@@ -1,9 +1,11 @@
 import {
   DataPacket_Kind, LocalParticipant,
+  LocalTrack,
   MediaDeviceFailure,
   Participant,
   ParticipantEvent,
-  RemoteParticipant, Room, RoomConnectOptions, RoomEvent,
+  RemoteAudioTrack,
+  RemoteParticipant, RemoteVideoTrack, Room, RoomConnectOptions, RoomEvent,
   RoomOptions, RoomState, setLogLevel, Track, TrackPublication,
   VideoCaptureOptions, VideoPresets,
 } from '../src/index';
@@ -16,8 +18,8 @@ const state = {
   encoder: new TextEncoder(),
   decoder: new TextDecoder(),
   defaultDevices: new Map<MediaDeviceKind, string>(),
+  bitrateInterval: undefined as any,
 };
-
 let currentRoom: Room | undefined;
 
 // handles actions from the HTML
@@ -26,14 +28,16 @@ const appActions = {
     const url = (<HTMLInputElement>$('url')).value;
     const token = (<HTMLInputElement>$('token')).value;
     const simulcast = (<HTMLInputElement>$('simulcast')).checked;
+    const dynacast = (<HTMLInputElement>$('dynacast')).checked;
     const forceTURN = (<HTMLInputElement>$('force-turn')).checked;
-    const adaptiveVideo = (<HTMLInputElement>$('adaptive-video')).checked;
+    const adaptiveStream = (<HTMLInputElement>$('adaptive-stream')).checked;
     const shouldPublish = (<HTMLInputElement>$('publish-option')).checked;
 
     setLogLevel('debug');
 
     const roomOpts: RoomOptions = {
-      autoManageVideo: adaptiveVideo,
+      adaptiveStream,
+      dynacast,
       publishDefaults: {
         simulcast,
       },
@@ -54,6 +58,8 @@ const appActions = {
       await room.localParticipant.enableCameraAndMicrophone();
       updateButtonsForPublishState();
     }
+
+    state.bitrateInterval = setInterval(renderBitrate, 1000);
   },
 
   connectToRoom: async (
@@ -200,6 +206,9 @@ const appActions = {
     if (currentRoom) {
       currentRoom.disconnect();
     }
+    if (state.bitrateInterval) {
+      clearInterval(state.bitrateInterval);
+    }
   },
 
   disconnectSignal: () => {
@@ -340,7 +349,11 @@ function renderParticipant(participant: Participant, remove: boolean = false) {
       <div class="info-bar">
         <div id="name-${participant.sid}" class="name">
         </div>
-        <div id="size-${participant.sid}" class="size">
+        <div style="text-align: center;">
+          <span id="size-${participant.sid}" class="size">
+          </span>
+          <span id="bitrate-${participant.sid}" class="bitrate">
+          </span>
         </div>
         <div class="right">
           <span id="signal-${participant.sid}"></span>
@@ -385,11 +398,18 @@ function renderParticipant(participant: Participant, remove: boolean = false) {
 
   const cameraEnabled = cameraPub && cameraPub.isSubscribed && !cameraPub.isMuted;
   if (cameraEnabled) {
-    cameraPub?.videoTrack?.attach(videoElm);
     if (participant instanceof LocalParticipant) {
       // flip
       videoElm.style.transform = 'scale(-1, 1)';
+    } else if (!cameraPub?.videoTrack?.attachedElements.includes(videoElm)) {
+      const startTime = Date.now();
+      // measure time to render
+      videoElm.addEventListener('loadeddata', () => {
+        const elapsed = Date.now() - startTime;
+        appendLog(`RemoteVideoTrack ${cameraPub?.trackSid} rendered in ${elapsed}ms`);
+      });
     }
+    cameraPub?.videoTrack?.attach(videoElm);
   } else if (cameraPub?.videoTrack) {
     // detach manually whenever possible
     cameraPub.videoTrack?.detach(videoElm);
@@ -463,6 +483,32 @@ function renderScreenShare() {
   }
 }
 
+function renderBitrate() {
+  if (!currentRoom || currentRoom.state !== RoomState.Connected) {
+    return;
+  }
+  const participants: Participant[] = [...currentRoom.participants.values()];
+  participants.push(currentRoom.localParticipant);
+
+  for (const p of participants) {
+    const elm = $(`bitrate-${p.sid}`);
+    let totalBitrate = 0;
+    for (const t of p.tracks.values()) {
+      if (t.track instanceof RemoteAudioTrack || t.track instanceof RemoteVideoTrack
+        || t.track instanceof LocalTrack) {
+        totalBitrate += t.track.currentBitrate;
+      }
+    }
+    let displayText = '';
+    if (totalBitrate > 0) {
+      displayText = `${Math.round(totalBitrate / 1024).toLocaleString()} kbps`;
+    }
+    if (elm) {
+      elm.innerHTML = displayText;
+    }
+  }
+}
+
 function updateVideoSize(element: HTMLVideoElement, target: HTMLElement) {
   target.innerHTML = `(${element.videoWidth}x${element.videoHeight})`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "livekit-client",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "JavaScript/TypeScript client SDK for LiveKit",
   "main": "dist/index.js",
   "source": "src/index.ts",
@@ -11,7 +11,7 @@
   "scripts": {
     "build": "yarn exec tsc",
     "build-docs": "yarn exec typedoc",
-    "proto": "protoc --plugin=node_modules/ts-proto/protoc-gen-ts_proto --ts_proto_opt=esModuleInterop=true --ts_proto_out=./src/proto --ts_proto_opt=outputClientImpl=false,useOptionals=true -I../protocol ../protocol/livekit_rtc.proto ../protocol/livekit_models.proto",
+    "proto": "protoc --plugin=node_modules/ts-proto/protoc-gen-ts_proto --ts_proto_opt=esModuleInterop=true --ts_proto_out=./src/proto --ts_proto_opt=outputClientImpl=false,useOptionals=true -I./protocol ./protocol/livekit_rtc.proto ./protocol/livekit_models.proto",
     "sample": "cd example && webpack serve",
     "build-sample": "cd example && webpack && cp styles.css index.html dist/",
     "lint": "yarn exec eslint src",