-
-
Notifications
You must be signed in to change notification settings - Fork 837
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a9ec33c
commit deb6696
Showing
9 changed files
with
691 additions
and
187 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,131 @@ | ||
| <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; | ||
| } | ||
| 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;"; | ||
|
|
||
|
|
||
| var iframesrc = "https://vdo.ninja/?transparent&cleanoutput&bitrate=200&manual&noaudio&view="; | ||
|
|
||
| var listOfStreamIDs = [ | ||
| "1234_pov", | ||
| "2345_pov", | ||
| "3456_pov", | ||
| "4567_pov", | ||
| "5678_pov" | ||
| ]; | ||
|
|
||
| var button = document.createElement("button"); | ||
| button.innerHTML = "List connected StreamIDs"; | ||
| button.onclick = function(){iframe.contentWindow.postMessage({"getStreamIDs":true}, '*');}; | ||
| iframeContainer.appendChild(button); | ||
|
|
||
| var button = document.createElement("button"); | ||
| button.innerHTML = "HIDE ALL"; | ||
| button.dataset.sid = listOfStreamIDs[i]; | ||
| button.onclick = function(){iframe.contentWindow.postMessage({"target":"*", "remove":true}, '*');}; | ||
| iframeContainer.appendChild(button); | ||
|
|
||
| for (var i=0;i<listOfStreamIDs.length;i++){ | ||
| if (i!==0){ | ||
| iframesrc+=","; | ||
| } | ||
| iframesrc+=listOfStreamIDs[i]; | ||
|
|
||
| var button = document.createElement("button"); | ||
| button.innerHTML = "SHOW "+listOfStreamIDs[i]; | ||
| button.dataset.sid = listOfStreamIDs[i]; | ||
| button.title = "Publish using: https://vdo.ninja/?push="+listOfStreamIDs[i]; | ||
| button.onclick = function(){ | ||
| iframe.contentWindow.postMessage({"target":"*", "remove":true}, '*'); | ||
| iframe.contentWindow.postMessage({"target":this.dataset.sid, "add":true, "settings":{"style":{"width":"100%", "height":"100%", "display":"block"}}}, '*'); | ||
| }; // target can be a stream ID or * for all. | ||
| iframeContainer.appendChild(button); | ||
| } | ||
|
|
||
| iframe.src = iframesrc; | ||
| iframeContainer.appendChild(iframe); | ||
| document.getElementById("container").appendChild(iframeContainer); | ||
|
|
||
| //////////// 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();">CONNECT</button> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.