classroom/src/joinroom.js
/**
 * Join a Room.
 * @param token - the AccessToken used to join a Room
 * @param connectOptions - the ConnectOptions used to join a Room
 */
Join a Room.
@param token - the AccessToken used to join a Room
@param connectOptions - the ConnectOptions used to join a Room
Join a Room . @param token - the AccessToken used to join a Room @param connectOptions - the ConnectOptions used to join a Room
async function joinRoom(token, connectOptions) {
  const room = await connect(token, connectOptions);
  localVideoTrack = Array.from(room.localParticipant.videoTracks.values())[0].track;
  window.room = room;
  participantConnected(room.localParticipant, room);
  room.participants.forEach(participant => {
    participantConnected(participant, room);
  });
  room.on('participantConnected', participant => {
    participantConnected(participant, room);
  });
  room.on('participantDisconnected', participant => {
    participantDisconnected(participant, room);
  });
  setCurrentActiveParticipant(room);
  room.on('dominantSpeakerChanged', () => {
    if (!isActiveParticipantPinned) {
      setCurrentActiveParticipant(room);
    }
  });
  $leave.click(function onLeave() {
    $leave.off('click', onLeave);
    room.disconnect();
  });
 mute.onclick = function () {
      mute.style.display = 'none';
      unmute.style.display = 'inline-block';
    room.localParticipant.audioTracks.forEach(audioTrack => {
        audioTrack.track.disable();
    });
  };
   unmute.onclick = function () {
      mute.style.display = 'inline-block';
      unmute.style.display = 'none';
    room.localParticipant.audioTracks.forEach(audioTrack => {
        audioTrack.track.enable();
    });
  };
   showVideo.onclick = function () {
      hideVideo.style.display = 'inline-block';
      showVideo.style.display = 'none';
     room.localParticipant.videoTracks.forEach(videoTrack => {
        videoTrack.track.enable();
      });
  };
    hideVideo.onclick = function () {
        hideVideo.style.display = 'none';
      showVideo.style.display = 'inline-block';
     room.localParticipant.videoTracks.forEach(videoTrack => {
        videoTrack.track.disable();
      });
  };
  return new Promise((resolve, reject) => {
    window.onbeforeunload = () => {
      room.disconnect();
    };
    if (isMobile) {
      window.onpagehide = () => {
        room.disconnect();
      };
      document.onvisibilitychange = async () => {
        if (document.visibilityState === 'hidden') {
          localVideoTrack.stop();
          room.localParticipant.unpublishTrack(localVideoTrack);
        } else {
          localVideoTrack = await createLocalVideoTrack(connectOptions.video);
          await room.localParticipant.publishTrack(localVideoTrack);
        }
      };
    }
    room.once('disconnected', (room, error) => {
      window.onbeforeunload = null;
      if (isMobile) {
        window.onpagehide = null;
        document.onvisibilitychange = null;
      }
      localVideoTrack.stop();
      participantDisconnected(room.localParticipant, room);
      room.participants.forEach(participant => {
        participantDisconnected(participant, room);
      });
      $activeVideo.get(0).srcObject = null;
      window.room = null;
      if (error) {
        reject(error);
      } else {
        resolve();
      }
    });
  });
}
async function joinRoom ( token , connectOptions ) { const room = await connect ( token , connectOptions ) ; localVideoTrack = Array . from ( room . localParticipant . videoTracks . values ( ) ) [ 0 ] . track ; window . room = room ; participantConnected ( room . localParticipant , room ) ; room . participants . forEach ( participant => { participantConnected ( participant , room ) ; } ) ; room . on ( 'participantConnected' , participant => { participantConnected ( participant , room ) ; } ) ; room . on ( 'participantDisconnected' , participant => { participantDisconnected ( participant , room ) ; } ) ; setCurrentActiveParticipant ( room ) ; room . on ( 'dominantSpeakerChanged' , ( ) => { if ( ! isActiveParticipantPinned ) { setCurrentActiveParticipant ( room ) ; } } ) ; $leave . click ( function onLeave ( ) { $leave . off ( 'click' , onLeave ) ; room . disconnect ( ) ; } ) ; mute . onclick = function ( ) { mute . style . display = 'none' ; unmute . style . display = 'inline-block' ; room . localParticipant . audioTracks . forEach ( audioTrack => { audioTrack . track . disable ( ) ; } ) ; } ; unmute . onclick = function ( ) { mute . style . display = 'inline-block' ; unmute . style . display = 'none' ; room . localParticipant . audioTracks . forEach ( audioTrack => { audioTrack . track . enable ( ) ; } ) ; } ; showVideo . onclick = function ( ) { hideVideo . style . display = 'inline-block' ; showVideo . style . display = 'none' ; room . localParticipant . videoTracks . forEach ( videoTrack => { videoTrack . track . enable ( ) ; } ) ; } ; hideVideo . onclick = function ( ) { hideVideo . style . display = 'none' ; showVideo . style . display = 'inline-block' ; room . localParticipant . videoTracks . forEach ( videoTrack => { videoTrack . track . disable ( ) ; } ) ; } ; return new Promise ( ( resolve , reject ) => { window . onbeforeunload = ( ) => { room . disconnect ( ) ; } ; if ( isMobile ) { window . onpagehide = ( ) => { room . disconnect ( ) ; } ; document . onvisibilitychange = async ( ) => { if ( document . visibilityState === 'hidden' ) { localVideoTrack . stop ( ) ; room . localParticipant . unpublishTrack ( localVideoTrack ) ; } else { localVideoTrack = await createLocalVideoTrack ( connectOptions . video ) ; await room . localParticipant . publishTrack ( localVideoTrack ) ; } } ; } room . once ( 'disconnected' , ( room , error ) => { window . onbeforeunload = null ; if ( isMobile ) { window . onpagehide = null ; document . onvisibilitychange = null ; } localVideoTrack . stop ( ) ; participantDisconnected ( room . localParticipant , room ) ; room . participants . forEach ( participant => { participantDisconnected ( participant , room ) ; } ) ; $activeVideo . get ( 0 ) . srcObject = null ; window . room = null ; if ( error ) { reject ( error ) ; } else { resolve ( ) ; } } ) ; } ) ; }
Join a Room.
Join a Room .
// Join to the Room with the given AccessToken and ConnectOptions. // Save the LocalVideoTrack. // Make the Room available in the JavaScript console for debugging. // Handle the LocalParticipant's media. // Subscribe to the media published by RemoteParticipants already in the Room. // Subscribe to the media published by RemoteParticipants joining the Room later. // Handle a disconnected RemoteParticipant. // Set the current active Participant. // Update the active Participant when changed, only if the user has not // pinned any particular Participant as the active Participant. // Leave the Room when the "Leave Room" button is clicked. // Leave the Room when the "beforeunload" event is fired. // TODO(mmalavalli): investigate why "pagehide" is not working in iOS Safari. // In iOS Safari, "beforeunload" is not fired, so use "pagehide" instead. // On mobile browsers, use "visibilitychange" event to determine when // the app is backgrounded or foregrounded. // When the app is backgrounded, your app can no longer capture // video frames. So, stop and unpublish the LocalVideoTrack. // When the app is foregrounded, your app can now continue to // capture video frames. So, publish a new LocalVideoTrack. // Clear the event handlers on document and window.. // Stop the LocalVideoTrack. // Handle the disconnected LocalParticipant. // Handle the disconnected RemoteParticipants. // Clear the active Participant's video. // Clear the Room reference used for debugging from the JavaScript console. // Reject the Promise with the TwilioError so that the Room selection // modal (plus the TwilioError message) can be displayed. // Resolve the Promise so that the Room selection modal can be // displayed.