livekit-client 0.14.2 → 0.15.2

package/example/sample.ts

@@ -1,82 +1,253 @@
 import {
-  connect, CreateVideoTrackOptions, DataPacket_Kind, LocalTrack, LocalTrackPublication, LogLevel,
+  DataPacket_Kind, LocalParticipant,
+  LocalTrack,
   MediaDeviceFailure,
   Participant,
   ParticipantEvent,
-  RemoteParticipant,
-  RemoteTrack,
-  RemoteTrackPublication,
-  Room,
-  RoomEvent,
-  Track, TrackPublication, VideoPresets,
+  RemoteAudioTrack,
+  RemoteParticipant, RemoteVideoTrack, Room, RoomConnectOptions, RoomEvent,
+  RoomOptions, RoomState, setLogLevel, Track, TrackPublication,
+  VideoCaptureOptions, VideoPresets,
 } from '../src/index';
 import { ConnectionQuality } from '../src/room/participant/Participant';
 
 const $ = (id: string) => document.getElementById(id);
 
-declare global {
-  interface Window {
-    connectWithFormInput: any;
-    connectToRoom: any;
-    handleDeviceSelected: any;
-    shareScreen: any;
-    toggleVideo: any;
-    toggleAudio: any;
-    enterText: any;
-    disconnectSignal: any;
-    disconnectRoom: any;
-    currentRoom: any;
-    startAudio: any;
-    flipVideo: any;
-  }
-}
+const state = {
+  isFrontFacing: false,
+  encoder: new TextEncoder(),
+  decoder: new TextDecoder(),
+  defaultDevices: new Map<MediaDeviceKind, string>(),
+  bitrateInterval: undefined as any,
+};
+let currentRoom: Room | undefined;
+
+// handles actions from the HTML
+const appActions = {
+  connectWithFormInput: async () => {
+    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 adaptiveStream = (<HTMLInputElement>$('adaptive-stream')).checked;
+    const shouldPublish = (<HTMLInputElement>$('publish-option')).checked;
+
+    setLogLevel('debug');
+
+    const roomOpts: RoomOptions = {
+      adaptiveStream,
+      dynacast,
+      publishDefaults: {
+        simulcast,
+      },
+      videoCaptureDefaults: {
+        resolution: VideoPresets.hd.resolution,
+      },
+    };
 
-function appendLog(...args: any[]) {
-  const logger = $('log')!;
-  for (let i = 0; i < arguments.length; i += 1) {
-    if (typeof args[i] === 'object') {
-      logger.innerHTML
-        += `${JSON && JSON.stringify
-          ? JSON.stringify(args[i], undefined, 2)
-          : args[i]} `;
+    const connectOpts: RoomConnectOptions = {};
+    if (forceTURN) {
+      connectOpts.rtcConfig = {
+        iceTransportPolicy: 'relay',
+      };
+    }
+    const room = await appActions.connectToRoom(url, token, roomOpts, connectOpts);
+
+    if (room && shouldPublish) {
+      await room.localParticipant.enableCameraAndMicrophone();
+      updateButtonsForPublishState();
+    }
+
+    state.bitrateInterval = setInterval(renderBitrate, 1000);
+  },
+
+  connectToRoom: async (
+    url: string,
+    token: string,
+    roomOptions?: RoomOptions,
+    connectOptions?: RoomConnectOptions,
+  ): Promise<Room | undefined> => {
+    const room = new Room(roomOptions);
+    room
+      .on(RoomEvent.ParticipantConnected, participantConnected)
+      .on(RoomEvent.ParticipantDisconnected, participantDisconnected)
+      .on(RoomEvent.DataReceived, handleData)
+      .on(RoomEvent.Disconnected, handleRoomDisconnect)
+      .on(RoomEvent.Reconnecting, () => appendLog('Reconnecting to room'))
+      .on(RoomEvent.Reconnected, () => appendLog('Successfully reconnected!'))
+      .on(RoomEvent.LocalTrackPublished, () => {
+        renderParticipant(room.localParticipant);
+        updateButtonsForPublishState();
+        renderScreenShare();
+      })
+      .on(RoomEvent.LocalTrackUnpublished, () => {
+        renderParticipant(room.localParticipant);
+        updateButtonsForPublishState();
+        renderScreenShare();
+      })
+      .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');
+        } else {
+          $('start-audio-button')?.removeAttribute('disabled');
+        }
+      })
+      .on(RoomEvent.MediaDevicesError, (e: Error) => {
+        const failure = MediaDeviceFailure.getFailure(e);
+        appendLog('media device failure', failure);
+      })
+      .on(RoomEvent.ConnectionQualityChanged,
+        (quality: ConnectionQuality, participant: Participant) => {
+          appendLog('connection quality changed', participant.identity, quality);
+        });
+
+    try {
+      await room.connect(url, token, connectOptions);
+    } catch (error) {
+      let message: any = error;
+      if (error.message) {
+        message = error.message;
+      }
+      appendLog('could not connect:', message);
+      return;
+    }
+
+    appendLog('connected to room', room.name);
+    currentRoom = room;
+    window.currentRoom = room;
+    setButtonsForState(true);
+
+    appendLog('room participants', room.participants.keys());
+    room.participants.forEach((participant) => {
+      participantConnected(participant);
+    });
+    participantConnected(room.localParticipant);
+
+    return room;
+  },
+
+  toggleAudio: async () => {
+    if (!currentRoom) return;
+    const enabled = currentRoom.localParticipant.isMicrophoneEnabled;
+    if (enabled) {
+      appendLog('disabling audio');
     } else {
-      logger.innerHTML += `${args[i]} `;
+      appendLog('enabling audio');
     }
-  }
-  logger.innerHTML += '\n';
-  (() => {
-    logger.scrollTop = logger.scrollHeight;
-  })();
-}
+    await currentRoom.localParticipant.setMicrophoneEnabled(!enabled);
+    updateButtonsForPublishState();
+  },
+
+  toggleVideo: async () => {
+    if (!currentRoom) return;
+    const enabled = currentRoom.localParticipant.isCameraEnabled;
+    if (enabled) {
+      appendLog('disabling video');
+    } else {
+      appendLog('enabling video');
+    }
+    await currentRoom.localParticipant.setCameraEnabled(!enabled);
+    renderParticipant(currentRoom.localParticipant);
 
-function trackSubscribed(
-  div: HTMLDivElement,
-  track: Track,
-  participant: Participant,
-): HTMLMediaElement | null {
-  appendLog('track subscribed', track);
-  const element = track.attach();
-  div.appendChild(element);
-  return element;
-}
+    // update display
+    updateButtonsForPublishState();
+  },
 
-function trackUnsubscribed(
-  track: RemoteTrack | LocalTrack,
-  pub?: RemoteTrackPublication,
-  participant?: Participant,
-) {
-  let logName = track.name;
-  if (track.sid) {
-    logName = track.sid;
+  flipVideo: () => {
+    const videoPub = currentRoom?.localParticipant.getTrack(Track.Source.Camera);
+    if (!videoPub) {
+      return;
+    }
+    if (state.isFrontFacing) {
+      setButtonState('flip-video-button', 'Front Camera', false);
+    } else {
+      setButtonState('flip-video-button', 'Back Camera', false);
+    }
+    state.isFrontFacing = !state.isFrontFacing;
+    const options: VideoCaptureOptions = {
+      resolution: VideoPresets.qhd.resolution,
+      facingMode: state.isFrontFacing ? 'user' : 'environment',
+    };
+    videoPub.videoTrack?.restartTrack(options);
+  },
+
+  shareScreen: async () => {
+    if (!currentRoom) return;
+
+    const enabled = currentRoom.localParticipant.isScreenShareEnabled;
+    appendLog(`${enabled ? 'stopping' : 'starting'} screen share`);
+    await currentRoom.localParticipant.setScreenShareEnabled(!enabled);
+    updateButtonsForPublishState();
+  },
+
+  startAudio: () => {
+    currentRoom?.startAudio();
+  },
+
+  enterText: () => {
+    if (!currentRoom) return;
+    const textField = <HTMLInputElement>$('entry');
+    if (textField.value) {
+      const msg = state.encoder.encode(textField.value);
+      currentRoom.localParticipant.publishData(msg, DataPacket_Kind.RELIABLE);
+      (<HTMLTextAreaElement>(
+      $('chat')
+    )).value += `${currentRoom.localParticipant.identity} (me): ${textField.value}\n`;
+      textField.value = '';
+    }
+  },
+
+  disconnectRoom: () => {
+    if (currentRoom) {
+      currentRoom.disconnect();
+    }
+    if (state.bitrateInterval) {
+      clearInterval(state.bitrateInterval);
+    }
+  },
+
+  disconnectSignal: () => {
+    if (!currentRoom) return;
+    currentRoom.engine.client.close();
+    if (currentRoom.engine.client.onClose) {
+      currentRoom.engine.client.onClose('manual disconnect');
+    }
+  },
+
+  handleDeviceSelected: async (e: Event) => {
+    const deviceId = (<HTMLSelectElement>e.target).value;
+    const elementId = (<HTMLSelectElement>e.target).id;
+    const kind = elementMapping[elementId];
+    if (!kind) {
+      return;
+    }
+
+    state.defaultDevices.set(kind, deviceId);
+
+    if (currentRoom) {
+      await currentRoom.switchActiveDevice(kind, deviceId);
+    }
+  },
+};
+
+declare global {
+  interface Window {
+    currentRoom: any;
+    appActions: typeof appActions;
   }
-  appendLog('track unsubscribed', logName);
-  track.detach().forEach((element) => element.remove());
 }
 
-const encoder = new TextEncoder();
-const decoder = new TextDecoder();
+window.appActions = appActions;
+
+// --------------------------- event handlers ------------------------------- //
+
 function handleData(msg: Uint8Array, participant?: RemoteParticipant) {
-  const str = decoder.decode(msg);
+  const str = state.decoder.decode(msg);
   const chat = <HTMLTextAreaElement>$('chat');
   let from = 'server';
   if (participant) {
@@ -85,316 +256,277 @@ function handleData(msg: Uint8Array, participant?: RemoteParticipant) {
   chat.value += `${from}: ${str}\n`;
 }
 
-function handleSpeakerChanged(speakers: Participant[]) {
-  // remove tags from all
-  currentRoom.participants.forEach((participant) => {
-    setParticipantSpeaking(participant, speakers.includes(participant));
-  });
-
-  // do the same for local participant
-  setParticipantSpeaking(
-    currentRoom.localParticipant,
-    speakers.includes(currentRoom.localParticipant),
-  );
-}
-
-function setParticipantSpeaking(participant: Participant, speaking: boolean) {
-  participant.videoTracks.forEach((publication) => {
-    const { track } = publication;
-    if (track && track.kind === Track.Kind.Video) {
-      track.attachedElements.forEach((element) => {
-        if (speaking) {
-          element.classList.add('speaking');
-        } else {
-          element.classList.remove('speaking');
-        }
-      });
-    }
-  });
-}
-
-function participantConnected(participant: RemoteParticipant) {
-  appendLog('participant', participant.sid, 'connected', participant.metadata);
-
-  const div = document.createElement('div');
-  div.id = participant.sid;
-  div.innerText = participant.identity;
-  div.className = 'col-md-6 video-container';
-  $('remote-area')?.appendChild(div);
-
-  participant.on(ParticipantEvent.TrackSubscribed, (track) => {
-    trackSubscribed(div, track, participant);
-  });
-  participant.on(ParticipantEvent.TrackUnsubscribed, (track, pub) => {
-    trackUnsubscribed(track, pub, participant);
-  });
+function participantConnected(participant: Participant) {
+  appendLog('participant', participant.identity, 'connected', participant.metadata);
+  participant
+    .on(ParticipantEvent.TrackSubscribed, (_, pub: TrackPublication) => {
+      appendLog('subscribed to track', pub.trackSid, participant.identity);
+      renderParticipant(participant);
+      renderScreenShare();
+    })
+    .on(ParticipantEvent.TrackUnsubscribed, (_, pub: TrackPublication) => {
+      appendLog('unsubscribed from track', pub.trackSid);
+      renderParticipant(participant);
+      renderScreenShare();
+    })
+    .on(ParticipantEvent.TrackMuted, (pub: TrackPublication) => {
+      appendLog('track was muted', pub.trackSid, participant.identity);
+      renderParticipant(participant);
+    })
+    .on(ParticipantEvent.TrackUnmuted, (pub: TrackPublication) => {
+      appendLog('track was unmuted', pub.trackSid, participant.identity);
+      renderParticipant(participant);
+    })
+    .on(ParticipantEvent.IsSpeakingChanged, () => {
+      renderParticipant(participant);
+    })
+    .on(ParticipantEvent.ConnectionQualityChanged, () => {
+      renderParticipant(participant);
+    });
 }
 
 function participantDisconnected(participant: RemoteParticipant) {
   appendLog('participant', participant.sid, 'disconnected');
 
-  $(participant.sid)?.remove();
+  renderParticipant(participant, true);
 }
 
 function handleRoomDisconnect() {
+  if (!currentRoom) return;
   appendLog('disconnected from room');
   setButtonsForState(false);
-  $('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;
+  renderParticipant(currentRoom.localParticipant, true);
+  currentRoom.participants.forEach((p) => {
+    renderParticipant(p, true);
+  });
+  renderScreenShare();
 
-  el.innerHTML = buttonText;
-  if (isActive) {
-    el.classList.add('active');
-  } else {
-    el.classList.remove('active');
+  const container = $('participants-area');
+  if (container) {
+    container.innerHTML = '';
   }
-}
 
-function clearChat() {
+  // clear the chat area on disconnect
   const chat = <HTMLTextAreaElement>$('chat');
   chat.value = '';
+
+  currentRoom = undefined;
+  window.currentRoom = undefined;
 }
 
-function clearRemoteArea() {
-  const el = $('remote-area');
-  if (!el) return;
+// -------------------------- rendering helpers ----------------------------- //
 
-  while (el.firstChild) {
-    el.removeChild(el.firstChild);
+function appendLog(...args: any[]) {
+  const logger = $('log')!;
+  for (let i = 0; i < arguments.length; i += 1) {
+    if (typeof args[i] === 'object') {
+      logger.innerHTML
+        += `${JSON && JSON.stringify
+          ? JSON.stringify(args[i], undefined, 2)
+          : args[i]} `;
+    } else {
+      logger.innerHTML += `${args[i]} `;
+    }
   }
+  logger.innerHTML += '\n';
+  (() => {
+    logger.scrollTop = logger.scrollHeight;
+  })();
 }
 
-let currentRoom: Room;
-window.connectWithFormInput = () => {
-  const url = (<HTMLInputElement>$('url')).value;
-  const token = (<HTMLInputElement>$('token')).value;
-  const simulcast = (<HTMLInputElement>$('simulcast')).checked;
-  const forceTURN = (<HTMLInputElement>$('force-turn')).checked;
-
-  window.connectToRoom(url, token, simulcast, forceTURN);
-};
-
-window.connectToRoom = async (
-  url: string,
-  token: string,
-  simulcast: boolean = false,
-  forceTURN: boolean = false,
-) => {
-  let room: Room;
-  const rtcConfig: RTCConfiguration = {};
-  if (forceTURN) {
-    rtcConfig.iceTransportPolicy = 'relay';
+// updates participant UI
+function renderParticipant(participant: Participant, remove: boolean = false) {
+  const container = $('participants-area');
+  if (!container) return;
+  let div = $(`participant-${participant.sid}`);
+  if (!div && !remove) {
+    div = document.createElement('div');
+    div.id = `participant-${participant.sid}`;
+    div.className = 'participant';
+    div.innerHTML = `
+      <video id="video-${participant.sid}"></video>
+      <audio id="audio-${participant.sid}"></audio>
+      <div class="info-bar">
+        <div id="name-${participant.sid}" class="name">
+        </div>
+        <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>
+          <span id="mic-${participant.sid}" class="mic-on"></span>
+        </div>
+      </div>
+    `;
+    container.appendChild(div);
+
+    const sizeElm = $(`size-${participant.sid}`);
+    const videoElm = <HTMLVideoElement>$(`video-${participant.sid}`);
+    videoElm.onresize = () => {
+      updateVideoSize(videoElm!, sizeElm!);
+    };
   }
-  const shouldPublish = (<HTMLInputElement>$('publish-option')).checked;
-
-  try {
-    room = await connect(url, token, {
-      logLevel: LogLevel.debug,
-      rtcConfig,
-      audio: shouldPublish,
-      video: shouldPublish,
-      autoManageVideo: true,
-      publishDefaults: {
-        simulcast,
-      },
-    });
-  } catch (error) {
-    let message: any = error;
-    if (error.message) {
-      message = error.message;
+  const videoElm = <HTMLVideoElement>$(`video-${participant.sid}`);
+  const audioELm = <HTMLAudioElement>$(`audio-${participant.sid}`);
+  if (remove) {
+    div?.remove();
+    if (videoElm) {
+      videoElm.srcObject = null;
+      videoElm.src = '';
+    }
+    if (audioELm) {
+      audioELm.srcObject = null;
+      audioELm.src = '';
     }
-    appendLog('could not connect:', message);
     return;
   }
 
-  appendLog('connected to room', room.name);
-  currentRoom = room;
-  window.currentRoom = room;
-  setButtonsForState(true);
-  updateButtonsForPublishState();
-
-  room
-    .on(RoomEvent.ParticipantConnected, participantConnected)
-    .on(RoomEvent.ParticipantDisconnected, participantDisconnected)
-    .on(RoomEvent.DataReceived, handleData)
-    .on(RoomEvent.ActiveSpeakersChanged, handleSpeakerChanged)
-    .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.LocalTrackPublished, (pub: LocalTrackPublication) => {
-      if (pub.kind === Track.Kind.Video) {
-        attachLocalVideo();
-      }
-      updateButtonsForPublishState();
-    })
-    .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');
-      } else {
-        $('start-audio-button')?.removeAttribute('disabled');
-      }
-    })
-    .on(RoomEvent.MediaDevicesError, (e: Error) => {
-      const failure = MediaDeviceFailure.getFailure(e);
-      appendLog('media device failure', failure);
-    })
-    .on(RoomEvent.ConnectionQualityChanged,
-      (quality: ConnectionQuality, participant: Participant) => {
-        appendLog('connection quality changed', participant.identity, quality);
-      });
-
-  appendLog('room participants', room.participants.keys());
-  room.participants.forEach((participant) => {
-    participantConnected(participant);
-  });
-
-  $('local-video')!.innerHTML = `${room.localParticipant.identity} (me)`;
-};
-
-window.toggleVideo = async () => {
-  if (!currentRoom) return;
-  const video = getMyVideo();
-  if (currentRoom.localParticipant.isCameraEnabled) {
-    appendLog('disabling video');
-    await currentRoom.localParticipant.setCameraEnabled(false);
-    // hide from display
-    if (video) {
-      video.style.display = 'none';
-    }
+  // update properties
+  $(`name-${participant.sid}`)!.innerHTML = participant.identity;
+  const micElm = $(`mic-${participant.sid}`)!;
+  const signalElm = $(`signal-${participant.sid}`)!;
+  const cameraPub = participant.getTrack(Track.Source.Camera);
+  const micPub = participant.getTrack(Track.Source.Microphone);
+  if (participant.isSpeaking) {
+    div!.classList.add('speaking');
   } else {
-    appendLog('enabling video');
-    await currentRoom.localParticipant.setCameraEnabled(true);
-    attachLocalVideo();
-    if (video) {
-      video.style.display = '';
-    }
+    div!.classList.remove('speaking');
   }
-  updateButtonsForPublishState();
-};
 
-window.toggleAudio = async () => {
-  if (!currentRoom) return;
-  if (currentRoom.localParticipant.isMicrophoneEnabled) {
-    appendLog('disabling audio');
-    await currentRoom.localParticipant.setMicrophoneEnabled(false);
+  const cameraEnabled = cameraPub && cameraPub.isSubscribed && !cameraPub.isMuted;
+  if (cameraEnabled) {
+    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);
   } else {
-    appendLog('enabling audio');
-    await currentRoom.localParticipant.setMicrophoneEnabled(true);
+    videoElm.src = '';
+    videoElm.srcObject = null;
   }
-  updateButtonsForPublishState();
-};
 
-window.enterText = () => {
-  const textField = <HTMLInputElement>$('entry');
-  if (textField.value) {
-    const msg = encoder.encode(textField.value);
-    currentRoom.localParticipant.publishData(msg, DataPacket_Kind.RELIABLE);
-    (<HTMLTextAreaElement>(
-      $('chat')
-    )).value += `${currentRoom.localParticipant.identity} (me): ${textField.value}\n`;
-    textField.value = '';
-  }
-};
-
-window.shareScreen = async () => {
-  if (!currentRoom) return;
-
-  if (currentRoom.localParticipant.isScreenShareEnabled) {
-    appendLog('stopping screen share');
-    await currentRoom.localParticipant.setScreenShareEnabled(false);
+  const micEnabled = micPub && micPub.isSubscribed && !micPub.isMuted;
+  if (micEnabled) {
+    if (!(participant instanceof LocalParticipant)) {
+      // don't attach local audio
+      micPub?.audioTrack?.attach(audioELm);
+    }
+    micElm.className = 'mic-on';
+    micElm.innerHTML = '<i class="fas fa-microphone"></i>';
   } else {
-    appendLog('starting screen share');
-    await currentRoom.localParticipant.setScreenShareEnabled(true);
-    appendLog('started screen share');
-  }
-  updateButtonsForPublishState();
-};
-
-window.disconnectSignal = () => {
-  if (!currentRoom) return;
-  currentRoom.engine.client.close();
-  if (currentRoom.engine.client.onClose) {
-    currentRoom.engine.client.onClose('manual disconnect');
+    micElm.className = 'mic-off';
+    micElm.innerHTML = '<i class="fas fa-microphone-slash"></i>';
   }
-};
 
-window.disconnectRoom = () => {
-  if (currentRoom) {
-    currentRoom.disconnect();
+  switch (participant.connectionQuality) {
+    case ConnectionQuality.Excellent:
+    case ConnectionQuality.Good:
+    case ConnectionQuality.Poor:
+      signalElm.className = `connection-${participant.connectionQuality}`;
+      signalElm.innerHTML = '<i class="fas fa-circle"></i>';
+      break;
+    default:
+      signalElm.innerHTML = '';
+      // do nothing
   }
-};
-
-window.startAudio = () => {
-  currentRoom.startAudio();
-};
+}
 
-let isFrontFacing = true;
-window.flipVideo = () => {
-  const videoPub = currentRoom.localParticipant.getTrack(Track.Source.Camera);
-  if (!videoPub) {
+function renderScreenShare() {
+  const div = $('screenshare-area')!;
+  if (!currentRoom || currentRoom.state !== RoomState.Connected) {
+    div.style.display = 'none';
     return;
   }
-  if (isFrontFacing) {
-    setButtonState('flip-video-button', 'Front Camera', false);
+  let participant: Participant | undefined;
+  let screenSharePub: TrackPublication | undefined = currentRoom.localParticipant.getTrack(
+    Track.Source.ScreenShare,
+  );
+  if (!screenSharePub) {
+    currentRoom.participants.forEach((p) => {
+      if (screenSharePub) {
+        return;
+      }
+      participant = p;
+      const pub = p.getTrack(Track.Source.ScreenShare);
+      if (pub?.isSubscribed) {
+        screenSharePub = pub;
+      }
+    });
   } else {
-    setButtonState('flip-video-button', 'Back Camera', false);
+    participant = currentRoom.localParticipant;
   }
-  isFrontFacing = !isFrontFacing;
-  const options: CreateVideoTrackOptions = {
-    resolution: VideoPresets.qhd.resolution,
-    facingMode: isFrontFacing ? 'user' : 'environment',
-  };
-  videoPub.videoTrack?.restartTrack(options);
-};
 
-const defaultDevices = new Map<MediaDeviceKind, string>();
-window.handleDeviceSelected = async (e: Event) => {
-  const deviceId = (<HTMLSelectElement>e.target).value;
-  const elementId = (<HTMLSelectElement>e.target).id;
-  const kind = elementMapping[elementId];
-  if (!kind) {
-    return;
+  if (screenSharePub && participant) {
+    div.style.display = 'block';
+    const videoElm = <HTMLVideoElement>$('screenshare-video');
+    screenSharePub.videoTrack?.attach(videoElm);
+    videoElm.onresize = () => {
+      updateVideoSize(videoElm, <HTMLSpanElement>$('screenshare-resolution'));
+    };
+    const infoElm = $('screenshare-info')!;
+    infoElm.innerHTML = `Screenshare from ${participant.identity}`;
+  } else {
+    div.style.display = 'none';
   }
+}
 
-  defaultDevices.set(kind, deviceId);
-
-  if (currentRoom) {
-    await currentRoom.switchActiveDevice(kind, deviceId);
+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;
+    }
+  }
+}
 
-setTimeout(handleDevicesChanged, 100);
+function updateVideoSize(element: HTMLVideoElement, target: HTMLElement) {
+  target.innerHTML = `(${element.videoWidth}x${element.videoHeight})`;
+}
 
-async function attachLocalVideo() {
-  const videoPub = currentRoom.localParticipant.getTrack(Track.Source.Camera);
-  const videoTrack = videoPub?.videoTrack;
-  if (!videoTrack) {
-    return;
-  }
+function setButtonState(buttonId: string, buttonText: string, isActive: boolean) {
+  const el = $(buttonId);
+  if (!el) return;
 
-  if (videoTrack.attachedElements.length === 0) {
-    const video = videoTrack.attach();
-    video.style.transform = 'scale(-1, 1)';
-    $('local-video')!.appendChild(video);
+  el.innerHTML = buttonText;
+  if (isActive) {
+    el.classList.add('active');
+  } else {
+    el.classList.remove('active');
   }
 }
 
+setTimeout(handleDevicesChanged, 100);
+
 function setButtonsForState(connected: boolean) {
   const connectedSet = [
     'toggle-video-button',
@@ -403,6 +535,7 @@ function setButtonsForState(connected: boolean) {
     'disconnect-ws-button',
     'disconnect-room-button',
     'flip-video-button',
+    'send-button',
   ];
   const disconnectedSet = ['connect-button'];
 
@@ -413,10 +546,6 @@ function setButtonsForState(connected: boolean) {
   toAdd.forEach((id) => $(id)?.setAttribute('disabled', 'true'));
 }
 
-function getMyVideo() {
-  return <HTMLVideoElement>document.querySelector('#local-video video');
-}
-
 const elementMapping: { [k: string]: MediaDeviceKind } = {
   'video-input': 'videoinput',
   'audio-input': 'audioinput',
@@ -430,7 +559,7 @@ async function handleDevicesChanged() {
     }
     const devices = await Room.getLocalDevices(kind);
     const element = <HTMLSelectElement>$(id);
-    populateSelect(kind, element, devices, defaultDevices.get(kind));
+    populateSelect(kind, element, devices, state.defaultDevices.get(kind));
   }));
 }