From 579f88d4e7c0a408f1ea5e26e8d15565ab260517 Mon Sep 17 00:00:00 2001
From: Kazuki Matsumoto <1132081+karasusan@users.noreply.github.com>
Date: Thu, 12 Jan 2023 09:30:48 +0900
Subject: [PATCH] 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
---
 WebApp/client/public/bidirectional/index.html | 23 ++++++++++---------
 WebApp/client/public/bidirectional/js/main.js | 12 ++++++----
 WebApp/client/public/multiplay/index.html     |  6 ++---
 WebApp/client/public/multiplay/js/main.js     |  4 +++-
 WebApp/client/public/receiver/index.html      |  8 +++----
 WebApp/client/src/peer.js                     |  2 +-
 WebApp/client/src/renderstreaming.js          | 10 ++++++++
 7 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/WebApp/client/public/bidirectional/index.html b/WebApp/client/public/bidirectional/index.html
index e275d5b06..7881ab586 100644
--- a/WebApp/client/public/bidirectional/index.html
+++ b/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>
\ No newline at end of file
+</html>
diff --git a/WebApp/client/public/bidirectional/js/main.js b/WebApp/client/public/bidirectional/js/main.js
index 9c50395d8..b6805ba0b 100644
--- a/WebApp/client/public/bidirectional/js/main.js
+++ b/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);
 }
diff --git a/WebApp/client/public/multiplay/index.html b/WebApp/client/public/multiplay/index.html
index 01e7ad520..ff8efdc41 100644
--- a/WebApp/client/public/multiplay/index.html
+++ b/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>
\ No newline at end of file
+</html>
diff --git a/WebApp/client/public/multiplay/js/main.js b/WebApp/client/public/multiplay/js/main.js
index b75938d42..b9f147c07 100644
--- a/WebApp/client/public/multiplay/js/main.js
+++ b/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 = '';
-}
\ No newline at end of file
+}
diff --git a/WebApp/client/public/receiver/index.html b/WebApp/client/public/receiver/index.html
index e3dc616d1..d7fd0e5d7 100644
--- a/WebApp/client/public/receiver/index.html
+++ b/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/com.unity.renderstreaming@3.1/manual/sample-broadcast.html">Broadcast sample</a> document page.
     </p>
 
@@ -51,4 +51,4 @@ <h1>Receiver Sample</h1>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/WebApp/client/src/peer.js b/WebApp/client/src/peer.js
index fcb32dd1c..92fdd6f27 100644
--- a/WebApp/client/src/peer.js
+++ b/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}.`);
     }
   }
diff --git a/WebApp/client/src/renderstreaming.js b/WebApp/client/src/renderstreaming.js
index 628169446..0a9c42017 100644
--- a/WebApp/client/src/renderstreaming.js
+++ b/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}
    */