livekit-client 0.14.3 → 0.15.0

package/dist/room/track/utils.test.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const options_1 = require("./options");
+const utils_1 = require("./utils");
+describe('mergeDefaultOptions', () => {
+    const audioDefaults = {
+        autoGainControl: true,
+        channelCount: 2,
+    };
+    const videoDefaults = {
+        deviceId: 'video123',
+        resolution: options_1.VideoPresets.fhd.resolution,
+    };
+    it('does not enable undefined options', () => {
+        const opts = utils_1.mergeDefaultOptions(undefined, audioDefaults, videoDefaults);
+        expect(opts.audio).toEqual(undefined);
+        expect(opts.video).toEqual(undefined);
+    });
+    it('does not enable explicitly disabled', () => {
+        const opts = utils_1.mergeDefaultOptions({
+            video: false,
+        });
+        expect(opts.audio).toEqual(undefined);
+        expect(opts.video).toEqual(false);
+    });
+    it('accepts true for options', () => {
+        const opts = utils_1.mergeDefaultOptions({
+            audio: true,
+        }, audioDefaults, videoDefaults);
+        expect(opts.audio).toEqual(audioDefaults);
+        expect(opts.video).toEqual(undefined);
+    });
+    it('enables overriding specific fields', () => {
+        const opts = utils_1.mergeDefaultOptions({
+            audio: { channelCount: 1 },
+        }, audioDefaults, videoDefaults);
+        const audioOpts = opts.audio;
+        expect(audioOpts.channelCount).toEqual(1);
+        expect(audioOpts.autoGainControl).toEqual(true);
+    });
+    it('does not override explicit false', () => {
+        const opts = utils_1.mergeDefaultOptions({
+            audio: { autoGainControl: false },
+        }, audioDefaults, videoDefaults);
+        const audioOpts = opts.audio;
+        expect(audioOpts.autoGainControl).toEqual(false);
+    });
+});
+describe('constraintsForOptions', () => {
+    it('correctly enables audio bool', () => {
+        const constraints = utils_1.constraintsForOptions({
+            audio: true,
+        });
+        expect(constraints.audio).toEqual(true);
+        expect(constraints.video).toEqual(false);
+    });
+    it('converts audio options correctly', () => {
+        const constraints = utils_1.constraintsForOptions({
+            audio: {
+                noiseSuppression: true,
+                echoCancellation: false,
+            },
+        });
+        const audioOpts = constraints.audio;
+        expect(Object.keys(audioOpts)).toEqual(['noiseSuppression', 'echoCancellation']);
+        expect(audioOpts.noiseSuppression).toEqual(true);
+        expect(audioOpts.echoCancellation).toEqual(false);
+    });
+    it('converts video options correctly', () => {
+        const constraints = utils_1.constraintsForOptions({
+            video: {
+                resolution: options_1.VideoPresets.hd.resolution,
+                facingMode: 'user',
+                deviceId: 'video123',
+            },
+        });
+        const videoOpts = constraints.video;
+        expect(Object.keys(videoOpts)).toEqual(['width', 'height', 'frameRate', 'aspectRatio', 'facingMode', 'deviceId']);
+        expect(videoOpts.width).toEqual(options_1.VideoPresets.hd.resolution.width);
+        expect(videoOpts.height).toEqual(options_1.VideoPresets.hd.resolution.height);
+        expect(videoOpts.frameRate).toEqual(options_1.VideoPresets.hd.resolution.frameRate);
+        expect(videoOpts.aspectRatio).toEqual(options_1.VideoPresets.hd.resolution.aspectRatio);
+    });
+});
+//# sourceMappingURL=utils.test.js.map

package/dist/room/track/utils.test.js.map

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

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "0.14.3";
+export declare const version = "0.15.0";
 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.14.3';
+exports.version = '0.15.0';
 exports.protocolVersion = 5;
 //# sourceMappingURL=version.js.map

package/example/index.html

@@ -15,16 +15,7 @@
       crossorigin="anonymous"
     />
 
-    <style>
-      .video-container {
-        display: inline-block;
-        border-radius: 5px;
-      }
-
-      .video-container video.speaking {
-        border: 4px solid rgba(94, 166, 190, 0.7);
-      }
-    </style>
+    <link rel="stylesheet" href="styles.css">
   </head>
 
   <body>
@@ -33,200 +24,214 @@
         <div class="col-md-8">
           <h2>Livekit Sample App</h2>
           <br/>
-          <form>
-            <div class="form-group row">
-              <label for="url" class="col-md-3 col-form-label"
-                >LiveKit URL</label
-              >
+          <div id="connect-area">
+            <div>
+              <b>LiveKit URL</b>
+            </div>
+            <div>
               <input
                 type="text"
-                class="form-control col-md-5"
+                class="form-control"
                 id="url"
                 value="ws://localhost:7880"
               />
             </div>
-
-            <div class="form-group row">
-              <label for="token" class="col-md-3 col-form-label">Token</label>
-              <input type="text" class="form-control col-md-5" id="token" />
+            <div>
+              <b>Token</b>
             </div>
-
-            <div class="form-group row">
-              <div class="col-md-2 offset-md-1">
-                <div class="form-check">
-                  <input
-                    type="checkbox"
-                    class="form-check-input"
-                    id="publish-option"
-                    checked
-                  />
-                  <label for="checkbox" class="form-check-label">
-                    Publish
-                  </label>
-                </div>
-              </div>
-              <div class="col-md-2">
-                <div class="form-check">
-                  <input
-                    type="checkbox"
-                    class="form-check-input"
-                    id="simulcast"
-                    checked
-                  />
-                  <label for="checkbox" class="form-check-label">
-                    Simulcast
-                  </label>
-                </div>
-              </div>
-              <div class="col-md-3">
-                <div class="form-check">
-                  <input
-                    type="checkbox"
-                    class="form-check-input"
-                    id="force-turn"
-                  />
-                  <label for="checkbox" class="form-check-label">
-                    Force TURN
-                  </label>
-                </div>
-              </div>
+            <div>
+              <input type="text" class="form-control" id="token" />
             </div>
+          </div>
 
-            <div class="form-group row">
-              <div class="col-md-2">
-                <button
-                  id="connect-button"
-                  class="btn btn-primary mt-1"
-                  type="button"
-                  onclick="connectWithFormInput()"
-                >
-                  Connect
-                </button>
-              </div>
-              <div class="col-md-10">
-                <button
-                  id="toggle-audio-button"
-                  class="btn btn-secondary mt-1"
-                  disabled
-                  type="button"
-                  onclick="toggleAudio()"
-                >
-                  Enable Audio
-                </button>
-                <button
-                  id="toggle-video-button"
-                  class="btn btn-secondary mt-1"
-                  disabled
-                  type="button"
-                  onclick="toggleVideo()"
-                >
-                  Enable Video
-                </button>
-                <button
-                  id="flip-video-button"
-                  class="btn btn-secondary mt-1"
-                  disabled
-                  type="button"
-                  onclick="flipVideo()"
-                >
-                  Back Camera
-                </button>
-                <button
-                  id="share-screen-button"
-                  class="btn btn-secondary mt-1"
-                  disabled
-                  type="button"
-                  onclick="shareScreen()"
-                >
-                  Share Screen
-                </button>
-                <button
-                  id="disconnect-ws-button"
-                  class="btn btn-warning mt-1"
-                  disabled
-                  type="button"
-                  onclick="disconnectSignal()"
-                >
-                  WS Reconnect
-                </button>
-                <button
-                  id="disconnect-room-button"
-                  class="btn btn-danger mt-1"
-                  disabled
-                  type="button"
-                  onclick="disconnectRoom()"
-                >
-                  Disconnect
-                </button>
-                <button
-                  id="start-audio-button"
-                  class="btn btn-secondary mt-1"
-                  disabled
-                  type="button"
-                  onclick="startAudio()"
-                >
-                  Enable Audio
-                </button>
-              </div>
+          <!-- connect options -->
+          <div id="options-area">
+            <div>
+              <input
+                type="checkbox"
+                class="form-check-input"
+                id="publish-option"
+                checked
+              />
+              <label for="publish-option" class="form-check-label">
+                Publish
+              </label>
             </div>
-
-            <!-- video devices -->
-            <div class="form-group row">
-              <div class="col-md-4">
-                <select id="video-input" class="custom-select" onchange="handleDeviceSelected(event)">
-                  <option selected>Video Input (default)</option>
-                </select>
-              </div>
-              <div class="col-md-4">
-                <select id="audio-input" class="custom-select" onchange="handleDeviceSelected(event)">
-                  <option selected>Audio Input (default)</option>
-                </select>
-              </div>
-              <div class="col-md-4">
-                <select id="audio-output" class="custom-select" onchange="handleDeviceSelected(event)">
-                  <option selected>Audio Output (default)</option>
-                </select>
-              </div>
+            <div>
+              <input
+                type="checkbox"
+                class="form-check-input"
+                id="simulcast"
+                checked
+              />
+              <label for="simulcast" class="form-check-label">
+                Simulcast
+              </label>
             </div>
-
-            <div class="form-group row">
-              <textarea
-                class="form-control col-md-12"
-                id="log"
-                rows="5"
-              ></textarea>
+            <div>
+              <input
+                type="checkbox"
+                class="form-check-input"
+                id="adaptive-video"
+                checked
+              />
+              <label for="adaptive-video" class="form-check-label">
+                Adaptive video
+              </label>
             </div>
-          </form>
-        </div>
-        <div class="col-md-4">
-          <h3>Chat</h3>
-          <div class="row">
-            <div class="col-md-12">
-              <textarea class="form-control" id="chat" rows="15"></textarea>
+            <div>
+              <input
+                type="checkbox"
+                class="form-check-input"
+                id="force-turn"
+              />
+              <label for="force-turn" class="form-check-label">
+                Force TURN
+              </label>
             </div>
           </div>
-          <div class="row mt-1">
-            <div class="col-md-10">
-              <input type="text" class="form-control" id="entry" />
+
+          <!-- actions -->
+          <div id="actions-area">
+            <div>
+              <button
+                id="connect-button"
+                class="btn btn-primary mt-1"
+                type="button"
+                onclick="appActions.connectWithFormInput()"
+              >
+                Connect
+              </button>
             </div>
-            <div class="col-md-1">
+            <div>
+              <button
+                id="toggle-audio-button"
+                class="btn btn-secondary mt-1"
+                disabled
+                type="button"
+                onclick="appActions.toggleAudio()"
+              >
+                Enable Mic
+              </button>
+              <button
+                id="toggle-video-button"
+                class="btn btn-secondary mt-1"
+                disabled
+                type="button"
+                onclick="appActions.toggleVideo()"
+              >
+                Enable Camera
+              </button>
+              <button
+                id="flip-video-button"
+                class="btn btn-secondary mt-1"
+                disabled
+                type="button"
+                onclick="appActions.flipVideo()"
+              >
+                Flip Camera
+              </button>
+              <button
+                id="share-screen-button"
+                class="btn btn-secondary mt-1"
+                disabled
+                type="button"
+                onclick="appActions.shareScreen()"
+              >
+                Share Screen
+              </button>
+              <button
+                id="disconnect-ws-button"
+                class="btn btn-warning mt-1"
+                disabled
+                type="button"
+                onclick="appActions.disconnectSignal()"
+              >
+                Signal Reconnect
+              </button>
+              <button
+                id="disconnect-room-button"
+                class="btn btn-danger mt-1"
+                disabled
+                type="button"
+                onclick="appActions.disconnectRoom()"
+              >
+                Disconnect
+              </button>
               <button
-                class="btn btn-primary"
+                id="start-audio-button"
+                class="btn btn-secondary mt-1"
+                disabled
                 type="button"
-                onclick="enterText()"
+                onclick="appActions.startAudio()"
               >
-                Enter
+                Start Audio
               </button>
             </div>
           </div>
+
+          <div id="inputs-area">
+            <div>
+              <select id="video-input" class="custom-select" onchange="appActions.handleDeviceSelected(event)">
+                <option selected>Video Input (default)</option>
+              </select>
+            </div>
+            <div>
+              <select id="audio-input" class="custom-select" onchange="appActions.handleDeviceSelected(event)">
+                <option selected>Audio Input (default)</option>
+              </select>
+            </div>
+            <div>
+              <select id="audio-output" class="custom-select" onchange="appActions.handleDeviceSelected(event)">
+                <option selected>Audio Output (default)</option>
+              </select>
+            </div>
+          </div>
         </div>
+        <div class="col-md-4">
+          <h3>Chat</h3>
+          <div id="chat-area">
+            <textarea class="form-control" id="chat" rows="9"></textarea>
+            <div id="chat-input-area">
+              <div>
+                <input type="text" class="form-control" id="entry"
+                  placeholder="Type your message here" />
+              </div>
+              <div>
+                <button
+                  id="send-button"
+                  class="btn btn-primary"
+                  type="button"
+                  onclick="appActions.enterText()"
+                  disabled
+                >
+                  Send
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="screenshare-area">
+        <div>
+          <span id="screenshare-info">
+          </span>
+          <span id="screenshare-resolution">
+          </span>
+        </div>
+        <video id="screenshare-video" autoplay playsinline></video>
+      </div>
+
+      <div id="participants-area">
       </div>
 
-      <div class="row" id="remote-area"></div>
-      <div class="row" id="local-area">
-        <div class="col-md-6 video-container" id="local-video"></div>
+      <div id="log-area">
+        <textarea id="log"></textarea>
       </div>
     </div>
     <script src="bundle.js"></script>
+    <!-- for icons -->
+    <script src="https://kit.fontawesome.com/7c1c4c7e9c.js" crossorigin="anonymous"></script>
   </body>
 </html>