fix: Fix TypeError in Bidirectional sample on Firefox (#832)

* Fix TypeError in Bidirectional sample on Firefox 108

* fix

* fix

* fix

Author: karasusan

WebApp/client/public/bidirectional/js/main.js

@@ -57,10 +57,6 @@ setupButton.addEventListener('click', setUp);
 const hangUpButton = document.getElementById('hangUpButton');
 hangUpButton.addEventListener('click', hangUp);
 
-window.addEventListener('beforeunload', async () => {
-  await sendVideo.stop();
-}, true);
-
 setupConfig();
 
 async function setupConfig() {
@@ -84,7 +80,6 @@ async function startVideo() {
   cameraWidthInput.disabled = true;
   cameraHeightInput.disabled = true;
   startButton.disabled = true;
-  setupButton.disabled = false;
 
   let width = 0;
   let height = 0;
@@ -98,6 +93,9 @@ async function startVideo() {
   }
 
   await sendVideo.startLocalVideo(videoSelect.value, audioSelect.value, width, height);
+
+  // enable setup button after initializing local video.
+  setupButton.disabled = false;
 }
 
 async function setUp() {
@@ -127,6 +125,10 @@ async function setUp() {
     }
   };
 
+  window.addEventListener('beforeunload', async () => {
+    await renderstreaming.stop();
+  }, true);
+
   await renderstreaming.start();
   await renderstreaming.createConnection(connectionId);
 }
@@ -280,4 +282,4 @@ function clearStatsMessage() {
   remoteVideoStatsDiv.innerHTML = '';
   messageDiv.style.display = 'none';
   messageDiv.innerHTML = '';
-}
+}

WebApp/client/public/bidirectional/js/sendvideo.js

@@ -7,10 +7,10 @@ export class SendVideo {
   }
 
   /**
-   * @param {MediaTrackConstraints} videoSource 
-   * @param {MediaTrackConstraints} audioSource 
-   * @param {number} videoWidth 
-   * @param {number} videoHeight 
+   * @param {MediaTrackConstraints} videoSource
+   * @param {MediaTrackConstraints} audioSource
+   * @param {number} videoWidth
+   * @param {number} videoHeight
    */
   async startLocalVideo(videoSource, audioSource, videoWidth, videoHeight) {
     try {
@@ -42,7 +42,7 @@ export class SendVideo {
   }
 
   /**
-   * @param {MediaStreamTrack} track 
+   * @param {MediaStreamTrack} track
    */
   addRemoteTrack(track) {
     if (this.remoteVideo.srcObject == null) {

WebApp/client/src/pointercorrect.js

@@ -5,7 +5,7 @@ export const LetterBoxType = {
 
 export class PointerCorrector {
   /**
-   * @param {Number} videoWidth 
+   * @param {Number} videoWidth
    * @param {Number} videoHeight
    * @param {DOMRect} rect
    */
@@ -63,7 +63,7 @@ export class PointerCorrector {
   }
 
   /**
-   * @param {Number} videoWidth 
+   * @param {Number} videoWidth
    * @param {Number} videoHeight
    * @param {DOMRect} rect
    */
@@ -99,8 +99,8 @@ export class PointerCorrector {
   /**
    * Returns rectangle for displaying video with the origin at the left-top of the element.
    * Not considered applying CSS like `object-fit`.
-   * @returns {Object} 
-   */  
+   * @returns {Object}
+   */
   get contentRect() {
     const letterBoxType = this.letterBoxType;
     const letterBoxSize = this.letterBoxSize;
@@ -116,4 +116,4 @@ export class PointerCorrector {
   _reset() {
     this._contentRect = this.contentRect;
   }
-}  
+}

WebApp/client/src/renderstreaming.js

@@ -88,7 +88,7 @@ export class RenderStreaming {
 
   /**
    * if not set argument, a generated uuid is used.
-   * @param {string | null} connectionId 
+   * @param {string | null} connectionId
    */
   async createConnection(connectionId) {
     this._connectionId = connectionId ? connectionId : uuid4();
@@ -150,15 +150,15 @@ export class RenderStreaming {
   }
 
   /**
-   * @param {string} label 
+   * @param {string} label
    * @returns {RTCDataChannel | null}
    */
   createDataChannel(label) {
     return this._peer.createDataChannel(this._connectionId, label);
   }
 
   /**
-   * @param {MediaStreamTrack} track 
+   * @param {MediaStreamTrack} track
    * @returns {RTCRtpSender | null}
    */
   addTrack(track) {

WebApp/client/src/signaling.js

@@ -76,7 +76,7 @@ export class Signaling extends EventTarget {
             break;
           default:
             break;
-        }     
+        }
       }
       await this.sleep(this.interval);
     }
@@ -344,4 +344,4 @@ export class WebSocketSignaling extends EventTarget {
     Logger.log(sendJson);
     this.websocket.send(sendJson);
   }
-}
+}

WebApp/client/src/touchflags.js

@@ -4,4 +4,4 @@ export const TouchFlags =
   PrimaryTouch: 1 << 4,
   Tap: 1 << 5,
   OrphanedPrimaryTouch: 1 << 6,
-};
+};

WebApp/client/src/touchphase.js

@@ -5,4 +5,4 @@ export const TouchPhase = {
     Ended: 3,
     Canceled: 4,
     Stationary: 5
-  };
+  };