livekit-client 0.11.2 → 0.13.0

package/example/sample.ts

@@ -1,19 +1,13 @@
 import {
-  connect, createLocalScreenTrack, CreateVideoTrackOptions,
-  LocalAudioTrack,
-  LocalTrack,
-  LocalVideoTrack,
-  LogLevel,
+  connect, CreateVideoTrackOptions, DataPacket_Kind, LocalTrack, LogLevel,
   Participant,
   ParticipantEvent,
   RemoteParticipant,
   RemoteTrack,
   Room,
   RoomEvent,
-  Track,
-  VideoPresets,
+  Track, TrackPublication, VideoPresets,
 } from '../src/index';
-import { DataPacket_Kind } from '../src/proto/livekit_rtc';
 
 const $ = (id: string) => document.getElementById(id);
 
@@ -21,9 +15,10 @@ declare global {
   interface Window {
     connectWithFormInput: any;
     connectToRoom: any;
+    handleDeviceSelected: any;
     shareScreen: any;
-    muteVideo: any;
-    muteAudio: any;
+    toggleVideo: any;
+    toggleAudio: any;
     enterText: any;
     disconnectSignal: any;
     disconnectRoom: any;
@@ -76,10 +71,14 @@ function trackUnsubscribed(
 
 const encoder = new TextEncoder();
 const decoder = new TextDecoder();
-function handleData(msg: Uint8Array, participant: RemoteParticipant) {
+function handleData(msg: Uint8Array, participant?: RemoteParticipant) {
   const str = decoder.decode(msg);
   const chat = <HTMLTextAreaElement>$('chat');
-  chat.value += `${participant.identity}: ${str}\n`;
+  let from = 'server';
+  if (participant) {
+    from = participant.identity;
+  }
+  chat.value += `${from}: ${str}\n`;
 }
 
 function handleSpeakerChanged(speakers: Participant[]) {
@@ -141,21 +140,42 @@ function participantDisconnected(participant: RemoteParticipant) {
 function handleRoomDisconnect() {
   appendLog('disconnected from room');
   setButtonsForState(false);
-  if (videoTrack) {
-    videoTrack.stop();
-    trackUnsubscribed(videoTrack);
+  $('local-video')!.innerHTML = '';
+
+  // clear the chat area on disconnect
+  clearChat();
+
+  // clear remote area on disconnect
+  clearRemoteArea();
+}
+
+function setButtonState(buttonId: string, buttonText: string, isActive: boolean) {
+  const el = $(buttonId);
+  if (!el) return;
+
+  el.innerHTML = buttonText;
+  if (isActive) {
+    el.classList.add('active');
+  } else {
+    el.classList.remove('active');
   }
-  if (audioTrack) {
-    audioTrack.stop();
-    trackUnsubscribed(audioTrack);
+}
+
+function clearChat() {
+  const chat = <HTMLTextAreaElement>$('chat');
+  chat.value = '';
+}
+
+function clearRemoteArea() {
+  const el = $('remote-area');
+  if (!el) return;
+
+  while (el.firstChild) {
+    el.removeChild(el.firstChild);
   }
-  $('local-video')!.innerHTML = '';
 }
 
 let currentRoom: Room;
-let videoTrack: LocalVideoTrack | undefined;
-let audioTrack: LocalAudioTrack;
-let screenTrack: LocalVideoTrack | undefined;
 window.connectWithFormInput = () => {
   const url = (<HTMLInputElement>$('url')).value;
   const token = (<HTMLInputElement>$('token')).value;
@@ -176,13 +196,21 @@ window.connectToRoom = async (
   if (forceTURN) {
     rtcConfig.iceTransportPolicy = 'relay';
   }
+  const shouldPublish = (<HTMLInputElement>$('publish-option')).checked;
+  let audioOptions = true;
+  let videoOptions: boolean | CreateVideoTrackOptions = {
+    resolution: VideoPresets.qhd.resolution,
+  };
+  if (!shouldPublish) {
+    audioOptions = false;
+    videoOptions = false;
+  }
+
   try {
     room = await connect(url, token, {
       logLevel: LogLevel.debug,
-      audio: true,
-      video: {
-        resolution: VideoPresets.qhd.resolution,
-      },
+      audio: audioOptions,
+      video: videoOptions,
       simulcast,
       rtcConfig,
     });
@@ -195,11 +223,11 @@ window.connectToRoom = async (
     return;
   }
 
-  window.currentRoom = room;
   appendLog('connected to room', room.name);
-  setButtonsForState(true);
   currentRoom = room;
   window.currentRoom = room;
+  setButtonsForState(true);
+  updateButtonsForPublishState();
 
   room
     .on(RoomEvent.ParticipantConnected, participantConnected)
@@ -209,6 +237,12 @@ window.connectToRoom = async (
     .on(RoomEvent.Disconnected, handleRoomDisconnect)
     .on(RoomEvent.Reconnecting, () => appendLog('Reconnecting to room'))
     .on(RoomEvent.Reconnected, () => appendLog('Successfully reconnected!'))
+    .on(RoomEvent.TrackMuted, (pub: TrackPublication, p: Participant) => appendLog('track was muted', pub.trackSid, p.identity))
+    .on(RoomEvent.TrackUnmuted, (pub: TrackPublication, p: Participant) => appendLog('track was unmuted', pub.trackSid, p.identity))
+    .on(RoomEvent.RoomMetadataChanged, (metadata) => {
+      appendLog('new metadata for room', metadata);
+    })
+    .on(RoomEvent.MediaDevicesChanged, handleDevicesChanged)
     .on(RoomEvent.AudioPlaybackStatusChanged, () => {
       if (room.canPlaybackAudio) {
         $('start-audio-button')?.setAttribute('disabled', 'true');
@@ -223,48 +257,40 @@ window.connectToRoom = async (
   });
 
   $('local-video')!.innerHTML = `${room.localParticipant.identity} (me)`;
-
-  // add already published tracks
-  currentRoom.localParticipant.tracks.forEach((publication) => {
-    if (publication.kind === Track.Kind.Video) {
-      videoTrack = <LocalVideoTrack>publication.track;
-      publishLocalVideo(videoTrack);
-    } else if (publication.kind === Track.Kind.Audio) {
-      // skip adding local audio track, to avoid your own sound
-      // only process local video tracks
-      audioTrack = <LocalAudioTrack>publication.track;
-    }
-  });
+  attachLocalVideo();
 };
 
-window.muteVideo = () => {
-  if (!currentRoom || !videoTrack) return;
+window.toggleVideo = async () => {
+  if (!currentRoom) return;
   const video = getMyVideo();
-  if (!videoTrack.isMuted) {
-    appendLog('muting video');
-    videoTrack.mute();
+  if (currentRoom.localParticipant.isCameraEnabled) {
+    appendLog('disabling video');
+    await currentRoom.localParticipant.setCameraEnabled(false);
     // hide from display
     if (video) {
       video.style.display = 'none';
     }
   } else {
-    appendLog('unmuting video');
-    videoTrack.unmute();
+    appendLog('enabling video');
+    await currentRoom.localParticipant.setCameraEnabled(true);
+    attachLocalVideo();
     if (video) {
       video.style.display = '';
     }
   }
+  updateButtonsForPublishState();
 };
 
-window.muteAudio = () => {
-  if (!currentRoom || !audioTrack) return;
-  if (!audioTrack.isMuted) {
-    appendLog('muting audio');
-    audioTrack.mute();
+window.toggleAudio = async () => {
+  if (!currentRoom) return;
+  if (currentRoom.localParticipant.isMicrophoneEnabled) {
+    appendLog('disabling audio');
+    await currentRoom.localParticipant.setMicrophoneEnabled(false);
   } else {
-    appendLog('unmuting audio');
-    audioTrack.unmute();
+    appendLog('enabling audio');
+    await currentRoom.localParticipant.setMicrophoneEnabled(true);
   }
+  updateButtonsForPublishState();
 };
 
 window.enterText = () => {
@@ -280,16 +306,17 @@ window.enterText = () => {
 };
 
 window.shareScreen = async () => {
-  if (screenTrack !== undefined) {
-    currentRoom.localParticipant.unpublishTrack(screenTrack);
-    screenTrack = undefined;
-    return;
-  }
+  if (!currentRoom) return;
 
-  screenTrack = await createLocalScreenTrack();
-  await currentRoom.localParticipant.publishTrack(screenTrack, {
-    videoEncoding: VideoPresets.fhd.encoding,
-  });
+  if (currentRoom.localParticipant.isScreenShareEnabled) {
+    appendLog('stopping screen share');
+    await currentRoom.localParticipant.setScreenShareEnabled(false);
+  } else {
+    appendLog('starting screen share');
+    await currentRoom.localParticipant.setScreenShareEnabled(true);
+    appendLog('started screen share');
+  }
+  updateButtonsForPublishState();
 };
 
 window.disconnectSignal = () => {
@@ -310,31 +337,59 @@ window.startAudio = () => {
   currentRoom.startAudio();
 };
 
-let isFacingForward = true;
+let isFrontFacing = true;
 window.flipVideo = () => {
-  if (!videoTrack) {
+  const videoPub = currentRoom.localParticipant.getTrack(Track.Source.Camera);
+  if (!videoPub) {
     return;
   }
-  isFacingForward = !isFacingForward;
+  if (isFrontFacing) {
+    setButtonState('flip-video-button', 'Front Camera', false);
+  } else {
+    setButtonState('flip-video-button', 'Back Camera', false);
+  }
+  isFrontFacing = !isFrontFacing;
   const options: CreateVideoTrackOptions = {
     resolution: VideoPresets.qhd.resolution,
-    facingMode: isFacingForward ? 'user' : 'environment',
+    facingMode: isFrontFacing ? 'user' : 'environment',
   };
-  videoTrack.restartTrack(options);
+  videoPub.videoTrack?.restartTrack(options);
 };
 
-async function publishLocalVideo(track: LocalVideoTrack) {
-  await currentRoom.localParticipant.publishTrack(track);
-  const video = track.attach();
-  video.style.transform = 'scale(-1, 1)';
-  $('local-video')!.appendChild(video);
+window.handleDeviceSelected = async (e: Event) => {
+  const deviceId = (<HTMLSelectElement>e.target).value;
+  const elementId = (<HTMLSelectElement>e.target).id;
+  const kind = elementMapping[elementId];
+  if (!kind) {
+    return;
+  }
+
+  Room.setDefaultDevice(kind, deviceId || undefined);
+  if (currentRoom) {
+    await currentRoom.switchActiveDevice(kind, deviceId);
+  }
+};
+
+setTimeout(handleDevicesChanged, 100);
+
+async function attachLocalVideo() {
+  const videoPub = currentRoom.localParticipant.getTrack(Track.Source.Camera);
+  const videoTrack = videoPub?.videoTrack;
+  if (!videoTrack) {
+    return;
+  }
+
+  if (videoTrack.attachedElements.length === 0) {
+    const video = videoTrack.attach();
+    video.style.transform = 'scale(-1, 1)';
+    $('local-video')!.appendChild(video);
+  }
 }
 
 function setButtonsForState(connected: boolean) {
   const connectedSet = [
     'toggle-video-button',
-    'mute-video-button',
-    'mute-audio-button',
+    'toggle-audio-button',
     'share-screen-button',
     'disconnect-ws-button',
     'disconnect-room-button',
@@ -352,3 +407,77 @@ function setButtonsForState(connected: boolean) {
 function getMyVideo() {
   return <HTMLVideoElement>document.querySelector('#local-video video');
 }
+
+const elementMapping: { [k: string]: MediaDeviceKind } = {
+  'video-input': 'videoinput',
+  'audio-input': 'audioinput',
+  'audio-output': 'audiooutput',
+};
+async function handleDevicesChanged() {
+  Promise.all(Object.keys(elementMapping).map(async (id) => {
+    const kind = elementMapping[id];
+    if (!kind) {
+      return;
+    }
+    const devices = await Room.getLocalDevices(kind);
+    const element = <HTMLSelectElement>$(id);
+    populateSelect(kind, element, devices, Room.getDefaultDevice(kind));
+  }));
+}
+
+function populateSelect(
+  kind: MediaDeviceKind,
+  element: HTMLSelectElement,
+  devices: MediaDeviceInfo[],
+  selectedDeviceId?: string,
+) {
+  // clear all elements
+  element.innerHTML = '';
+  const initialOption = document.createElement('option');
+  if (kind === 'audioinput') {
+    initialOption.text = 'Audio Input (default)';
+  } else if (kind === 'videoinput') {
+    initialOption.text = 'Video Input (default)';
+  } else if (kind === 'audiooutput') {
+    initialOption.text = 'Audio Output (default)';
+  }
+  element.appendChild(initialOption);
+
+  for (const device of devices) {
+    const option = document.createElement('option');
+    option.text = device.label;
+    option.value = device.deviceId;
+    if (device.deviceId === selectedDeviceId) {
+      option.selected = true;
+    }
+    element.appendChild(option);
+  }
+}
+
+function updateButtonsForPublishState() {
+  if (!currentRoom) {
+    return;
+  }
+  const lp = currentRoom.localParticipant;
+
+  // video
+  setButtonState(
+    'toggle-video-button',
+    `${lp.isCameraEnabled ? 'Disable' : 'Enable'} Video`,
+    lp.isCameraEnabled,
+  );
+
+  // audio
+  setButtonState(
+    'toggle-audio-button',
+    `${lp.isMicrophoneEnabled ? 'Disable' : 'Enable'} Audio`,
+    lp.isMicrophoneEnabled,
+  );
+
+  // screen share
+  setButtonState(
+    'share-screen-button',
+    lp.isScreenShareEnabled ? 'Stop Screen Share' : 'Share Screen',
+    lp.isScreenShareEnabled,
+  );
+}

package/example/webpack.config.js

@@ -5,8 +5,14 @@ module.exports = {
   mode: 'development',
   devtool: 'inline-source-map',
   devServer: {
-    open: true,
-    contentBase: __dirname,
+    host: '0.0.0.0',
+    open: {
+      target: 'http://localhost:8080/',
+    },
+    port: 8080,
+    static: {
+      directory: __dirname,
+    },
   },
   module: {
     rules: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "livekit-client",
-  "version": "0.11.2",
+  "version": "0.13.0",
   "description": "JavaScript/TypeScript client SDK for LiveKit",
   "main": "dist/index.js",
   "source": "src/index.ts",
@@ -12,7 +12,7 @@
     "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",
-    "sample": "cd example && webpack serve --host 0.0.0.0 --public localhost:8080",
+    "sample": "cd example && webpack serve",
     "build-sample": "cd example && webpack && cp index.html dist/",
     "lint": "yarn exec eslint src",
     "test": "jest",
@@ -23,22 +23,23 @@
     "events": "^3.3.0",
     "loglevel": "^1.7.1",
     "protobufjs": "^6.10.2",
+    "ts-debounce": "^3.0.0",
     "webrtc-adapter": "^7.7.1"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.4.1",
-    "@webpack-cli/serve": "^1.2.1",
-    "eslint": "^7.30.0",
+    "@typescript-eslint/eslint-plugin": "^4.31.2",
+    "@webpack-cli/serve": "^1.5.2",
+    "eslint": "^7.32.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
-    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-import": "^2.24.2",
     "gh-pages": "^3.2.3",
     "ts-loader": "^8.1.0",
-    "ts-proto": "1.79.1",
+    "ts-proto": "1.83.1",
     "typedoc": "^0.20.35",
     "typedoc-plugin-no-inherit": "^1.2.0",
     "typescript": "~4.2.3",
-    "webpack": "^5.9.0",
-    "webpack-cli": "^4.2.0",
-    "webpack-dev-server": "^3.11.0"
+    "webpack": "^5.53.0",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.2.1"
   }
 }

package/dist/livekit.d.ts

@@ -1,42 +0,0 @@
-import { ConnectOptions } from './options';
-import Room from './room/Room';
-import LocalAudioTrack from './room/track/LocalAudioTrack';
-import LocalTrack from './room/track/LocalTrack';
-import LocalVideoTrack from './room/track/LocalVideoTrack';
-import { CreateAudioTrackOptions, CreateLocalTracksOptions, CreateScreenTrackOptions, CreateVideoTrackOptions } from './room/track/options';
-export { version } from './version';
-/**
- * Connects to a LiveKit room
- *
- * ```typescript
- * connect('wss://myhost.livekit.io', token, {
- *   // publish audio and video tracks on joining
- *   audio: true,
- *   video: {
- *     resolution: VideoPresets.hd,
- *     facingMode: {
- *       ideal: "user",
- *     }
- *   }
- * })
- * ```
- * @param url URL to LiveKit server
- * @param token AccessToken, a JWT token that includes authentication and room details
- * @param options
- */
-export declare function connect(url: string, token: string, options?: ConnectOptions): Promise<Room>;
-/**
- * Creates a [[LocalVideoTrack]] with getUserMedia()
- * @param options
- */
-export declare function createLocalVideoTrack(options?: CreateVideoTrackOptions): Promise<LocalVideoTrack>;
-export declare function createLocalAudioTrack(options?: CreateAudioTrackOptions): Promise<LocalAudioTrack>;
-/**
- * Creates a [[LocalVideoTrack]] of screen capture with getDisplayMedia()
- */
-export declare function createLocalScreenTrack(options?: CreateScreenTrackOptions): Promise<LocalVideoTrack>;
-/**
- * creates a local video and audio track at the same time
- * @param options
- */
-export declare function createLocalTracks(options?: CreateLocalTracksOptions): Promise<Array<LocalTrack>>;