Multi server RTMP added

nicnacnic · Aug 29, 2022 · 9595910 · 9595910
1 parent fd070bc
commit 9595910
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 1,097 deletions.
diff --git a/configschema.json b/configschema.json
@@ -1,70 +1,62 @@
 {
+    "$schema": "https://json-schema.org/draft/2019-09/schema",
     "$id": "http://example.com/example.json",
-    "$schema": "http://json-schema.org/draft-07/schema",
+    "type": "object",
     "default": {
         "address": "localhost:4444",
         "password": "password",
-        "baseRtmpUrl": "https://rtmp.example.live/hls/",
+        "RTMPServers": {},
         "botToken": ""
     },
-    "description": "The root schema comprises the entire JSON document.",
-    "examples": [
-        {
-            "address": "localhost:4444",
-            "password": "password",
-            "baseRtmpUrl": "https://rtmp.example.live/hls/",
-            "botToken": ""
-        }
-    ],
+    "title": "Root Schema",
     "required": [
         "address",
         "password",
-        "baseRtmpUrl",
+        "RTMPServers",
         "botToken"
     ],
-    "title": "The root schema",
-    "type": "object",
     "properties": {
         "address": {
-            "$id": "#/properties/address",
             "type": "string",
-            "title": "The address schema",
-            "description": "An explanation about the purpose of this instance.",
             "default": "",
+            "title": "The address Schema",
             "examples": [
                 "localhost:4444"
             ]
         },
         "password": {
-            "$id": "#/properties/password",
             "type": "string",
-            "title": "The password schema",
-            "description": "An explanation about the purpose of this instance.",
             "default": "",
+            "title": "The password Schema",
             "examples": [
                 "password"
             ]
         },
-        "baseRtmpUrl": {
-            "$id": "#/properties/baseRtmpUrl",
-            "type": "string",
-            "title": "The baseRtmpUrl schema",
-            "description": "An explanation about the purpose of this instance.",
-            "default": "",
+        "RTMPServers": {
+            "type": "object",
+            "default": {},
+            "title": "The RTMPServers Schema",
+            "required": [],
+            "properties": {},
             "examples": [
-                "https://rtmp.example.live/hls/"
+                {}
             ]
         },
         "botToken": {
-            "$id": "#/properties/botToken",
             "type": "string",
-            "title": "The botToken schema",
-            "description": "An explanation about the purpose of this instance.",
             "default": "",
+            "title": "The botToken Schema",
             "examples": [
                 ""
             ]
         }
     },
-    "additionalProperties": true
+    "examples": [
+        {
+            "address": "localhost:4444",
+            "password": "password",
+            "RTMPServers": {},
+            "botToken": ""
+        }
+    ]
 }
diff --git a/dashboard/sceneControl/sceneControl.css b/dashboard/sceneControl/sceneControl.css
@@ -26,7 +26,7 @@ body {
 }
 
 .playerDiv .input {
-    width: 292px;
+    width: 204px;
     margin: 0;
     margin-right: 8px;
 }
@@ -46,4 +46,9 @@ body {
     width: calc(100% - 8px);
     margin-top: -2px;
     margin-bottom: 20px;
+}
+
+#runnerInfo .select {
+    width: 80px;
+    margin-right: 8px;
 }
diff --git a/dashboard/sceneControl/sceneControl.html b/dashboard/sceneControl/sceneControl.html
@@ -25,6 +25,12 @@
                     <label>Player 1</label>
                     <div></div>
                 </div>
+                <div class="select">
+                    <select id="p1Server" onchange="activeRunners.value[0].server = this.value;">
+                    </select>
+                    <label>Server</label>
+                    <div class="selectBorder"></div>
+                </div>
                 <button class="iconButton" id="p1Refresh" onclick="nodecg.sendMessage('restartMedia', activeRunners.value[0].source)"><span id="refreshIcon"
                         class="material-icons">refresh</span></button>
                 <button class="iconButton" id="p1Cam" onclick="activeRunners.value[0].cam = !activeRunners.value[0].cam;"><span id="camIcon"
@@ -36,6 +42,12 @@
                     <label>Player 2</label>
                     <div></div>
                 </div>
+                <div class="select">
+                    <select id="p2Server" onchange="activeRunners.value[1].server = this.value;">
+                    </select>
+                    <label>Server</label>
+                    <div class="selectBorder"></div>
+                </div>
                 <button class="iconButton" id="p2Refresh" onclick="nodecg.sendMessage('restartMedia', activeRunners.value[1].source)"><span id="refreshIcon"
                         class="material-icons">refresh</span></button>
                 <button class="iconButton" id="p2Cam" onclick="activeRunners.value[1].cam = !activeRunners.value[1].cam;"><span id="camIcon"
@@ -47,6 +59,12 @@
                     <label>Player 3</label>
                     <div></div>
                 </div>
+                <div class="select">
+                    <select id="p3Server" onchange="activeRunners.value[2].server = this.value;">
+                    </select>
+                    <label>Server</label>
+                    <div class="selectBorder"></div>
+                </div>
                 <button class="iconButton" id="p3Refresh" onclick="nodecg.sendMessage('restartMedia', activeRunners.value[2].source)"><span id="refreshIcon"
                         class="material-icons">refresh</span></button>
                 <button class="iconButton" id="p3Cam" onclick="activeRunners.value[2].cam = !activeRunners.value[2].cam;"><span id="camIcon"
@@ -58,6 +76,12 @@
                     <label>Player 4</label>
                     <div></div>
                 </div>
+                <div class="select">
+                    <select id="p4Server" onchange="activeRunners.value[3].server = this.value;">
+                    </select>
+                    <label>Server</label>
+                    <div class="selectBorder"></div>
+                </div>
                 <button class="iconButton" id="p4Refresh" onclick="nodecg.sendMessage('restartMedia', activeRunners.value[3].source)"><span id="refreshIcon"
                         class="material-icons">refresh</span></button>
                 <button class="iconButton" id="p4Cam" onclick="activeRunners.value[3].cam = !activeRunners.value[3].cam;"><span id="camIcon"

diff --git a/dashboard/sceneControl/sceneControl.js b/dashboard/sceneControl/sceneControl.js
@@ -10,6 +10,16 @@ window.onload = () => {
     // Load replicants.
     NodeCG.waitForReplicants(runDataActiveRun, activeRunners, sceneList, currentScene, settings, adPlayer).then(() => {
 
+        // Populate servers.
+        let options = '';
+        for (let server of Object.keys(nodecg.bundleConfig.RTMPServers)) {
+            options += `<option>${server}</option>`
+        }
+        let dropdownList = document.querySelectorAll('#runnerInfo select');
+        for (let select of dropdownList) {
+            select.innerHTML = options;
+        }
+
         // Populates dropdown with uploaded layouts.
         sceneList.on('change', (newVal) => {
             let select = document.getElementById("sceneList");
@@ -27,6 +37,7 @@ window.onload = () => {
         activeRunners.on('change', (newVal) => {
             for (let i = 0; i < 4; i++) {
                 document.getElementById(`p${i + 1}Input`).value = newVal[i].streamKey;
+                document.getElementById(`p${i + 1}Server`).value = newVal[i].server;
                 switch (newVal[i].cam) {
                     case true: document.getElementById(`p${i + 1}Cam`).childNodes[0].innerHTML = 'videocam'; document.getElementById(`p${i + 1}Cam`).style.color = 'white'; break;
                     case false: document.getElementById(`p${i + 1}Cam`).childNodes[0].innerHTML = 'videocam_off'; document.getElementById(`p${i + 1}Cam`).style.color = 'red'; break;

diff --git a/graphics/streamPlayer/streamPlayer.js b/graphics/streamPlayer/streamPlayer.js
@@ -9,11 +9,12 @@ function createPlayer(num) {
         video = document.querySelector('video');
 
         activeRunners.on('change', (newVal, oldVal) => {
-            if (oldVal == undefined || oldVal[playerID].streamKey !== newVal[playerID].streamKey && newVal[playerID].streamKey !== '') {
+            if (oldVal == undefined || (oldVal[playerID].streamKey !== newVal[playerID].streamKey && newVal[playerID].streamKey !== '') || (oldVal[playerID].server !== newVal[playerID].server && newVal[playerID].server !== '')) {
                 hls = new Hls();
                 hls.attachMedia(video);
                 hls.on(Hls.Events.MEDIA_ATTACHED, () => {
-                    hls.loadSource(`${nodecg.bundleConfig.baseRtmpUrl}${newVal[playerID].streamKey}.m3u8`);
+                    console.log(`Source: ${nodecg.bundleConfig.RTMPServers[newVal[playerID].server]}${newVal[playerID].streamKey}.m3u8`)
+                    hls.loadSource(`${nodecg.bundleConfig.RTMPServers[newVal[playerID].server]}${newVal[playerID].streamKey}.m3u8`);
                     hls.on(Hls.Events.MANIFEST_PARSED, () => video.play());
                     playing = true;
                 });