mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-11 21:58:35 +00:00
145 lines
3.7 KiB
HTML
145 lines
3.7 KiB
HTML
<html>
|
|
<head>
|
|
<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: #0000;
|
|
}
|
|
iframe {
|
|
border:0;
|
|
margin:0;
|
|
padding:0;
|
|
display:block;
|
|
width:100%;
|
|
height:90%
|
|
}
|
|
#viewlink {
|
|
width:400px;
|
|
}
|
|
#container {
|
|
display:block;
|
|
padding:0px;
|
|
padding:0px;
|
|
}
|
|
input{
|
|
padding:5px;
|
|
margin:5px;
|
|
}
|
|
button{
|
|
padding:5px;
|
|
margin:5px;
|
|
}
|
|
</style>
|
|
<script>
|
|
|
|
function loadIframe(){
|
|
|
|
document.getElementById("container").innerHTML = "";
|
|
|
|
|
|
|
|
var iframe = document.createElement("iframe");
|
|
var iframeContainer = document.createElement("div");
|
|
iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;display-capture;";
|
|
|
|
iframe.src = "../?dir=teststeve123&password=1234";
|
|
iframeContainer.appendChild(iframe);
|
|
document.getElementById("container").appendChild(iframeContainer);
|
|
|
|
var listOfStreamIDs = [
|
|
"1234_pov",
|
|
"2345_pov",
|
|
"3456_pov",
|
|
"4567_pov",
|
|
"5678_pov"
|
|
];
|
|
|
|
|
|
for (var i=0;i<listOfStreamIDs.length;i++){
|
|
|
|
var button = document.createElement("a");
|
|
button.innerHTML = "Invite "+listOfStreamIDs[i];
|
|
button.target = "_blank";
|
|
button.href = "../?room=teststeve123&password=1234&broadcast&transparent&autostart&nmb&nvb&gain=0&webcam&l=stevetest&push="+listOfStreamIDs[i];
|
|
iframeContainer.appendChild(button);
|
|
|
|
var button = document.createElement("button");
|
|
button.innerHTML = "TOGGLE "+listOfStreamIDs[i];
|
|
button.dataset.sid = listOfStreamIDs[i];
|
|
button.onclick = function(){
|
|
iframe.contentWindow.postMessage({
|
|
action: "addScene",
|
|
value: "1",
|
|
target: this.dataset.sid
|
|
}, '*');
|
|
iframe.contentWindow.postMessage({
|
|
action: "mic",
|
|
value: true,
|
|
target: this.dataset.sid
|
|
}, '*');
|
|
|
|
}; // target can be a stream ID or * for all.
|
|
iframeContainer.appendChild(button);
|
|
}
|
|
|
|
|
|
|
|
//////////// LISTEN FOR EVENTS
|
|
|
|
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
|
|
var eventer = window[eventMethod];
|
|
var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
|
|
|
|
|
|
/// If you have a routing system setup, you could have just one global listener for all iframes instead.
|
|
|
|
eventer(messageEvent, function (e) {
|
|
if (e.source != iframe.contentWindow){return} // reject messages send from other iframes
|
|
|
|
|
|
if ("action" in e.data){
|
|
var outputWindow = document.createElement("div");
|
|
outputWindow.innerHTML = "event: "+e.data.action+"<br />";
|
|
outputWindow.style.border="1px dotted black";
|
|
iframeContainer.appendChild(outputWindow);
|
|
}
|
|
|
|
|
|
if ("streamIDs" in e.data){
|
|
var outputWindow = document.createElement("div");
|
|
outputWindow.innerHTML = "streamID list:<br />";
|
|
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);
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div id="container">
|
|
|
|
<button onclick="loadIframe();">Go to Directors Room</button>
|
|
<br />
|
|
The password for guests is 1234<br />
|
|
<br />
|
|
<br />
|
|
Custom guest invites and toggles for add/removing from scene=1 are on the bottom.
|
|
<br />
|
|
<br />
|
|
Scene=1 link: <a target="_blank" href="https://vdo.ninja/?scene=1&room=teststeve123&password=1234">https://vdo.ninja/?scene=1&room=teststeve123&password=1234</a>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</body>
|
|
</html> |