mirror of
https://github.com/SrIzan10/vdo.ninja.git
synced 2026-05-01 11:05:24 +00:00
Refactor and redesign iframe.html
This commit is contained in:
Sam MacKinnon
326
iframe-examples.js
Normal file
326
iframe-examples.js
Normal file
@@ -0,0 +1,326 @@
|
||||
/**
|
||||
* SANDBOX EXAMPLE CONFIG
|
||||
*
|
||||
* options: (number | boolean | string | null)[]
|
||||
* - OPTIONAL if using a user input; see "input" below
|
||||
* - List of values to test (passed into "result" function)
|
||||
* - An option button will be generated for each value in the list
|
||||
*
|
||||
* input: object
|
||||
* - OPTIONAL
|
||||
* - User input for testing (eg a range slider).
|
||||
* - Output of element onchange will be passed into RESULT function.
|
||||
*
|
||||
* labels: string[]
|
||||
* - OPTIONAL
|
||||
* - List of labels for option buttons (should be same length as options list).
|
||||
* - If no labels are provided, option buttons are labeled with their value
|
||||
*
|
||||
* result: (value: any) => object
|
||||
* - Function that returns a postMessage object
|
||||
* - Based on the value produced by an option button, or a user input
|
||||
*/
|
||||
|
||||
const IFRAME_API = {
|
||||
add: {
|
||||
options: [true],
|
||||
labels: ["Video with styles"],
|
||||
result: value => ({
|
||||
"target": "*",
|
||||
"add": value,
|
||||
"settings": { "style": "width:640px;height:360px;float:left;border:10px solid red;display:block;"}
|
||||
})
|
||||
},
|
||||
automixer: {
|
||||
options: [true, false],
|
||||
result: value => ({ "automixer": value })
|
||||
},
|
||||
bitrate: {
|
||||
options: [-1],
|
||||
labels: ["default (-1)"],
|
||||
input: {
|
||||
title: "bitrate",
|
||||
type: "range",
|
||||
min: 0,
|
||||
max: 6000,
|
||||
value: 3000
|
||||
},
|
||||
result: value => ({ "bitrate": value, "target": "*" })
|
||||
},
|
||||
camera: {
|
||||
options: [false, true, "toggle"],
|
||||
result: value => ({ "camera": value })
|
||||
},
|
||||
changeAudioDevice: { // change text of add camera button
|
||||
options: [1,2,3,4],
|
||||
result: value => ({ "changeAudioDevice": value })
|
||||
},
|
||||
changeVideoDevice: { // change text of add camera button
|
||||
options: [1,2,3,4],
|
||||
result: value => ({ "changeVideoDevice": value })
|
||||
},
|
||||
close: {
|
||||
options: [true],
|
||||
result: value => ({ "close": value })
|
||||
},
|
||||
getDetailedState: {
|
||||
options: [true],
|
||||
result: value => ({ "getDetailedState": value }),
|
||||
},
|
||||
getDeviceList: {
|
||||
options: [true],
|
||||
result: value => ({ "getDeviceList": value }),
|
||||
},
|
||||
getLoudness: {
|
||||
options: [false, true],
|
||||
result: value => ({ "getLoudness": value }),
|
||||
},
|
||||
getStreamIDs: {
|
||||
options: [true],
|
||||
result: value => ({ "getStreamIDs": value }),
|
||||
},
|
||||
keyframe: {
|
||||
options: [true],
|
||||
result: value => ({ "keyframe": value }),
|
||||
},
|
||||
mute: {
|
||||
options: [
|
||||
true,
|
||||
false,
|
||||
"toggle" // open to a better suggestion here.
|
||||
],
|
||||
result: value => ({ "mute": value }),
|
||||
},
|
||||
mic: {
|
||||
options: [true, false, "toggle"],
|
||||
result: value => ({ "mic": value }),
|
||||
},
|
||||
panning: {
|
||||
options: [0, 180, 90],
|
||||
input: {
|
||||
title: "panning",
|
||||
type: "range",
|
||||
min: 0,
|
||||
max: 180,
|
||||
value: 90
|
||||
},
|
||||
labels: ["Left (0)", "Right (180)", "Center (90)"],
|
||||
result: value => ({ "panning": value }),
|
||||
},
|
||||
previewWebcam: {
|
||||
options: ["previewWebcam"], // publishScreen
|
||||
result: value => ({ "function": value }),
|
||||
},
|
||||
record: {
|
||||
options: [true, false],
|
||||
result: value => ({ "record": value }),
|
||||
},
|
||||
reload: {
|
||||
options: [true],
|
||||
result: value => ({ "reload": value }),
|
||||
},
|
||||
remove: { // target can be a stream ID or * for all.
|
||||
options: [true],
|
||||
labels: ["Target video"],
|
||||
result: value => ({ "target": "*", "remove": value })
|
||||
},
|
||||
sendChat: {
|
||||
input: {
|
||||
type: "text",
|
||||
value: "Hello"
|
||||
},
|
||||
result: value => ({ "sendChat": value }),
|
||||
},
|
||||
sceneState: {
|
||||
options: [true, false],
|
||||
labels: ["ENABLE TALLY LIGHT (true)", "STOP TALLY LIGHT (false)"],
|
||||
result: value => ({ "sceneState": value })
|
||||
},
|
||||
style: {
|
||||
options: ["#main { zoom: 0.5;} video {float: left; margin: 0; padding: 0; } #info {display:none;}"],
|
||||
labels: ["Insert Style Sheet"],
|
||||
result: value => ({ "style": value }),
|
||||
},
|
||||
volume: {
|
||||
input: {
|
||||
title: "volume",
|
||||
type: "range",
|
||||
min: 0,
|
||||
max: 200,
|
||||
value: 100
|
||||
},
|
||||
result: value => ({ "volume": value }),
|
||||
},
|
||||
["function: Eval"]: {
|
||||
options: ["eval"], // publishScreen
|
||||
result: value => ({ "function": value, "value": 'alert(\"DANGERUS\")' })
|
||||
},
|
||||
["function: Change html"]: {
|
||||
options: ["changeHTML"], // change text of add camera button
|
||||
result: value => ({ "function": value, "target": "add_camera", "value": "NEW CAMERA TEXT" })
|
||||
}
|
||||
}
|
||||
|
||||
const COMPANION_API = { // list available commands to console
|
||||
bitrate: {
|
||||
input: {
|
||||
title: "bitrate",
|
||||
type: "range",
|
||||
min: 0,
|
||||
max: 6000,
|
||||
value: 3000
|
||||
},
|
||||
result: value => ({ target: null, action: "bitrate", value })
|
||||
},
|
||||
camera: {
|
||||
options: [false, true, "toggle"],
|
||||
result: value => ({ target: null, action: "camera", value })
|
||||
},
|
||||
forceKeyframe: {
|
||||
options: [null],
|
||||
labels: ["Rainbow puke fix"],
|
||||
result: value => ({ target: null, action: "forceKeyframe", value }),
|
||||
},
|
||||
getDetails: {
|
||||
options: [null],
|
||||
result: value => ({ target: null, action: "getDetails", value })
|
||||
},
|
||||
group: {
|
||||
options: [1,2,3,4,5,6,7,8],
|
||||
result: value => ({ target: null, action: "group", value })
|
||||
},
|
||||
hangup: {
|
||||
options: [null],
|
||||
result: value => ({ target: null, action: "hangup", value })
|
||||
},
|
||||
mic: {
|
||||
options: [false, true, "toggle"],
|
||||
result: value => ({ target: null, action: "mic", value })
|
||||
},
|
||||
panning: {
|
||||
options: [0, 180, 90],
|
||||
input: {
|
||||
title: "panning",
|
||||
type: "range",
|
||||
min: 0,
|
||||
max: 180,
|
||||
value: 90
|
||||
},
|
||||
labels: ["Left (0)", "Right (180)", "Center (90)"],
|
||||
result: value => ({ target: null, action: "panning", value })
|
||||
},
|
||||
record: {
|
||||
options: [false, true, "toggle"],
|
||||
result: value => ({ target: null, action: "record", value })
|
||||
},
|
||||
reload: {
|
||||
options: [null],
|
||||
result: value => ({ target: null, action: "reload", value })
|
||||
},
|
||||
sendChat: {
|
||||
input: {
|
||||
type: "text",
|
||||
value: "Hello"
|
||||
},
|
||||
result: value => ({ target: null, action: "sendChat", value }),
|
||||
},
|
||||
speaker: { // "speaker" also works in the same way
|
||||
options: [false, true, "toggle"],
|
||||
result: value => ({ target: null, action: "speaker", value }),
|
||||
},
|
||||
togglehand: {
|
||||
options: [null],
|
||||
result: value => ({ target: null, action: "togglehand", value }),
|
||||
},
|
||||
togglescreenshare: {
|
||||
options: [null],
|
||||
result: value => ({ target: null, action: "togglescreenshare", value }),
|
||||
},
|
||||
volume: {
|
||||
input: {
|
||||
title: "volume",
|
||||
type: "range",
|
||||
min: 0,
|
||||
max: 200,
|
||||
value: 100
|
||||
},
|
||||
result: value => ({ target: null, "action": "volume", value }),
|
||||
},
|
||||
}
|
||||
|
||||
function guestTargetedAPI(target) {
|
||||
return {
|
||||
addScene: {
|
||||
options: [null,1,2,3,4,5,6,7,8],
|
||||
input: {
|
||||
type: "text",
|
||||
value: "scene321"
|
||||
},
|
||||
result: value => ({ "action": "addScene", target, value })
|
||||
},
|
||||
display: {
|
||||
options: [null],
|
||||
result: value => ({ "action": "display", target, value })
|
||||
},
|
||||
forward: {
|
||||
options: [null],
|
||||
input: {
|
||||
type: "text",
|
||||
value: "room321"
|
||||
},
|
||||
result: value => ({ "action": "forward", target, value })
|
||||
},
|
||||
forceKeyframe: {
|
||||
options: [null],
|
||||
labels: ["Rainbow puke fix"],
|
||||
result: value => ({ "action": "forceKeyframe", target, value })
|
||||
},
|
||||
hangup: {
|
||||
options: [null],
|
||||
result: value => ({ "action": "hangup", target, value })
|
||||
},
|
||||
group: {
|
||||
options: [0,1,2,3,4,5,6,7,8],
|
||||
input: {
|
||||
type: "text",
|
||||
value: "group321"
|
||||
},
|
||||
result: value => ({ "action": "group", target, value })
|
||||
},
|
||||
soloChat: {
|
||||
options: [null],
|
||||
result: value => ({ "action": "soloChat", target, value })
|
||||
},
|
||||
soloVideo: {
|
||||
options: [null],
|
||||
result: value => ({ "action": "soloVideo", target, value })
|
||||
},
|
||||
speaker: {
|
||||
options: [null],
|
||||
labels: ["Remote speaker"],
|
||||
result: value =>({ "action": "speaker", target, value })
|
||||
},
|
||||
mic: {
|
||||
options: [null],
|
||||
result: value =>({ "action": "mic", target, value })
|
||||
},
|
||||
muteScene: {
|
||||
options: [null,1,2,3,4,5,6,7,8],
|
||||
input: {
|
||||
type: "text",
|
||||
value: "scene321"
|
||||
},
|
||||
result: value => ({ "action": "muteScene", target, value })
|
||||
},
|
||||
volume: {
|
||||
input: {
|
||||
title: "volume",
|
||||
type: "range",
|
||||
min: 0,
|
||||
max: 200,
|
||||
value: 100
|
||||
},
|
||||
result: value => ({ "action": "volume", target, value }),
|
||||
},
|
||||
}
|
||||
}
|
||||
200
iframe.css
Normal file
200
iframe.css
Normal file
@@ -0,0 +1,200 @@
|
||||
body {
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
background-color: #e1e8fc;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 5px;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 5px;
|
||||
background: white;
|
||||
border: solid;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
button:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
video {
|
||||
max-width: 300px;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
#viewlink {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
#container {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.api-section {
|
||||
padding: 10px;
|
||||
border-bottom: solid 1px;
|
||||
}
|
||||
|
||||
.api-section > h4:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.api-section-header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-bottom: solid 1px;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.custom-post {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.custom-post > * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.custom-post > button {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
padding: 0 20px;
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.custom-post-input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: solid 5px #4d66a8;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.controls {
|
||||
overflow: auto;
|
||||
background: white;
|
||||
width: 350px;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
.example-header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background: #4d66a8;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.example-header > button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iframe-example {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
border: solid #4d66a8 2px;
|
||||
}
|
||||
|
||||
.main-log {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
flex-shrink: 0;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
background: #0b0e15;
|
||||
color: white;
|
||||
border-top: solid 1px #6e6e6e;
|
||||
font-family: monospace;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.output-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.post-log {
|
||||
background: #273047;
|
||||
padding: 4px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.sensors-log {
|
||||
padding: 10px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.stream-data-logs {
|
||||
height: 100%;
|
||||
background: black;
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.target-guest {
|
||||
padding: 10px;
|
||||
border-bottom: solid 1px;
|
||||
}
|
||||
|
||||
.target-guest-inputs {
|
||||
margin-top: 5px;
|
||||
}
|
||||
841
iframe.html
841
iframe.html
@@ -3,313 +3,58 @@
|
||||
<title>IFRAME Example</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
|
||||
<style>
|
||||
body{
|
||||
padding:0;
|
||||
margin:0;
|
||||
background-color: rgb(222,242,253);
|
||||
}
|
||||
iframe {
|
||||
border:0;
|
||||
margin:0;
|
||||
padding:0;
|
||||
display:block;
|
||||
margin:10px;
|
||||
width:100%;
|
||||
height:520px;
|
||||
}
|
||||
#viewlink {
|
||||
width:400px;
|
||||
}
|
||||
#container {
|
||||
display:block;
|
||||
padding:0px;
|
||||
}
|
||||
input{
|
||||
padding:5px;
|
||||
margin:5px;
|
||||
}
|
||||
button{
|
||||
padding:5px;
|
||||
margin:5px;
|
||||
}
|
||||
video{
|
||||
max-width:300px;
|
||||
max-height:100px;
|
||||
}
|
||||
.container{
|
||||
max-height: 900px;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="./iframe.css" />
|
||||
<script src="iframe-examples.js"></script>
|
||||
<script>
|
||||
const ExpandableCards = {};
|
||||
|
||||
function loadIframe(){ // this is pretty important if you want to avoid camera permission popup problems. You can also call it automatically via: <body onload=>loadIframe();"> , but don't call it before the page loads.
|
||||
var exampleId = generateId();
|
||||
|
||||
// Keep track of which API cards are opened vs closed
|
||||
ExpandableCards[exampleId] = {
|
||||
iframe: false,
|
||||
companion: false,
|
||||
}
|
||||
|
||||
var iframe = document.createElement("iframe");
|
||||
var iframeContainer = document.createElement("div");
|
||||
iframeContainer.classList.add("container");
|
||||
var iframesrc = document.getElementById("viewlink").value;
|
||||
iframe.allow = "document-domain;encrypted-media;sync-xhr;usb;web-share;cross-origin-isolated;accelerometer;midi;geolocation;autoplay;camera;microphone;fullscreen;picture-in-picture;display-capture;";
|
||||
|
||||
if (iframesrc==""){
|
||||
iframesrc="./";
|
||||
var container = document.getElementById("container");
|
||||
var iframe = newElement("iframe", {
|
||||
allow: "document-domain;encrypted-media;sync-xhr;usb;web-share;cross-origin-isolated;accelerometer;midi;geolocation;autoplay;camera;microphone;fullscreen;picture-in-picture;display-capture;",
|
||||
src: addUrlParams(iframesrc, ["cleanoutput", "transparent", "hidemenu"])
|
||||
});
|
||||
var iframeExample = newElement("div", { id: exampleId, classList: "iframe-example" });
|
||||
var exampleHeader = newElement("div", { classList: "example-header", innerHTML: iframesrc });
|
||||
var exampleBody = newElement("div", { classList: "example-body" });
|
||||
var outputContainer = newElement("div", { classList: "output-container" });
|
||||
var customPostContainer = newElement("div", { classList: "custom-post" });
|
||||
var customPostInput = newElement("input", {
|
||||
classList: "custom-post-input", type: "text", placeholder: "Post Message (format as a JSON object}"
|
||||
});
|
||||
var mainLog = newElement("div", { id: exampleId + "-logs", classList: "main-log" });
|
||||
var streamDataLogs = newElement("div", { classList: "stream-data-logs" } );
|
||||
var controlsContainer = getExampleControls();
|
||||
var targetGuest = getGuestAPIGenerator();
|
||||
var customPostSend = newElement("button", {
|
||||
innerText: "POST",
|
||||
onclick: function() {
|
||||
try {
|
||||
const message = JSON.parse(customPostInput.value);
|
||||
postMessage(message, '*');
|
||||
} catch (error) {
|
||||
alert(error)
|
||||
}
|
||||
|
||||
if (document.getElementById("clean").checked){
|
||||
if (iframesrc.includes("?")){
|
||||
iframesrc+='&';
|
||||
} else {
|
||||
iframesrc+='?';
|
||||
}
|
||||
iframesrc+="cleanoutput";
|
||||
}
|
||||
if (document.getElementById("transparent").checked){
|
||||
if (iframesrc.includes("?")){
|
||||
iframesrc+='&';
|
||||
} else {
|
||||
iframesrc+='?';
|
||||
}
|
||||
iframesrc+="transparent";
|
||||
}
|
||||
});
|
||||
|
||||
if (document.getElementById("hidemenu").checked){
|
||||
if (iframesrc.includes("?")){
|
||||
iframesrc+='&';
|
||||
} else {
|
||||
iframesrc+='?';
|
||||
}
|
||||
iframesrc+="hidemenu";
|
||||
}
|
||||
|
||||
iframe.src = iframesrc;
|
||||
|
||||
iframeContainer.appendChild(iframe);
|
||||
|
||||
document.getElementById("container").appendChild(iframeContainer);
|
||||
|
||||
|
||||
var h3 = document.createElement("h3");
|
||||
h3.innerText = "The following commands are exclusive to the IFRAME API.";
|
||||
iframeContainer.appendChild(h3);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Mute Speaker";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"mute":true}, '*');}; // "speaker" also works in the same way.
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Un-Mute Speaker";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"mute":false}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Toggle Speaker";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"mute":"toggle"}, '*');}; // open to a better suggestion here.
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Mute Mic";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"mic":false}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Un-Mute Mic";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"mic":true}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Toggle Mic";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"mic":"toggle"}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Mute Camera";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"camera":false}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Unmute Camera";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"camera":true}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Toggle Camera";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"camera":"toggle"}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Disconnect";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"close":true}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "0 Bitrate";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":0, "target": "*"}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Low Bitrate";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":30, "target": "*"}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "High Bitrate";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":5000, "target": "*"}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Default Bitrate";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":-1, "target": "*"}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Reload";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"reload":true}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "50% Volume";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"volume":0.5}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "100% Volume";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"volume":1.0}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Pan Left";
|
||||
button.title = "Requires &panning to be added to the view link";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"panning":0}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Pan right";
|
||||
button.title = "Requires &panning to be added to the view link";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"panning":180}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Pan Center";
|
||||
button.title = "Requires &panning to be added to the view link";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"panning":90}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Request Loudness Levels";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"getLoudness":true}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Stop Sending Loudness Levels";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"getLoudness":false}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Get detailed state (if Director)";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"getDetailedState":true}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Start Recording";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"record":true}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Stop Recording";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"record":false}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Say Hello";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"sendChat":"Hello!"}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Send Keyframe";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"keyframe":true}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Insert Style Sheet";
|
||||
var stylesheet = "#main { zoom: 0.5;} video {float: left; margin: 0; padding: 0; } #info {display:none;}";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"style":stylesheet}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "get StreamIDs and labels";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"getStreamIDs":true}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "get media device list";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"getDeviceList":true}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Start AutoMixer";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"automixer":true}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Stop AutoMixer";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"automixer":false}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "ENABLE TALLY LIGHT";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"sceneState":true}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "STOP TALLY LIGHT";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"sceneState":false}, '*');};
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Add Target Video";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"target":"*", "add":true, "settings": {"style": "width:640px;height:360px;float:left;border:10px solid red;display:block;"}}, '*');}; // target can be a stream ID or * for all.
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Remove Target Video";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"target":"*", "remove": true}, '*');}; // target can be a stream ID or * for all.
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "previewWebcam()";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"function":"previewWebcam"}, '*');}; // publishScreen
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Change to Camera #2";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"changeVideoDevice":2}, '*');}; // change text of add camera button
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Change to Microphone #4";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"changeAudioDevice":4}, '*');}; // change text of add camera button
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "eval('alert(\"DANGERUS\")'";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"function":"eval", "value":'alert(\"DANGERUS\")'}, '*');}; // publishScreen
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "Change Add Camera text";
|
||||
button.onclick = function(){iframe.contentWindow.postMessage({"function":"changeHTML", "target":"add_camera", "value":"NEW CAMERA TEXT"}, '*');}; // change text of add camera button
|
||||
iframeContainer.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "CLOSE IFRAME";
|
||||
button.onclick = function(){iframeContainer.parentNode.removeChild(iframeContainer);};
|
||||
iframeContainer.appendChild(button);
|
||||
customPostContainer.append(customPostInput, customPostSend);
|
||||
controlsContainer.appendChild(targetGuest);
|
||||
outputContainer.append(iframe, mainLog, customPostContainer);
|
||||
exampleBody.append(controlsContainer, outputContainer, streamDataLogs);
|
||||
iframeExample.append(exampleHeader, exampleBody);
|
||||
container.prepend(iframeExample);
|
||||
|
||||
//////////// LISTEN FOR EVENTS
|
||||
|
||||
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
|
||||
var eventer = window[eventMethod];
|
||||
var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
|
||||
@@ -340,7 +85,7 @@
|
||||
media.streams[e.data.streamID].autoplay = true;
|
||||
// media.streams[e.data.streamID].controls = true;
|
||||
media.streams[e.data.streamID].srcObject = media.tracks[e.data.trackID].stream;
|
||||
iframeContainer.appendChild(media.streams[e.data.streamID]);
|
||||
Container.appendChild(media.streams[e.data.streamID]);
|
||||
} else {
|
||||
if (e.data.kind=="video"){
|
||||
media.streams[e.data.streamID].srcObject.getVideoTracks().forEach(trk=>{
|
||||
@@ -362,10 +107,8 @@
|
||||
} // end of video/audio capture
|
||||
|
||||
if ("stats" in e.data) {
|
||||
var outputWindow = document.createElement("div");
|
||||
console.log(e.data.stats);
|
||||
|
||||
|
||||
var out = "<br />total_inbound_connections:"+e.data.stats.total_inbound_connections;
|
||||
out += "<br />total_outbound_connections:"+e.data.stats.total_outbound_connections;
|
||||
|
||||
@@ -373,325 +116,305 @@
|
||||
out += "<br /><br /><b>streamID:</b> "+streamID+"<br />";
|
||||
out += printValues(e.data.stats.inbound_stats[streamID]);
|
||||
}
|
||||
|
||||
outputWindow.innerHTML = out;
|
||||
iframeContainer.appendChild(outputWindow);
|
||||
logOutput(out)
|
||||
}
|
||||
|
||||
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);
|
||||
logOutput(e.data.gotChat.msg)
|
||||
}
|
||||
|
||||
if ("action" in e.data){
|
||||
var outputWindow = document.createElement("div");
|
||||
outputWindow.innerHTML = "child-page-action: "+e.data.action+"<br />";
|
||||
outputWindow.style.border="1px dotted black";
|
||||
iframeContainer.appendChild(outputWindow);
|
||||
if ("action" in e.data && e.data.action !== "loudness") {
|
||||
logOutput("child-page-action: "+e.data.action+"<br />")
|
||||
}
|
||||
|
||||
|
||||
if ("streamIDs" in e.data){
|
||||
var outputWindow = document.createElement("div");
|
||||
outputWindow.innerHTML = "child-page-action: streamIDs<br />";
|
||||
var out = "child-page-action: streamIDs<br />"
|
||||
for (var key in e.data.streamIDs) {
|
||||
outputWindow.innerHTML += "streamID: " + key + ", label:"+e.data.streamIDs[key] + "\n";
|
||||
out += "streamID: " + key + ", label:"+e.data.streamIDs[key] + "\n";
|
||||
}
|
||||
outputWindow.style.border="1px dotted black";
|
||||
iframeContainer.appendChild(outputWindow);
|
||||
logOutput(out)
|
||||
}
|
||||
|
||||
if ("deviceList" in e.data){
|
||||
var outputWindow = document.createElement("div");
|
||||
outputWindow.innerHTML = "child-page-action: deviceList<br />";
|
||||
var out = "child-page-action: deviceList<br />";
|
||||
for (var i = 0;i<e.data.deviceList.length;i++){
|
||||
outputWindow.innerHTML += e.data.deviceList[i].label + "<br />";
|
||||
out += e.data.deviceList[i].label + "<br />";
|
||||
}
|
||||
outputWindow.style.border="1px dotted black";
|
||||
iframeContainer.appendChild(outputWindow);
|
||||
logOutput(out);
|
||||
}
|
||||
|
||||
|
||||
if ("loudness" in e.data) {
|
||||
//console.log(e.data);
|
||||
if (document.getElementById("loudness")){
|
||||
outputWindow = document.getElementById("loudness");
|
||||
var loudnessOutput;
|
||||
var id = exampleId + "-loudness";
|
||||
var out = "child-page-action: loudness<br />";
|
||||
|
||||
if (document.getElementById(id)){
|
||||
loudnessOutput = document.getElementById(id);
|
||||
} else {
|
||||
var outputWindow = document.createElement("div");
|
||||
outputWindow.style.border="1px dotted black";
|
||||
iframeContainer.appendChild(outputWindow);
|
||||
outputWindow.id = "loudness";
|
||||
loudnessOutput = newElement("div", { id, classList: "sensors-log" });
|
||||
streamDataLogs.prepend(loudnessOutput);
|
||||
}
|
||||
outputWindow.innerHTML = "child-page-action: loudness<br />";
|
||||
for (var key in e.data.loudness) {
|
||||
outputWindow.innerHTML += key + " Loudness: " + e.data.loudness[key] + "\n";
|
||||
out += key + " Loudness: " + e.data.loudness[key] + "\n";
|
||||
}
|
||||
outputWindow.style.border="1px black";
|
||||
logOutput(out, { window: loudnessOutput, replace: true, style: { paddingBottom: '20px', borderBottom: 'dotted 1px #4d66a8' } });
|
||||
}
|
||||
|
||||
if ("detailedState" in e.data){
|
||||
var outputWindow = document.createElement("div");
|
||||
outputWindow.innerHTML = "child-page-action: detailedState<br />"+JSON.stringify(e.data.detailedState)+"<br />";
|
||||
outputWindow.style.border="1px dotted black";
|
||||
iframeContainer.appendChild(outputWindow);
|
||||
logOutput("child-page-action: detailedState<br />"+JSON.stringify(e.data.detailedState)+"<br />")
|
||||
}
|
||||
|
||||
if ("callback" in e.data) {
|
||||
if (e.data.callback.action === 'getDetails') {
|
||||
logOutput("child-page-action: getDetails<br />"+JSON.stringify(e.data.callback.result, null, 2))
|
||||
}
|
||||
}
|
||||
|
||||
if ("sensors" in e.data){
|
||||
console.log(e.data);
|
||||
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";
|
||||
}
|
||||
outputWindow.innerHTML = "child-page-action: sensors<br /><br />";
|
||||
var sensorsOutput;
|
||||
var id = exampleId + "-sensors";
|
||||
var out = "child-page-action: sensors<br /><br />";
|
||||
|
||||
if (document.getElementById(id)){
|
||||
sensorsOutput = document.getElementById(id);
|
||||
} else {
|
||||
sensorsOutput = newElement("div", { id, classList: "sensors-log" });
|
||||
streamDataLogs.appendChild(sensorsOutput);
|
||||
}
|
||||
for (var key in e.data.sensors.lin) {
|
||||
outputWindow.innerHTML += key + " linear: " + e.data.sensors.lin[key] + "<br />";
|
||||
out += key + " linear: " + roundSensorData(e.data.sensors.lin[key]) + "<br />";
|
||||
}
|
||||
for (var key in e.data.sensors.acc) {
|
||||
outputWindow.innerHTML += key + " acceleration: " + e.data.sensors.acc[key] + "<br />";
|
||||
out += key + " acceleration: " + roundSensorData(e.data.sensors.acc[key]) + "<br />";
|
||||
}
|
||||
for (var key in e.data.sensors.gyro) {
|
||||
outputWindow.innerHTML += key + " gyro: " + e.data.sensors.gyro[key] + "<br />";
|
||||
out += key + " gyro: " + roundSensorData(e.data.sensors.gyro[key]) + "<br />";
|
||||
}
|
||||
for (var key in e.data.sensors.mag) {
|
||||
outputWindow.innerHTML += key + " magnet: " + e.data.sensors.mag[key] + "<br />";
|
||||
out += key + " magnet: " + roundSensorData(e.data.sensors.mag[key]) + "<br />";
|
||||
}
|
||||
outputWindow.style.border="1px black";
|
||||
logOutput(out, { window: sensorsOutput, replace: true })
|
||||
|
||||
function roundSensorData(data) {
|
||||
return Math.round(data * 100000) / 100000
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function loadSelfCommands(){
|
||||
var commands = {}
|
||||
commands.speaker = function(value){sendSelfCommand("speaker",value)}; // "speaker" also works in the same way
|
||||
function getExampleControls() {
|
||||
var controlsContainer = newElement("div", { classList: "controls" });
|
||||
|
||||
commands.mic = function(value){sendSelfCommand("mic",value)};
|
||||
var iframeExamples = getExamplesSection(
|
||||
IFRAME_API,
|
||||
{
|
||||
guestId: 'iframe',
|
||||
headers: '<h3>IFRAME</h3><p><em>These commands are exclusive to the IFRAME API.</em></p>',
|
||||
}
|
||||
);
|
||||
var companionExamples = getExamplesSection(
|
||||
COMPANION_API,
|
||||
{
|
||||
guestId: 'companion',
|
||||
headers: '<h3>HTTP/WSS</h3><p><em>These commands re-use the Companion.Ninja HTTP/WSS API, except you can send them via this Iframe interface.</em></p>',
|
||||
info: `
|
||||
<p><a target="_blank" style="word-break: break-word" href="https://github.com/steveseguin/Companion-Ninja#api-commands">
|
||||
More details of the below IFRAME API details are here: https://github.com/steveseguin/Companion-Ninja#api-commands
|
||||
</a></p>`
|
||||
}
|
||||
)
|
||||
|
||||
commands.camera = function(value){sendSelfCommand("camera",value)};
|
||||
var removeIframeButton = document.createElement("button");
|
||||
removeIframeButton.innerHTML = "REMOVE IFRAME";
|
||||
removeIframeButton.onclick = function(){iframeExample.parentNode.removeChild(iframeExample);};
|
||||
exampleHeader.appendChild(removeIframeButton);
|
||||
|
||||
commands.bitrate = function(value){sendSelfCommand("bitrate",value)};
|
||||
controlsContainer.append(
|
||||
iframeExamples.header,
|
||||
iframeExamples.examples,
|
||||
companionExamples.header,
|
||||
companionExamples.examples
|
||||
);
|
||||
|
||||
commands.volume = function(value){sendSelfCommand("volume",value)};
|
||||
|
||||
commands.record = function(value){sendSelfCommand("record",value)};
|
||||
|
||||
commands.sayHello = function(value){sendSelfCommand("sendChat","Hello")};
|
||||
|
||||
var target_self = document.body;
|
||||
|
||||
var hr = document.createElement("hr");
|
||||
target_self.appendChild(hr);
|
||||
|
||||
var h3 = document.createElement("h3");
|
||||
h3.innerText = "The following commands re-use the Companion.Ninja HTTP/WSS API, except you can send them via this Iframe interface.";
|
||||
target_self.appendChild(h3);
|
||||
|
||||
var a = document.createElement("a");
|
||||
a.innerText = "More details of the below IFRAME API details are here: https://github.com/steveseguin/Companion-Ninja#api-commands";
|
||||
a.href = "https://github.com/steveseguin/Companion-Ninja#api-commands";
|
||||
a.target = "_blank";
|
||||
target_self.appendChild(a);
|
||||
|
||||
var hr = document.createElement("hr");
|
||||
target_self.appendChild(hr);
|
||||
|
||||
|
||||
for (var k in commands) {
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = k + ":<br />TRUE";
|
||||
button.dataset.command = k;
|
||||
button.onclick = function(){commands[this.dataset.command](true);}
|
||||
target_self.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = k + ":<br />FALSE";
|
||||
button.dataset.command = k;
|
||||
button.onclick = function(){commands[this.dataset.command](false);}
|
||||
target_self.appendChild(button);
|
||||
|
||||
if (k=="mic" || k=="camera" || k=="record" || k=="speaker"){
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = k + ":<br />TOGGLE";
|
||||
button.dataset.command = k;
|
||||
button.onclick = function(){commands[this.dataset.command]("toggle");}
|
||||
target_self.appendChild(button);
|
||||
return controlsContainer
|
||||
}
|
||||
|
||||
} // list available commands to console
|
||||
function getGuestAPIGenerator() {
|
||||
var targetGuest = newElement('div', {
|
||||
classList: 'target-guest',
|
||||
innerHTML: `<h3>HTTP/WSS Director</h3><p><em>Directors can target commands to individual guests</em></p><h4>Target guest by: </h4>`
|
||||
});
|
||||
var targetGuestBySlot = newElement("input", {
|
||||
type: "radio",
|
||||
checked: true,
|
||||
id: exampleId+"-guest-slot-radio",
|
||||
value: "slot",
|
||||
name: exampleId+"-guest-target",
|
||||
onclick: function() {
|
||||
document.getElementById(exampleId+"-guest-slot").classList.remove("hidden");
|
||||
document.getElementById(exampleId+"-guest-id").classList="hidden";
|
||||
}
|
||||
});
|
||||
var targetGuestBySlotLabel = newElement("label", { for: exampleId+"-guest-slot-radio", innerText: "Slot (number)" })
|
||||
var targetGuestById = newElement("input", {
|
||||
type: "radio",
|
||||
id: exampleId+"-guest-id-radio",
|
||||
value: "id",
|
||||
min: 0,
|
||||
name: exampleId+"-guest-target",
|
||||
onclick: function() {
|
||||
document.getElementById(exampleId+"-guest-slot").classList="hidden";
|
||||
document.getElementById(exampleId+"-guest-id").classList.remove("hidden")
|
||||
}
|
||||
});
|
||||
var targetGuestByIdLabel = newElement("label", { for: exampleId+"-guest-id-radio", innerText: "streamID (string)" })
|
||||
var targetGuestInputs = newElement("div", { classList: "target-guest-inputs"});
|
||||
var guestIdInput = newElement("input", { id: exampleId+"-guest-id", type: "text", placeholder: "Guest ID", value: "abc123", classList: "hidden" });
|
||||
var guestSlotInput = newElement("input", { value: 1, id: exampleId+"-guest-slot", type: "number", placeholder: "Guest Slot" });
|
||||
var generateGuestAPI = newElement("button", {
|
||||
innerText: "Generate commands",
|
||||
onclick: function() {
|
||||
var targetType = (guestSlotInput.classList.value === "hidden") ? 'id' : 'slot';
|
||||
var value = (targetType === 'id') ? guestIdInput.value : guestSlotInput.value;
|
||||
var guestId = 'guest' + value;
|
||||
var headers = '<h4>Target GUEST ' + value + '</h4><p><em>These commands target a guest';
|
||||
headers += (targetType === 'id') ? ' with id ' : ' in slot ';
|
||||
headers += value + '</em></p>'
|
||||
|
||||
commands.reload = function(){sendSelfCommand("reload",true);};
|
||||
if (!document.getElementById(exampleId + '-' + guestId)) {
|
||||
var guestTargetedExamples = getExamplesSection(
|
||||
guestTargetedAPI(value),
|
||||
{ guestId: 'guest' + value, headers },
|
||||
)
|
||||
controlsContainer.appendChild(guestTargetedExamples.header);
|
||||
controlsContainer.appendChild(guestTargetedExamples.examples);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
commands.hangup = function(){sendSelfCommand("hangup",true);};
|
||||
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = k + ":<br />TRUE";
|
||||
button.onclick = function(){commands["reload"](true);}
|
||||
target_self.appendChild(button);
|
||||
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = k + ":<br />TRUE";
|
||||
button.onclick = function(){commands["hangup"](true);}
|
||||
target_self.appendChild(button);
|
||||
|
||||
return commands;
|
||||
targetGuestInputs.append(guestIdInput, guestSlotInput, generateGuestAPI);
|
||||
targetGuest.append(targetGuestBySlot, targetGuestBySlotLabel, targetGuestById, targetGuestByIdLabel, targetGuestInputs);
|
||||
|
||||
return targetGuest;
|
||||
}
|
||||
|
||||
function loadGuestCommands(guestid, streamID=false){ // this is the same as the Companion API, but can be issued to the IFRAME API
|
||||
function getExamplesSection(api, section) {
|
||||
var sectionId = exampleId + "-" + section.guestId;
|
||||
var header = document.createElement('div');
|
||||
header.classList = "api-section-header";
|
||||
|
||||
var container = document.createElement("div");
|
||||
container.id = "guest_"+guestid+"_container";
|
||||
document.body.appendChild(container);
|
||||
|
||||
var hr = document.createElement("hr");
|
||||
container.appendChild(hr);
|
||||
var h3 = document.createElement("h3");
|
||||
if (streamID){
|
||||
h3.innerHTML = "These target guest with the streamID: <i>"+guestid+ "</i> (if a director)";
|
||||
var toggleBtn = document.createElement('button');
|
||||
toggleBtn.innerText = "Show";
|
||||
toggleBtn.onclick = function() {
|
||||
ExpandableCards[exampleId][section.guestId] = !ExpandableCards[exampleId][section.guestId];
|
||||
if (ExpandableCards[exampleId][section.guestId] === true) {
|
||||
document.getElementById(sectionId).classList = "api-section";
|
||||
toggleBtn.innerText = "Hide"
|
||||
} else {
|
||||
h3.innerText = "These target the guest in slot "+guestid+ " (if you are director)";
|
||||
document.getElementById(sectionId).classList = "hidden";
|
||||
toggleBtn.innerText = "Show"
|
||||
}
|
||||
container.appendChild(h3);
|
||||
};
|
||||
|
||||
var headerText = document.createElement('div');
|
||||
headerText.innerHTML = section.headers;
|
||||
|
||||
header.append(headerText, toggleBtn);
|
||||
|
||||
var examples = document.createElement('div');
|
||||
examples.classList = "hidden";
|
||||
examples.id = sectionId;
|
||||
|
||||
if (section.info) {
|
||||
var info = document.createElement("div");
|
||||
info.innerHTML = section?.info;
|
||||
examples.appendChild(info);
|
||||
}
|
||||
|
||||
Object.keys(api).sort().forEach((param) => {
|
||||
var header = document.createElement('h4');
|
||||
header.innerHTML = param;
|
||||
examples.appendChild(header);
|
||||
addExamples(examples, param, api[param]);
|
||||
})
|
||||
|
||||
return { header, examples }
|
||||
}
|
||||
|
||||
function newElement(type, attributes) {
|
||||
var el = document.createElement(type);
|
||||
for (var attr in attributes) {
|
||||
el[attr] = attributes[attr]
|
||||
}
|
||||
return el;
|
||||
}
|
||||
|
||||
function addExamples(parentContainer, name, data) {
|
||||
if (data.options) {
|
||||
for (var i = 0; i < data.options.length; i++) {
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "transfer popup";
|
||||
button.onclick = function(){sendGuestCommand(guestid, "forward");};
|
||||
container.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "transfer to 'room321'";
|
||||
button.onclick = function(){sendGuestCommand(guestid, "forward", 'room321');};
|
||||
container.appendChild(button);
|
||||
button.innerHTML = (data.labels !== undefined)
|
||||
? data.labels[i]
|
||||
: JSON.stringify(data.options[i]);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "scene 1";
|
||||
button.onclick = function(){sendGuestCommand(guestid, "addScene");}; /// SCENE 1 or specify a custom scene name as a value
|
||||
container.appendChild(button);
|
||||
const result = data.result(data.options[i]); // result needs to be a const, not a var
|
||||
button.onclick = function() { postMessage(result)};
|
||||
parentContainer.appendChild(button)
|
||||
}
|
||||
}
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "mute in scene";
|
||||
button.onclick = function(){sendGuestCommand(guestid, "muteScene");};
|
||||
container.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "mute everywhere";
|
||||
button.onclick = function(){sendGuestCommand(guestid, "mic");};
|
||||
container.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "hang up";
|
||||
button.onclick = function(){sendGuestCommand(guestid, "hangup");};
|
||||
container.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "solo chat";
|
||||
button.onclick = function(){sendGuestCommand(guestid, "soloChat");};
|
||||
container.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "remote speaker";
|
||||
button.onclick = function(){sendGuestCommand(guestid, "speaker");};
|
||||
container.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "remote display";
|
||||
button.onclick = function(){sendGuestCommand(guestid, "display");};
|
||||
container.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "rainbow puke fix";
|
||||
button.onclick = function(){sendGuestCommand(guestid, "forceKeyframe");};
|
||||
container.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "highlight";
|
||||
button.onclick = function(){sendGuestCommand(guestid, "soloVideo");};
|
||||
container.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "scene 2";
|
||||
button.onclick = function(){sendGuestCommand(guestid, "addScene", 2);};
|
||||
container.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "scene 3";
|
||||
button.onclick = function(){sendGuestCommand(guestid, "addScene", 3);};
|
||||
container.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "scene 4";
|
||||
button.onclick = function(){sendGuestCommand(guestid, "addScene", 4);};
|
||||
container.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "scene 5";
|
||||
button.onclick = function(){sendGuestCommand(guestid, "addScene", 5);};
|
||||
container.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "scene 6";
|
||||
button.onclick = function(){sendGuestCommand(guestid, "addScene", 6);};
|
||||
container.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = " scene 7";
|
||||
button.onclick = function(){sendGuestCommand(guestid, "addScene", 7);};
|
||||
container.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "scene 8";
|
||||
button.onclick = function(){sendGuestCommand(guestid, "addScene", 8);};
|
||||
container.appendChild(button);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.innerHTML = "scene 'test'";
|
||||
button.onclick = function(){sendGuestCommand(guestid, "addScene", 'test');}; // specifying a custom scene; it needs to be active for this to work..
|
||||
container.appendChild(button);
|
||||
|
||||
|
||||
var input = document.createElement("label");
|
||||
input.innerHTML = "mic volume:";
|
||||
container.appendChild(input);
|
||||
if (data.input) {
|
||||
var inputWrapper = document.createElement("div");
|
||||
var input = document.createElement("input");
|
||||
input.type = "range";
|
||||
input.title = "volume";
|
||||
input.min = 0;
|
||||
input.max = 200;
|
||||
input.value = 100;
|
||||
input.onchange = function(){sendGuestCommand(guestid, "volume", this.value);};
|
||||
container.appendChild(input);
|
||||
|
||||
for (var attr in data.input) {
|
||||
input[attr] = data.input[attr];
|
||||
}
|
||||
if (input.type === 'range') {
|
||||
input.onchange = function() { postMessage(data.result(this.value)) };
|
||||
} else {
|
||||
var button = newElement("button", { innerText: "Send" });
|
||||
button.onclick = function() { postMessage(data.result(input.value)) };
|
||||
inputWrapper.appendChild(button);
|
||||
}
|
||||
|
||||
function sendGuestCommand(target, action, value=null){ //
|
||||
iframe.contentWindow.postMessage({"target":target, "action":action, "value":value}, '*'); //
|
||||
//sendMessage(JSON.stringify({"target":target, "action":action, "value":value})); // if using the Companion API..
|
||||
inputWrapper.prepend(input);
|
||||
parentContainer.appendChild(inputWrapper);
|
||||
}
|
||||
}
|
||||
|
||||
function sendSelfCommand(action, value=null){
|
||||
iframe.contentWindow.postMessage({"target":null, "action":action, "value":value}, '*');
|
||||
//sendMessage(JSON.stringify({"target":target, "action":action, "value":value})); // if using the Companion API..
|
||||
function logOutput(output, config) {
|
||||
var log = document.createElement("div");
|
||||
var outputWindow = config?.window ?? mainLog;
|
||||
|
||||
log.innerHTML = output;
|
||||
if (config?.classList) {
|
||||
log.classList = config?.classList;
|
||||
}
|
||||
|
||||
loadSelfCommands();
|
||||
loadGuestCommands(1);
|
||||
loadGuestCommands(2);
|
||||
loadGuestCommands(3);
|
||||
var randomGuest = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 10);
|
||||
loadGuestCommands(randomGuest, true);
|
||||
|
||||
// Clears the log when a new entry comes in
|
||||
if (config?.replace === true) {
|
||||
outputWindow.innerHTML = ""
|
||||
}
|
||||
|
||||
outputWindow.appendChild(log);
|
||||
outputWindow.scrollTo(0, outputWindow.scrollHeight);
|
||||
}
|
||||
|
||||
function postMessage(message) {
|
||||
iframe.contentWindow.postMessage(message, '*');
|
||||
var out = "Post: " + JSON.stringify(message);
|
||||
logOutput(out, { classList: "post-log" });
|
||||
}
|
||||
}
|
||||
|
||||
function generateId() {
|
||||
return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 10);
|
||||
}
|
||||
|
||||
function printValues( obj) {
|
||||
var out = "";
|
||||
|
||||
for (var key in obj) {
|
||||
if (typeof obj[key] === "object") {
|
||||
out +="<br />";
|
||||
@@ -700,19 +423,31 @@
|
||||
out +="<b>"+key+"</b>: "+obj[key]+"<br />";
|
||||
}
|
||||
}
|
||||
|
||||
return out;
|
||||
}
|
||||
|
||||
function addUrlParams(_url, paramCheckboxes) {
|
||||
var url = _url !== "" ? _url : "./";
|
||||
|
||||
for(var i = 0; i < paramCheckboxes.length; i++) {
|
||||
var param = paramCheckboxes[i];
|
||||
if (document.getElementById(param).checked){
|
||||
url += url.includes("?") ? '&' : '?';
|
||||
url += param;
|
||||
}
|
||||
}
|
||||
|
||||
return url;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<input placeholder="Enter an VDO.Ninja View URL here" id="viewlink" />
|
||||
<button onclick="loadIframe();">ADD</button>
|
||||
<input type="checkbox" id="clean" >Clean Output
|
||||
<input type="checkbox" id="cleanoutput" >Clean Output
|
||||
<input type="checkbox" id="transparent">Transparent
|
||||
<input type="checkbox" id="hidemenu">Hide Menu
|
||||
<div id="container">
|
||||
|
||||
</div>
|
||||
<div id="container"></div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user