fix: Add autocomplete attribute into input elements to avoid issue of "disabled" attribute on Firefox (#834)

* wip

(cherry picked from commit f73792b9c689bac448c1a85ce4db2b21ccdf5187)

* set autocomplete attribute for firefox

* add null check

* fix

Author: karasusan

WebApp/client/public/bidirectional/index.html

@@ -16,23 +16,24 @@ <h1>Bidirectional Sample</h1>
     <div id="warning" hidden=true></div>
 
     <div id="select">
-      <label for="videoSource">Video source: </label><select id="videoSource"></select>
-      <label for="audioSource">Audio source: </label><select id="audioSource"></select>
+      <label for="videoSource">Video source: </label>
+      <select id="videoSource" autocomplete="off"></select>
+      <label for="audioSource">Audio source: </label>
+      <select id="audioSource" autocomplete="off"></select>
     </div>
 
     <div id="resolutionSelect">
-      <label for="videoResolution">Video resolution: </label><select id="videoResolution"></select>
+      <label for="videoResolution">Video resolution: </label><select id="videoResolution" autocomplete="off"></select>
     </div>
     <div id="resolutionInput">
-      <label for="cameraWidth">Camera width:</label><input id="cameraWidth" type="number" min="0" max="4096" disabled>
-      <label for="cameraHeight">Camera height:</label><input id="cameraHeight" type="number" min="0" max="4096"
-        disabled>
+      <label for="cameraWidth">Camera width:</label><input id="cameraWidth" type="number" min="0" max="4096" autocomplete="off" disabled>
+      <label for="cameraHeight">Camera height:</label><input id="cameraHeight" type="number" min="0" max="4096" autocomplete="off" disabled>
     </div>
 
     <div id="buttons">
-      <button type="button" id="startVideoButton">Start Video</button>
-      <button type="button" id="setUpButton" disabled>Set Up</button>
-      <button type="button" id="hangUpButton" disabled>Hang Up</button>
+      <button type="button" id="startVideoButton" autocomplete="off">Start Video</button>
+      <button type="button" id="setUpButton" autocomplete="off" disabled>Set Up</button>
+      <button type="button" id="hangUpButton"  autocomplete="off" disabled>Hang Up</button>
     </div>
 
     <div id="preview">
@@ -54,7 +55,7 @@ <h2>Remote</h2>
     </div>
     <div class="box">
       <span>Codec preferences:</span>
-      <select id="codecPreferences" disabled>
+      <select id="codecPreferences" autocomplete="off" disabled>
         <option selected value="">Default</option>
       </select>
     </div>
@@ -80,4 +81,4 @@ <h2>Remote</h2>
 
 </body>
 
-</html>
+</html>

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

@@ -57,6 +57,12 @@ setupButton.addEventListener('click', setUp);
 const hangUpButton = document.getElementById('hangUpButton');
 hangUpButton.addEventListener('click', hangUp);
 
+window.addEventListener('beforeunload', async () => {
+  if(!renderstreaming)
+    return;
+  await renderstreaming.stop();
+}, true);
+
 setupConfig();
 
 async function setupConfig() {
@@ -110,7 +116,7 @@ async function setUp() {
   renderstreaming.onConnect = () => {
     const tracks = sendVideo.getLocalTracks();
     for (const track of tracks) {
-      renderstreaming.addTrack(track);
+      renderstreaming.addTransceiver(track, { direction: 'sendonly' });
     }
     setCodecPreferences();
     showStatsMessage();
@@ -125,10 +131,6 @@ async function setUp() {
     }
   };
 
-  window.addEventListener('beforeunload', async () => {
-    await renderstreaming.stop();
-  }, true);
-
   await renderstreaming.start();
   await renderstreaming.createConnection(connectionId);
 }

WebApp/client/public/multiplay/index.html

@@ -20,14 +20,14 @@ <h1>Multiplay Sample</h1>
 
     <div class="box">
       <span>Codec preferences:</span>
-      <select id="codecPreferences" disabled>
+      <select id="codecPreferences" autocomplete="off" disabled>
         <option selected value="">Default</option>
       </select>
     </div>
 
     <div class="box">
       <span>Lock Cursor to Player:</span>
-      <input type="checkbox" id="lockMouseCheck">
+      <input type="checkbox" id="lockMouseCheck" autocomplete="off" />
     </div>
 
     <p>
@@ -51,4 +51,4 @@ <h1>Multiplay Sample</h1>
 
 </body>
 
-</html>
+</html>

WebApp/client/public/multiplay/js/main.js

@@ -39,6 +39,8 @@ window.addEventListener('resize', function () {
 }, true);
 
 window.addEventListener('beforeunload', async () => {
+  if(!renderstreaming)
+    return;
   await renderstreaming.stop();
 }, true);
 
@@ -198,4 +200,4 @@ function clearStatsMessage() {
   intervalId = null;
   messageDiv.style.display = 'none';
   messageDiv.innerHTML = '';
-}
+}

WebApp/client/public/receiver/index.html

@@ -20,18 +20,18 @@ <h1>Receiver Sample</h1>
 
     <div class="box">
       <span>Codec preferences:</span>
-      <select id="codecPreferences" disabled>
+      <select id="codecPreferences" autocomplete="off" disabled>
         <option selected value="">Default</option>
       </select>
     </div>
 
     <div class="box">
       <span>Lock Cursor to Player:</span>
-      <input type="checkbox" id="lockMouseCheck">
+      <input type="checkbox" id="lockMouseCheck" autocomplete="off" />
     </div>
 
     <p>
-      For more information about sample, see 
+      For more information about sample, see
         <a href="https://docs.unity3d.com/Packages/[email protected]/manual/sample-broadcast.html">Broadcast sample</a> document page.
     </p>
 
@@ -51,4 +51,4 @@ <h1>Receiver Sample</h1>
 
 </body>
 
-</html>
+</html>

WebApp/client/src/peer.js

@@ -180,7 +180,7 @@ export default class Peer extends EventTarget {
     try {
       await this.pc.addIceCandidate(candidate);
     } catch (e) {
-      if (this.pc && !this.ignoreOffer) 
+      if (this.pc && !this.ignoreOffer)
         this.warn(`${this.pc} this candidate can't accept current signaling state ${this.pc.signalingState}.`);
     }
   }

WebApp/client/src/renderstreaming.js

@@ -165,6 +165,16 @@ export class RenderStreaming {
     return this._peer.addTrack(this._connectionId, track);
   }
 
+  /**
+   * @param {MediaStreamTrack | string} trackOrKind
+   * @param {RTCRtpTransceiverInit | null} init
+   * @returns {RTCRtpTransceiver | null}
+   */
+  addTransceiver(trackOrKind, init) {
+    return this._peer.addTransceiver(this._connectionId, trackOrKind, init);
+  }
+
+
   /**
    * @returns {RTCRtpTransceiver[] | null}
    */