Last active
November 12, 2023 22:34
-
-
Save steveseguin/15bba03d1993c88d0bd849f7749ea625 to your computer and use it in GitHub Desktop.
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
| <html> | |
| <body> | |
| <div id="results" style="overflow:scroll;max-height:300px;"> | |
| starting... | |
| </div> | |
| <script> // https://jsfiddle.net/steveseguin/0t3ayvk8/31/ | |
| var connectionID = Math.random()*100000001; // we need to create a stream ID; it needs to be secure/unique, up to ~50 chars. | |
| function RecvDataWindow(){ | |
| var iframe = document.createElement("iframe"); | |
| iframe.src = "https://vdo.ninja/?view="+connectionID+"&cleanoutput"; // See the info at docs.vdo.ninja for options | |
| iframe.style.width = "0px"; | |
| iframe.style.height = "0px"; | |
| iframe.style.position = "fixed"; | |
| iframe.style.left = "-100px"; | |
| iframe.style.top = "-100px"; // we are just going to make the iframe out-of-sight and zero-size. | |
| iframe.id = "frame1" | |
| document.body.appendChild(iframe); | |
| var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; // legacy browser support | |
| var eventer = window[eventMethod]; | |
| var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message"; | |
| eventer(messageEvent, function (e) { | |
| if (e.source != iframe.contentWindow){return} // reject messages sent from other iframes | |
| if ("dataReceived" in e.data){ // user-transferred data. Other data is available, such as connection info. | |
| document.getElementById("results").innerHTML += e.data.dataReceived+"<br />"; | |
| console.log(e.data); | |
| try { | |
| iframe.contentWindow.postMessage({"sendData":"pong!!", "UUID":e.data.UUID}, '*'); // we will return a pong to the sender; just the sender. | |
| } catch(E){} | |
| } | |
| }); | |
| } | |
| function SendDataWindow(){ | |
| var iframe = document.createElement("iframe"); | |
| iframe.src = "https://vdo.ninja/?push="+connectionID+"&vd=0&ad=0&autostart&cleanoutput"; // connect to vdo.ninja; disable camera/mic tho | |
| iframe.style.width = "0px"; | |
| iframe.style.height = "0px"; | |
| iframe.style.position = "fixed"; | |
| iframe.style.left = "-100px"; | |
| iframe.style.top = "-100px"; | |
| iframe.id = "frame2"; | |
| document.body.appendChild(iframe); | |
| setInterval(function(){ | |
| try { | |
| console.log("."); | |
| document.getElementById("frame2").contentWindow.postMessage({"sendData":"ping!!", "type": "pcs"}, '*'); // send a custom message to all attached connections | |
| } catch(E){} // ** Just noting, type = "pcs" implies sending the message to only viewers. Default is both viewers and other publishers. "rpcs" is send to just publishers. | |
| }, 1000); | |
| var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; | |
| var eventer = window[eventMethod]; | |
| var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message"; | |
| eventer(messageEvent, function (e) { | |
| if (e.source != iframe.contentWindow){return} // reject messages send from other iframes | |
| if ("dataReceived" in e.data){ // raw data | |
| console.log(e.data); | |
| document.getElementById("results").innerHTML += e.data.dataReceived+"<br />"; | |
| } | |
| }); | |
| } | |
| SendDataWindow(); // create a publishing endpoint | |
| RecvDataWindow(); // joins the publishing endpoint | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You can play with this sample here, live:
https://jsfiddle.net/steveseguin/0t3ayvk8/31/
This app just creates a direct peer to peer connection using VDO.Ninja. You can send any data you want, back and forth, using the provided IFRAME API.
It's awesome!! check it out.