Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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/beta/?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/beta/?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>
@steveseguin

This comment has been minimized.

Copy link
Owner Author

@steveseguin steveseguin commented Aug 22, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment