livekit-client 0.15.0 → 0.15.4

package/src/room/utils.ts

@@ -0,0 +1,74 @@
+import uaparser from 'ua-parser-js';
+import { ClientInfo, ClientInfo_SDK } from '../proto/livekit_models';
+import { protocolVersion, version } from '../version';
+
+const separator = '|';
+
+export function unpackStreamId(packed: string): string[] {
+  const parts = packed.split(separator);
+  if (parts.length > 1) {
+    return [parts[0], packed.substr(parts[0].length + 1)];
+  }
+  return [packed, ''];
+}
+
+export async function sleep(duration: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, duration));
+}
+
+export function isFireFox(): boolean {
+  return navigator.userAgent.indexOf('Firefox') !== -1;
+}
+
+function roDispatchCallback(entries: ResizeObserverEntry[]) {
+  for (const entry of entries) {
+    (entry.target as ObservableMediaElement).handleResize(entry);
+  }
+}
+
+function ioDispatchCallback(entries: IntersectionObserverEntry[]) {
+  for (const entry of entries) {
+    (entry.target as ObservableMediaElement).handleVisibilityChanged(entry);
+  }
+}
+
+let resizeObserver: ResizeObserver | null = null;
+export const getResizeObserver = () => {
+  if (!resizeObserver) resizeObserver = new ResizeObserver(roDispatchCallback);
+  return resizeObserver;
+};
+
+let intersectionObserver: IntersectionObserver | null = null;
+export const getIntersectionObserver = () => {
+  if (!intersectionObserver) intersectionObserver = new IntersectionObserver(ioDispatchCallback);
+  return intersectionObserver;
+};
+
+export interface ObservableMediaElement extends HTMLMediaElement {
+  handleResize: (entry: ResizeObserverEntry) => void;
+  handleVisibilityChanged: (entry: IntersectionObserverEntry) => void;
+}
+
+export function getClientInfo(): ClientInfo {
+  const ua = uaparser(navigator.userAgent);
+  const info = ClientInfo.fromPartial({
+    sdk: ClientInfo_SDK.JS,
+    protocol: protocolVersion,
+    version,
+    os: ua.os.name,
+    osVersion: ua.os.version,
+    browser: ua.browser.name,
+    browserVersion: ua.browser.version,
+  });
+
+  let model = '';
+  if (ua.device.vendor) {
+    model += ua.device.vendor;
+  }
+  if (ua.device.model) {
+    if (model) model += ' ';
+    model += ua.device.model;
+  }
+  if (model) info.deviceModel = model;
+  return info;
+}

package/src/version.ts

@@ -0,0 +1,2 @@
+export const version = '0.15.4';
+export const protocolVersion = 5;

package/.github/workflows/publish.yaml

@@ -1,55 +0,0 @@
-name: Publish
-
-# Controls when the action will run.
-on:
-  push:
-    # only publish on version tags
-    tags:
-      - v*
-
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
-jobs:
-  docs:
-    # The type of runner that the job will run on
-    runs-on: ubuntu-latest
-
-    # Steps represent a sequence of tasks that will be executed as part of the job
-    steps:
-      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '16.x'
-      - uses: actions/cache@v2
-        with:
-          path: |
-            ~/.npm
-            ~/.config/yarn/global
-          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
-
-      - name: Install Yarn
-        run: |
-          npm install -g yarn
-          yarn install
-
-      - name: Build
-        run: yarn build
-
-      - name: Build Docs
-        run: yarn build-docs
-
-      - name: Publish to npm
-        run: |
-          npm config set '//registry.npmjs.org/:_authToken' $NPM_TOKEN
-          npm publish
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: S3 Upload
-        run: aws s3 cp docs/ s3://livekit-docs/client-sdk-js --recursive
-        env:
-          AWS_ACCESS_KEY_ID: ${{ secrets.DOCS_DEPLOY_AWS_ACCESS_KEY }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.DOCS_DEPLOY_AWS_API_SECRET }}
-          AWS_DEFAULT_REGION: "us-east-1"

package/.github/workflows/test.yaml

@@ -1,36 +0,0 @@
-name: Test
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v2
-
-    - uses: actions/setup-node@v2
-      with:
-        node-version: '16.x'
-
-    - uses: actions/cache@v2
-      with:
-        path: |
-          ~/.npm
-          ~/.config/yarn/global
-        key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: |
-          ${{ runner.os }}-node-
-
-    - name: Install Yarn
-      run: |
-        npm install -g yarn
-        yarn install
-
-    - name: ESLint
-      run: yarn lint
-
-    - name: Run Tests
-      run: yarn test

package/example/index.html

@@ -1,237 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>Livekit test app</title>
-    <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
-      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
-      crossorigin="anonymous"
-    />
-
-    <link rel="stylesheet" href="styles.css">
-  </head>
-
-  <body>
-    <div class="container">
-      <div class="row">
-        <div class="col-md-8">
-          <h2>Livekit Sample App</h2>
-          <br/>
-          <div id="connect-area">
-            <div>
-              <b>LiveKit URL</b>
-            </div>
-            <div>
-              <input
-                type="text"
-                class="form-control"
-                id="url"
-                value="ws://localhost:7880"
-              />
-            </div>
-            <div>
-              <b>Token</b>
-            </div>
-            <div>
-              <input type="text" class="form-control" id="token" />
-            </div>
-          </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>
-            <div>
-              <input
-                type="checkbox"
-                class="form-check-input"
-                id="simulcast"
-                checked
-              />
-              <label for="simulcast" class="form-check-label">
-                Simulcast
-              </label>
-            </div>
-            <div>
-              <input
-                type="checkbox"
-                class="form-check-input"
-                id="adaptive-video"
-                checked
-              />
-              <label for="adaptive-video" class="form-check-label">
-                Adaptive video
-              </label>
-            </div>
-            <div>
-              <input
-                type="checkbox"
-                class="form-check-input"
-                id="force-turn"
-              />
-              <label for="force-turn" class="form-check-label">
-                Force TURN
-              </label>
-            </div>
-          </div>
-
-          <!-- 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>
-              <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
-                id="start-audio-button"
-                class="btn btn-secondary mt-1"
-                disabled
-                type="button"
-                onclick="appActions.startAudio()"
-              >
-                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 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>