diff --git a/examples/chat.html b/examples/chat.html new file mode 100644 index 0000000..479704c --- /dev/null +++ b/examples/chat.html @@ -0,0 +1,164 @@ + + + + + OBSN Chat Overlay + + + + + + diff --git a/examples/chatoverlay.html b/examples/chatoverlay.html index 043723f..636af78 100644 --- a/examples/chatoverlay.html +++ b/examples/chatoverlay.html @@ -166,16 +166,21 @@ window.location.href = newUrl; } - function logData(type, data) { - var entry = document.createElement('div'); - if (type) { - type = "" + type.replace(/_/g, ' ') + ""; - } - entry.innerHTML = type + data; - document.getElementById('chat-overlay').prepend(entry); - } + function logData(type, data) { + var entry = document.createElement('div'); + if (type) { + var typeElement = document.createElement('i'); + typeElement.textContent = type.replace(/_/g, ' '); + entry.appendChild(typeElement); + entry.appendChild(document.createTextNode(" ")); + } + var message = document.createElement('span'); + message.textContent = data; + entry.appendChild(message); + document.getElementById('chat-overlay').prepend(entry); + } window.onload = loadIframe; - \ No newline at end of file + diff --git a/examples/remoteapi.html b/examples/remoteapi.html index 7af07a0..4c14d22 100644 --- a/examples/remoteapi.html +++ b/examples/remoteapi.html @@ -94,21 +94,39 @@ if (urlParams.has("api")){ var href = window.location.href; var arr = href.split('?'); var newurl; - if (arr.length > 1 && arr[1] !== '') { - newurl = href + '&api=' + WID; - } else { - newurl = href + '?api=' + WID; + if (arr.length > 1 && arr[1] !== '') { + newurl = href + '&api=' + encodeURIComponent(WID); + } else { + newurl = href + '?api=' + encodeURIComponent(WID); } window.history.pushState({path: newurl.toString()}, '', newurl.toString()); } -var path = "vdo.ninja"; //window.location.host+window.location.pathname.split("/").slice(0,-1).join("/"); -var header = document.getElementById("header"); -header.innerHTML += "Your Ninja Link: https://"+path+"/?api="+WID+"

"; -header.innerHTML += "You can append your own VDO.Ninja parameters to this link, treating it like a normal VDO.Ninja link."; -header.innerHTML += "

Code and documentation hosted at https://github.com/steveseguin/Companion-Ninja "; +var path = "vdo.ninja"; //window.location.host+window.location.pathname.split("/").slice(0,-1).join("/"); +var header = document.getElementById("header"); +var linkWrapper = document.createElement("div"); +var linkLabel = document.createElement("span"); +linkLabel.textContent = "Your Ninja Link: "; +var shareLink = document.createElement("a"); +var shareURL = "https://" + path + "/?api=" + encodeURIComponent(WID); +shareLink.href = shareURL; +shareLink.target = "_blank"; +shareLink.rel = "noopener"; +shareLink.textContent = shareURL; +linkWrapper.appendChild(linkLabel); +linkWrapper.appendChild(shareLink); +header.appendChild(linkWrapper); +var info = document.createElement("small"); +info.textContent = "You can append your own VDO.Ninja parameters to this link, treating it like a normal VDO.Ninja link."; +header.appendChild(info); +header.appendChild(document.createElement("br")); +header.appendChild(document.createElement("br")); +var repoInfo = document.createElement("small"); +repoInfo.innerHTML = "Code and documentation hosted at https://github.com/steveseguin/Companion-Ninja"; +header.appendChild(repoInfo); +header.insertAdjacentHTML("beforeend", " "); var socket = null; var connecting = false; @@ -474,4 +492,4 @@ loadGuestCommands(3); loadGuestCommands(4); - \ No newline at end of file + diff --git a/examples/sensors.html b/examples/sensors.html index 2344677..4588593 100644 --- a/examples/sensors.html +++ b/examples/sensors.html @@ -99,8 +99,50 @@ function loadIframe(url=false){ // this is pretty important if you want to avoi document.getElementById("container").appendChild(iframeContainer); - var videos = iframe.contentWindow.document.querySelectorAll("video"); - var sensors = {}; + var videos = iframe.contentWindow.document.querySelectorAll("video"); + var sensors = {}; + + function appendTextLine(container, text, indentLevel){ + var line = document.createElement("div"); + if (indentLevel){ + line.style.marginLeft = (indentLevel * 12) + "px"; + } + line.textContent = text; + container.appendChild(line); + } + + function appendKeyValueList(container, obj, indentLevel){ + indentLevel = indentLevel || 0; + for (var key in obj) { + if (!Object.prototype.hasOwnProperty.call(obj, key)) { + continue; + } + var value = obj[key]; + if (typeof value === "object" && value !== null) { + appendTextLine(container, key + ":", indentLevel); + appendKeyValueList(container, value, indentLevel + 1); + } else { + appendTextLine(container, key + ": " + value, indentLevel); + } + } + } + + function getOrCreateOutput(id, borderStyle){ + var element = id ? document.getElementById(id) : null; + if (element){ + element.textContent = ""; + return element; + } + var div = document.createElement("div"); + if (borderStyle){ + div.style.border = borderStyle; + } + if (id){ + div.id = id; + } + iframeContainer.appendChild(div); + return div; + } function drawFrame(vid){ try { @@ -159,122 +201,99 @@ function loadIframe(url=false){ // this is pretty important if you want to avoi eventer(messageEvent, function (e) { if (e.source != iframe.contentWindow){return} // reject messages send from other iframes - if ("stats" in e.data){ - var outputWindow = document.createElement("div"); - //console.log(e.data.stats); - - - var out = "
total_inbound_connections:"+e.data.stats.total_inbound_connections; - out += "
total_outbound_connections:"+e.data.stats.total_outbound_connections; - - for (var streamID in e.data.stats.inbound){ - out += "

streamID: "+streamID+"
"; - out += printValues(e.data.stats.inbound[streamID]); - } - - outputWindow.innerHTML = out; - iframeContainer.appendChild(outputWindow); - } - - if ("gotChat" in e.data){ - var outputWindow = document.createElement("div"); - outputWindow.innerHTML = e.data.gotChat.msg; - outputWindow.style.border="1px dotted black"; - iframeContainer.appendChild(outputWindow); - } - - if ("action" in e.data){ - var outputWindow = document.createElement("div"); - outputWindow.innerHTML = "child-page-action: "+e.data.action+"
"; - outputWindow.style.border="1px dotted black"; - iframeContainer.appendChild(outputWindow); - console.log(e.data.action); - - if (e.data.action == "new-view-connection"){ - setTimeout(function(){ - videos = iframe.contentWindow.document.querySelectorAll("video"); - console.log(videos); - },500); - } - } - - - if ("streamIDs" in e.data){ - var outputWindow = document.createElement("div"); - outputWindow.innerHTML = "child-page-action: streamIDs
"; - for (var key in e.data.streamIDs) { - outputWindow.innerHTML += "streamID: " + key + ", label:"+e.data.streamIDs[key] + "\n"; - } - outputWindow.style.border="1px dotted black"; - iframeContainer.appendChild(outputWindow); - } - - if ("loudness" in e.data){ - //console.log(e.data); - if (document.getElementById("loudness")){ - outputWindow = document.getElementById("loudness"); - } else { - var outputWindow = document.createElement("div"); - outputWindow.style.border="1px dotted black"; - iframeContainer.appendChild(outputWindow); - outputWindow.id = "loudness"; - } - outputWindow.innerHTML = "child-page-action: loudness
"; - for (var key in e.data.loudness) { - outputWindow.innerHTML += key + " Loudness: " + e.data.loudness[key] + "\n"; - } - outputWindow.style.border="1px black"; - - } - - if ("sensors" in e.data){ - sensors = e.data.sensors; - if (document.getElementById("sensors")){ - outputWindow = document.getElementById("sensors"); - } else { - var outputWindow = document.createElement("div"); - outputWindow.style.border="1px dotted black"; - iframeContainer.appendChild(outputWindow); - outputWindow.id = "sensors"; - console.log(sensors); - } - outputWindow.innerHTML = "child-page-action: sensors

"; - - for (var key in e.data.sensors.lin) { - outputWindow.innerHTML += key + " linear: " + e.data.sensors.lin[key] + "
"; - } - for (var key in e.data.sensors.acc) { - outputWindow.innerHTML += key + " acceleration: " + e.data.sensors.acc[key] + "
"; - } - for (var key in e.data.sensors.gyro) { - outputWindow.innerHTML += key + " gyro: " + e.data.sensors.gyro[key] + "
"; - } - for (var key in e.data.sensors.mag) { - outputWindow.innerHTML += key + " magnet: " + e.data.sensors.mag[key] + "
"; - } - for (var key in e.data.sensors.ori) { - outputWindow.innerHTML += key + " orientation: " + e.data.sensors.ori[key] + "
"; - } - outputWindow.style.border="1px black"; - } + if ("stats" in e.data){ + var statsBox = document.createElement("div"); + appendTextLine(statsBox, "total_inbound_connections: " + e.data.stats.total_inbound_connections); + appendTextLine(statsBox, "total_outbound_connections: " + e.data.stats.total_outbound_connections); + + for (var streamID in e.data.stats.inbound){ + if (!Object.prototype.hasOwnProperty.call(e.data.stats.inbound, streamID)){ + continue; + } + var streamHeader = document.createElement("div"); + streamHeader.style.marginTop = "8px"; + var streamLabel = document.createElement("strong"); + streamLabel.textContent = "streamID:"; + streamHeader.appendChild(streamLabel); + streamHeader.appendChild(document.createTextNode(" " + streamID)); + statsBox.appendChild(streamHeader); + appendKeyValueList(statsBox, e.data.stats.inbound[streamID], 1); + } + + iframeContainer.appendChild(statsBox); + } + + if ("gotChat" in e.data){ + var chatBox = document.createElement("div"); + chatBox.textContent = e.data.gotChat.msg; + chatBox.style.border="1px dotted black"; + iframeContainer.appendChild(chatBox); + } + + if ("action" in e.data){ + var actionBox = document.createElement("div"); + appendTextLine(actionBox, "child-page-action: " + e.data.action); + actionBox.style.border="1px dotted black"; + iframeContainer.appendChild(actionBox); + console.log(e.data.action); + + if (e.data.action == "new-view-connection"){ + setTimeout(function(){ + videos = iframe.contentWindow.document.querySelectorAll("video"); + console.log(videos); + },500); + } + } + + + if ("streamIDs" in e.data){ + var streamBox = document.createElement("div"); + streamBox.style.border="1px dotted black"; + appendTextLine(streamBox, "child-page-action: streamIDs"); + for (var key in e.data.streamIDs) { + if (!Object.prototype.hasOwnProperty.call(e.data.streamIDs, key)){ + continue; + } + appendTextLine(streamBox, "streamID: " + key + ", label: " + e.data.streamIDs[key], 1); + } + iframeContainer.appendChild(streamBox); + } + + if ("loudness" in e.data){ + var loudnessBox = getOrCreateOutput("loudness", "1px dotted black"); + appendTextLine(loudnessBox, "child-page-action: loudness"); + for (var key in e.data.loudness) { + if (!Object.prototype.hasOwnProperty.call(e.data.loudness, key)){ + continue; + } + appendTextLine(loudnessBox, key + " Loudness: " + e.data.loudness[key], 1); + } + loudnessBox.style.border="1px black"; + + } + + if ("sensors" in e.data){ + sensors = e.data.sensors; + var sensorsBox = getOrCreateOutput("sensors", "1px dotted black"); + appendTextLine(sensorsBox, "child-page-action: sensors"); + for (var sensorKey in e.data.sensors) { + if (!Object.prototype.hasOwnProperty.call(e.data.sensors, sensorKey)){ + continue; + } + var sensorValue = e.data.sensors[sensorKey]; + if (typeof sensorValue === "object" && sensorValue !== null){ + appendTextLine(sensorsBox, sensorKey + ":", 0); + appendKeyValueList(sensorsBox, sensorValue, 1); + } else { + appendTextLine(sensorsBox, sensorKey + ": " + sensorValue, 0); + } + } + sensorsBox.style.border="1px black"; + } }); } -function printValues( obj) { - var out = ""; - for (var key in obj) { - if (typeof obj[key] === "object") { - out +="
"; - out += printValues(obj[key]); - } else { - out +=""+key+": "+obj[key]+"
"; - } - } - return out; -} - - - - - \ No newline at end of file + + + diff --git a/examples/status.html b/examples/status.html index 34af89f..105f6b8 100644 --- a/examples/status.html +++ b/examples/status.html @@ -147,21 +147,26 @@ return out; } - function logData(type, data) { - var log = document.body.getElementsByTagName("ul")[0]; - var entry = document.createElement('li'); - if (type){ - type = ""+type+""; - } - entry.innerHTML = type + data; - - //setTimeout(function(entry){ // hide message after 60 seconds - // entry.innerHTML=""; - // entry.remove(); - // },60000,entry); - - log.appendChild(entry); - } + function logData(type, data) { + var log = document.body.getElementsByTagName("ul")[0]; + var entry = document.createElement('li'); + if (type){ + var typeElement = document.createElement("i"); + typeElement.textContent = type; + entry.appendChild(typeElement); + entry.appendChild(document.createTextNode(" ")); + } + var message = document.createElement("span"); + message.textContent = data; + entry.appendChild(message); + + //setTimeout(function(entry){ // hide message after 60 seconds + // entry.innerHTML=""; + // entry.remove(); + // },60000,entry); + + log.appendChild(entry); + } diff --git a/examples/switchmics.html b/examples/switchmics.html index ca958bb..ee1f3fd 100644 --- a/examples/switchmics.html +++ b/examples/switchmics.html @@ -130,12 +130,13 @@ if (urlParams.get("a")){ } document.getElementById("viewlinka").value = "https://"+path+"/?push="+urlParams.get("a"); - if (urlParams.get("la")){ - document.getElementById("viewlinka").value += "&label="+urlParams.get("la"); - document.getElementById("a").innerHTML = urlParams.get("la") - } - -} + if (urlParams.get("la")){ + var labelA = urlParams.get("la"); + document.getElementById("viewlinka").value += "&label="+encodeURIComponent(labelA); + document.getElementById("a").textContent = labelA; + } + +} if (urlParams.get("b")){ if (window.location.host){ var path = window.location.host+window.location.pathname.replace("/examples/","/").split("/").slice(0,-1).join("/"); @@ -144,11 +145,12 @@ if (urlParams.get("b")){ } document.getElementById("viewlinkb").value = "https://"+path+"/?push="+urlParams.get("b"); - if (urlParams.get("lb")){ - document.getElementById("viewlinkb").value += "&label="+urlParams.get("lb"); - document.getElementById("b").innerHTML = urlParams.get("lb") - } -} + if (urlParams.get("lb")){ + var labelB = urlParams.get("lb"); + document.getElementById("viewlinkb").value += "&label="+encodeURIComponent(labelB); + document.getElementById("b").textContent = labelB; + } +} var iframeb = null; var iframea = null; @@ -193,15 +195,15 @@ function loadIframes(){ if (iframeb && (e.source === iframeb.contentWindow)) { console.log(e.data); if (e.data.action == "this-label"){ - document.getElementById("a").innerHTML = e.data.value; - } - } else if (iframea && (e.source === iframea.contentWindow)) { - if (e.data.action == "this-label"){ - document.getElementById("b").innerHTML = e.data.value; - } - } + document.getElementById("a").textContent = e.data.value; + } + } else if (iframea && (e.source === iframea.contentWindow)) { + if (e.data.action == "this-label"){ + document.getElementById("b").textContent = e.data.value; + } + } }, false); - \ No newline at end of file +