fix: Fix thte issue that ICE server configuration are not changed

WebApp/client/public/css/main.css

@@ -18,12 +18,43 @@ body {
   word-break: break-word;
 }
 
+button {
+  margin: 20px 10px 0 0;
+  width: 130px;
+}
+
+button#gather {
+  display: block;
+}
+
 section {
   border-bottom: 1px solid #eee;
   margin: 0 0 1.5em 0;
   padding: 0 0 1.5em 0;
 }
 
+section#iceServers label {
+  display: inline-block;
+  width: 150px;
+}
+
+section#iceServers input {
+  margin: 0 0 10px;
+  width: 260px;
+}
+
+select {
+  margin: 0 1em 1em 0;
+  position: relative;
+  top: -1px;
+}
+
+select#servers {
+  font-size: 1em;
+  padding: 5px;
+  width: 420px;
+}
+
 section:last-child {
   border-bottom: none;
   margin: 0;

WebApp/client/public/index.html

@@ -15,9 +15,33 @@ <h1>Unity Render Streaming Samples</h1>
     </section>
 
     <section>
+      <h2>Server Configuration</h2>
       <div id="startup"></div>
     </section>
 
+    <section id="iceServers">
+      <h2>ICE servers</h2>
+      <select id="servers" size="4">
+      </select>
+      <div>
+          <label for="url">STUN or TURN URI:</label>
+          <input id="url">
+      </div>
+      <div>
+          <label for="username">TURN username:</label>
+          <input id="username">
+      </div>
+      <div>
+          <label for="password">TURN password:</label>
+          <input id="password">
+      </div>
+      <div>
+          <button id="add">Add Server</button>
+          <button id="remove">Remove Server</button>
+          <button id="reset">Reset to defaults</button>
+      </div>
+  </section>
+
     <section>
       <h2 id="receiver"><a href="receiver/index.html">Receiver Sample</a></h2>
       <p>This is a sample for receiving video / audio from Unity.</p>
@@ -50,4 +74,4 @@ <h2 id="videoplayer"><a href="videoplayer/index.html">VideoPlayer Sample</a></h2
   </div>
 
   <script type="module" src="js/main.js"></script>
-</body>
+</body>

WebApp/client/public/js/config.js

@@ -1,3 +1,5 @@
+import {getServers} from "./icesettings.js";
+
 export async function getServerConfig() {
   const protocolEndPoint = location.origin + '/config';
   const createResponse = await fetch(protocolEndPoint);
@@ -7,6 +9,6 @@ export async function getServerConfig() {
 export function getRTCConfiguration() {
   let config = {};
   config.sdpSemantics = 'unified-plan';
-  config.iceServers = [{ urls: ['stun:stun.l.google.com:19302'] }];
+  config.iceServers = getServers();
   return config;
-}
+}

WebApp/client/public/js/icesettings.js

@@ -0,0 +1,103 @@
+// This code is referenced from webrtc sample.
+// https://github.com/webrtc/samples/blob/gh-pages/src/content/peerconnection/trickle-ice/js/main.js
+
+const servers = document.querySelector('select#servers');
+const urlInput = document.querySelector('input#url');
+const usernameInput = document.querySelector('input#username');
+const passwordInput = document.querySelector('input#password');
+
+const allServersKey = 'servers';
+
+export function addServer() {
+  const scheme = urlInput.value.split(':')[0];
+  if (!['stun', 'stuns', 'turn', 'turns'].includes(scheme)) {
+    alert(`URI scheme ${scheme} is not valid`);
+    return;
+  }
+
+  // Store the ICE server as a stringified JSON object in option.value.
+  const option = document.createElement('option');
+  const iceServer = {
+    urls: [urlInput.value],
+    username: usernameInput.value,
+    credential: passwordInput.value
+  };
+  option.value = JSON.stringify(iceServer);
+  option.text = `${urlInput.value} `;
+  const username = usernameInput.value;
+  const password = passwordInput.value;
+  if (username || password) {
+    option.text += (` [${username}:${password}]`);
+  }
+  option.ondblclick = selectServer;
+  servers.add(option);
+  urlInput.value = usernameInput.value = passwordInput.value = '';
+  writeServersToLocalStorage();
+}
+
+export function removeServer() {
+  for (let i = servers.options.length - 1; i >= 0; --i) {
+    if (servers.options[i].selected) {
+      servers.remove(i);
+    }
+  }
+  writeServersToLocalStorage();
+}
+
+export function reset() {
+  window.localStorage.clear();
+  document.querySelectorAll('select#servers option').forEach(option => option.remove());
+  const serversSelect = document.querySelector('select#servers');
+  setDefaultServer(serversSelect);
+}
+
+function selectServer(event) {
+  const option = event.target;
+  const value = JSON.parse(option.value);
+  urlInput.value = value.urls[0];
+  usernameInput.value = value.username || '';
+  passwordInput.value = value.credential || '';
+}
+
+function setDefaultServer(serversSelect) {
+  const option = document.createElement('option');
+  option.value = '{"urls":["stun:stun.l.google.com:19302"]}';
+  option.text = 'stun:stun.l.google.com:19302';
+  option.ondblclick = selectServer;
+  serversSelect.add(option);
+}
+
+function writeServersToLocalStorage() {
+  const serversSelect = document.querySelector('select#servers');
+  const allServers = JSON.stringify(Object.values(serversSelect.options).map(o => JSON.parse(o.value)));
+  window.localStorage.setItem(allServersKey, allServers);
+}
+
+export function readServersFromLocalStorage() {
+  document.querySelectorAll('select#servers option').forEach(option => option.remove());
+  const serversSelect = document.querySelector('select#servers');
+  const storedServers = window.localStorage.getItem(allServersKey);
+
+  if (storedServers === null || storedServers === '') {
+    setDefaultServer(serversSelect);
+  } else {
+    JSON.parse(storedServers).forEach((server) => {
+      const o = document.createElement('option');
+      o.value = JSON.stringify(server);
+      o.text = server.urls[0];
+      o.ondblclick = selectServer;
+      serversSelect.add(o);
+    });
+  }
+}
+
+export function getServers() {
+  const storedServers = window.localStorage.getItem(allServersKey);
+
+  if (storedServers === null || storedServers === '') {
+    return [{ urls: ['stun:stun.l.google.com:19302'] }];
+  }
+  else {
+    return JSON.parse(storedServers);
+  }
+}

WebApp/client/public/js/main.js

@@ -1,7 +1,15 @@
 import * as Config from "./config.js";
+import {addServer, removeServer, reset, readServersFromLocalStorage} from "./icesettings.js";
 
+const addButton = document.querySelector('button#add');
+const removeButton = document.querySelector('button#remove');
+const resetButton = document.querySelector('button#reset');
 const startupDiv = document.getElementById("startup");
-startupDiv.innerHTML = "<h3>Server Configuration</h3>";
+
+addButton.onclick = addServer;
+removeButton.onclick = removeServer;
+resetButton.onclick = reset;
+startupDiv.innerHTML = "";
 
 const displayConfig = async () => {
   const res = await Config.getServerConfig();
@@ -16,3 +24,4 @@ const displayConfig = async () => {
 };
 
 displayConfig();
+readServersFromLocalStorage();

com.unity.renderstreaming/Runtime/Scripts/Signaling/SignalingSettings.cs

@@ -85,7 +85,7 @@ public class IceServer
         ///
         /// </summary>
         /// <param name="server"></param>
-        public static implicit operator RTCIceServer(IceServer server)
+        public static explicit operator RTCIceServer(IceServer server)
         {
             var iceServer = new RTCIceServer
             {

com.unity.renderstreaming/Runtime/Scripts/SignalingManager.cs

@@ -198,7 +198,13 @@ private void _Run(
                 }
             }
 #endif
-            RTCIceServer[] iceServers = settings.iceServers.OfType<RTCIceServer>().ToArray();
+            int i = 0;
+            RTCIceServer[] iceServers = new RTCIceServer[settings.iceServers.Count()];
+            foreach (var iceServer in settings.iceServers)
+            {
+                iceServers[i] = (RTCIceServer)iceServer;
+                i++;
+            }
             RTCConfiguration _conf =
                 conf.GetValueOrDefault(new RTCConfiguration { iceServers = iceServers });
 

com.unity.renderstreaming/Samples~/Example/Scripts/SceneSelectUI.cs

@@ -26,7 +26,7 @@ internal class RenderStreamingSettings
         public const int DefaultStreamWidth = 1280;
         public const int DefaultStreamHeight = 720;
 
-        private bool useDefaultSettings = false;
+        private bool useDefaultSettings = true;
         private SignalingType signalingType = SignalingType.WebSocket;
         private string signalingAddress = "localhost";
         private int signalingInterval = 5000;