[EXPERIMENTAL] Feature/port mux setting

src/page/index.html

@@ -19,6 +19,10 @@
     .hidden {
       display: none;
     }
+
+    .settings-field > input:disabled {
+      opacity: 0.5;
+    }
   </style>
 </head>
 
@@ -68,6 +72,14 @@ <h2 class="centered">General</h2>
         <label class="settings-label">Stream2 Name:</label>
         <input id="stream2-field" name="stream2-field" value="stream2">
       </p>
+      <p class="settings-field settings-collapsable settings-field-row">
+        <label class="settings-label">Use Port Mux:</label>
+        <input type="checkbox" id="port-mux-toggle" style="vertical-align: middle;">
+      </p>
+      <p class="settings-field settings-collapsable">
+        <label class="settings-label">Port:</label>
+        <input id="port-mux-field" name="port-mux-field" pattern="[0-9]+" placeholder="set single port to use..." disabled>
+      </p>
       <hr class="paddedHR" />
       <p class="settings-field settings-collapsable">
         <label class="settings-label" for="level-input">Level:</label>
@@ -281,6 +293,9 @@ <h2 class="centered">Mixer Specific</h2>
       var authPasswordField = document.getElementById('auth-password-field');
       var authTokenField = document.getElementById('auth-token-field');
 
+      var portMuxToggle = document.getElementById('port-mux-toggle');
+      var portMuxField = document.getElementById('port-mux-field');
+
       function hideShowICEOptions() {
         var isTurnServer = turnRegex.test(iceField.value);
         var i = iceOptions.length;
@@ -496,6 +511,19 @@ <h2 class="centered">Mixer Specific</h2>
         populate(configuration);
       });
 
+      portMuxToggle.addEventListener('change', function () {
+        portMuxField.disabled = !portMuxToggle.checked;
+        configuration.usePortMux = portMuxToggle.checked ? parseInt(portMuxField.value) : NaN;
+        seal(configuration);
+      });
+
+      portMuxField.addEventListener('blur', function () {
+        var value = parseInt(portMuxField.value)
+        configuration.usePortMux = portMuxToggle.checked ? value : NaN;
+        portMuxField.value = isNaN(value) ? null : value;
+        seal(configuration);
+      });
+
       function populate(config) {
         hostField.value = config.host;
         appField.value = config.app;
@@ -529,6 +557,11 @@ <h2 class="centered">Mixer Specific</h2>
         mixerBackendSocketField.value = config.mixerBackendSocketField;
         mixerAuthenticationEnabledField.checked = config.mixerAuthenticationEnabled ? config.mixerAuthenticationEnabled : false
 
+        var hasPortMux = config.usePortMux && !isNaN(config.usePortMux);
+        portMuxToggle.checked = hasPortMux;
+        portMuxField.disabled = !hasPortMux;
+        portMuxField.value = hasPortMux ? config.usePortMux : null;
+
         function selectFieldFromConfiguration(value, selectElem) {
           var i = selectElem.childNodes.length;
           var option;

src/page/test/conference-api/index.js

@@ -144,9 +144,11 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   }
 
   const getSocketLocationFromProtocol = () => {
-    return !isSecure
-      ? { protocol: 'ws', port: serverSettings.wsport }
-      : { protocol: 'wss', port: serverSettings.wssport }
+    return window.getSocketProtocolPort(
+      protocol,
+      serverSettings,
+      configuration.usePortMux
+    )
   }
 
   const getAuthenticationParams = () => {

src/page/test/conference-streams-api/index.js

@@ -69,10 +69,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   var protocol = serverSettings.protocol
   var isSecure = protocol === 'https'
 
-  function getSocketLocationFromProtocol() {
-    return !isSecure
-      ? { protocol: 'ws', port: serverSettings.wsport }
-      : { protocol: 'wss', port: serverSettings.wssport }
+  const getSocketLocationFromProtocol = () => {
+    return window.getSocketProtocolPort(
+      protocol,
+      serverSettings,
+      configuration.usePortMux
+    )
   }
 
   function getUserMediaConfiguration() {

src/page/test/conference/index.js

@@ -220,9 +220,11 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   }
 
   function getSocketLocationFromProtocol() {
-    return !isSecure
-      ? { protocol: 'ws', port: serverSettings.wsport }
-      : { protocol: 'wss', port: serverSettings.wssport }
+    return window.getSocketProtocolPort(
+      protocol,
+      serverSettings,
+      configuration.usePortMux
+    )
   }
 
   function onPublisherEvent(event) {

src/page/test/conferenceComposite/index.js

@@ -63,10 +63,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
   var protocol = serverSettings.protocol
   var isSecure = protocol == 'https'
-  function getSocketLocationFromProtocol() {
-    return !isSecure
-      ? { protocol: 'ws', port: serverSettings.wsport }
-      : { protocol: 'wss', port: serverSettings.wssport }
+  const getSocketLocationFromProtocol = () => {
+    return window.getSocketProtocolPort(
+      protocol,
+      serverSettings,
+      configuration.usePortMux
+    )
   }
 
   function getAuthenticationParams() {

src/page/test/conferenceParticipant/index.js

@@ -71,11 +71,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   var participant
 
   var protocol = serverSettings.protocol
-  var isSecure = protocol == 'https'
-  function getSocketLocationFromProtocol() {
-    return !isSecure
-      ? { protocol: 'ws', port: serverSettings.wsport }
-      : { protocol: 'wss', port: serverSettings.wssport }
+  const getSocketLocationFromProtocol = () => {
+    return window.getSocketProtocolPort(
+      protocol,
+      serverSettings,
+      configuration.usePortMux
+    )
   }
 
   var bitrate = 0

src/page/test/playbackVOD/index.js

@@ -86,10 +86,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
   var protocol = serverSettings.protocol
   var isSecure = protocol === 'https'
-  function getSocketLocationFromProtocol() {
-    return !isSecure
-      ? { protocol: 'ws', port: serverSettings.wsport }
-      : { protocol: 'wss', port: serverSettings.wssport }
+  const getSocketLocationFromProtocol = () => {
+    return window.getSocketProtocolPort(
+      protocol,
+      serverSettings,
+      configuration.usePortMux
+    )
   }
 
   var defaultConfiguration = (function (useVideo, useAudio) {
@@ -142,12 +144,13 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   }
 
   async function getFileURL(filename) {
+    const { port } = getSocketLocationFromProtocol()
     var baseURL =
       protocol +
       '://' +
       configuration.host +
       ':' +
-      (isSecure ? serverSettings.hlssport : serverSettings.hlsport) +
+      port +
       '/' +
       configuration.app
     let url

src/page/test/publish/index.js

@@ -66,11 +66,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   var resolutionField = document.getElementById('resolution-field')
 
   var protocol = serverSettings.protocol
-  var isSecure = protocol == 'https'
   function getSocketLocationFromProtocol() {
-    return !isSecure
-      ? { protocol: 'ws', port: serverSettings.wsport }
-      : { protocol: 'wss', port: serverSettings.wssport }
+    return window.getSocketProtocolPort(
+      protocol,
+      serverSettings,
+      configuration.usePortMux
+    )
   }
 
   var bitrate = 0

src/page/test/publish1080/index.js

@@ -89,11 +89,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   }
 
   var protocol = serverSettings.protocol
-  var isSecure = protocol == 'https'
-  function getSocketLocationFromProtocol() {
-    return !isSecure
-      ? { protocol: 'ws', port: serverSettings.wsport }
-      : { protocol: 'wss', port: serverSettings.wssport }
+  const getSocketLocationFromProtocol = () => {
+    return window.getSocketProtocolPort(
+      protocol,
+      serverSettings,
+      configuration.usePortMux
+    )
   }
 
   var defaultConfiguration = {

src/page/test/publishAMFMetadata/index.js

@@ -68,11 +68,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   let metadataField = document.getElementById('metadata-field')
 
   var protocol = serverSettings.protocol
-  var isSecure = protocol == 'https'
-  function getSocketLocationFromProtocol() {
-    return !isSecure
-      ? { protocol: 'ws', port: serverSettings.wsport }
-      : { protocol: 'wss', port: serverSettings.wssport }
+  const getSocketLocationFromProtocol = () => {
+    return window.getSocketProtocolPort(
+      protocol,
+      serverSettings,
+      configuration.usePortMux
+    )
   }
 
   var bitrate = 0

src/page/test/publishAppend/index.js

@@ -90,11 +90,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   }
 
   var protocol = serverSettings.protocol
-  var isSecure = protocol == 'https'
-  function getSocketLocationFromProtocol() {
-    return !isSecure
-      ? { protocol: 'ws', port: serverSettings.wsport }
-      : { protocol: 'wss', port: serverSettings.wssport }
+  const getSocketLocationFromProtocol = () => {
+    return window.getSocketProtocolPort(
+      protocol,
+      serverSettings,
+      configuration.usePortMux
+    )
   }
 
   var defaultConfiguration = {

src/page/test/publishAudioCustomSettingsWebRTC/index.js

@@ -188,8 +188,6 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   streamTitle.innerText = configuration.stream1
 
   var protocol = serverSettings.protocol
-  var isSecure = protocol == 'https'
-
   var isPublishable = true
   function setPublishableState(isPublishableFlag) {
     isPublishable = isPublishableFlag
@@ -205,11 +203,14 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   }
   setPublishableState(true)
 
-  function getSocketLocationFromProtocol() {
-    return !isSecure
-      ? { protocol: 'ws', port: serverSettings.wsport }
-      : { protocol: 'wss', port: serverSettings.wssport }
+  const getSocketLocationFromProtocol = () => {
+    return window.getSocketProtocolPort(
+      protocol,
+      serverSettings,
+      configuration.usePortMux
+    )
   }
+
   var defaultConfiguration = {
     protocol: getSocketLocationFromProtocol().protocol,
     port: getSocketLocationFromProtocol().port,

src/page/test/publishAuth/index.js

@@ -95,11 +95,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   streamTitle.innerText = configuration.stream1
 
   var protocol = serverSettings.protocol
-  var isSecure = protocol == 'https'
-  function getSocketLocationFromProtocol() {
-    return !isSecure
-      ? { protocol: 'ws', port: serverSettings.wsport }
-      : { protocol: 'wss', port: serverSettings.wssport }
+  const getSocketLocationFromProtocol = () => {
+    return window.getSocketProtocolPort(
+      protocol,
+      serverSettings,
+      configuration.usePortMux
+    )
   }
 
   function onPublisherEvent(event) {

src/page/test/publishAvailableHDSettings/index.js

@@ -181,8 +181,6 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   streamTitle.innerText = configuration.stream1
 
   var protocol = serverSettings.protocol
-  var isSecure = protocol == 'https'
-
   var isPublishable = true
   function setPublishableState(isPublishableFlag) {
     isPublishable = isPublishableFlag
@@ -198,11 +196,14 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   }
   setPublishableState(true)
 
-  function getSocketLocationFromProtocol() {
-    return !isSecure
-      ? { protocol: 'ws', port: serverSettings.wsport }
-      : { protocol: 'wss', port: serverSettings.wssport }
+  const getSocketLocationFromProtocol = () => {
+    return window.getSocketProtocolPort(
+      protocol,
+      serverSettings,
+      configuration.usePortMux
+    )
   }
+
   var defaultConfiguration = {
     protocol: getSocketLocationFromProtocol().protocol,
     port: getSocketLocationFromProtocol().port,

src/page/test/publishCall/index.js

@@ -119,11 +119,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   })
 
   var protocol = serverSettings.protocol
-  var isSecure = protocol == 'https'
   function getSocketLocationFromProtocol() {
-    return !isSecure
-      ? { protocol: 'ws', port: serverSettings.wsport }
-      : { protocol: 'wss', port: serverSettings.wssport }
+    return window.getSocketProtocolPort(
+      protocol,
+      serverSettings,
+      configuration.usePortMux
+    )
   }
 
   function enableCallButton() {

src/page/test/publishCameraSource/index.js

@@ -93,11 +93,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   streamTitle.innerText = configuration.stream1
 
   var protocol = serverSettings.protocol
-  var isSecure = protocol == 'https'
   function getSocketLocationFromProtocol() {
-    return !isSecure
-      ? { protocol: 'ws', port: serverSettings.wsport }
-      : { protocol: 'wss', port: serverSettings.wssport }
+    return window.getSocketProtocolPort(
+      protocol,
+      serverSettings,
+      configuration.usePortMux
+    )
   }
 
   var defaultConfiguration = {

src/page/test/publishCameraSwap/index.js

@@ -111,11 +111,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   }
 
   var protocol = serverSettings.protocol
-  var isSecure = protocol == 'https'
   function getSocketLocationFromProtocol() {
-    return !isSecure
-      ? { protocol: 'ws', port: serverSettings.wsport }
-      : { protocol: 'wss', port: serverSettings.wssport }
+    return window.getSocketProtocolPort(
+      protocol,
+      serverSettings,
+      configuration.usePortMux
+    )
   }
 
   var defaultConfiguration = {

src/page/test/publishCodecSupport/index.js

@@ -94,11 +94,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   streamTitle.innerText = configuration.stream1
 
   const protocol = serverSettings.protocol
-  const isSecure = protocol == 'https'
   const getSocketLocationFromProtocol = () => {
-    return !isSecure
-      ? { protocol: 'ws', port: serverSettings.wsport }
-      : { protocol: 'wss', port: serverSettings.wssport }
+    return window.getSocketProtocolPort(
+      protocol,
+      serverSettings,
+      configuration.usePortMux
+    )
   }
 
   let defaultConfiguration = {