mirror of
https://github.com/SrIzan10/vdo.ninja.git
synced 2026-05-01 11:05:24 +00:00
129 lines
3.4 KiB
HTML
129 lines
3.4 KiB
HTML
<html>
|
|
<head><title>Basic IFRAME Inbound Stats sample</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:#003;
|
|
width:100%;
|
|
height:100%;
|
|
color:white;
|
|
}
|
|
|
|
iframe {
|
|
width:60%;
|
|
height:60%;
|
|
border:0;
|
|
margin:0;
|
|
padding:0;
|
|
display:block;
|
|
}
|
|
|
|
|
|
input{
|
|
padding:10px;
|
|
width:80%;
|
|
font-size:1.2em;
|
|
z-index: 1000;
|
|
margin:10%;
|
|
}
|
|
|
|
#startButton{
|
|
margin: 10px;
|
|
padding: 20px
|
|
display: block;
|
|
border-radius: 50px;
|
|
font-size:1.5em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#toggleMute{
|
|
margin: 10px;
|
|
padding: 30px 0;
|
|
border-radius: 50px;
|
|
font-size:1.5em;
|
|
display: block;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width:200px;
|
|
left: calc(50% - 100px);
|
|
}
|
|
|
|
.pressed {
|
|
background-color: red;
|
|
}
|
|
|
|
button {
|
|
margin:10px;
|
|
padding:10px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="clean">
|
|
<center>
|
|
Create a simple vdo.ninja/?push=XXX link in a different tab, enter the stream ID below to view it and view the IFRAME API stats. Stats will be printed to screen and console.<hr>
|
|
<input placeholder="Enter a VDON stream ID here" id="viewlink" type="text" />
|
|
<button id="startButton" onclick="loadIframes()" style="display:block;padding:10px;margin:10px;">START</button>
|
|
</center>
|
|
</div>
|
|
<div id="output"></div>
|
|
<script>
|
|
var iframe;
|
|
|
|
function sendSelfCommand(action, value = null) {
|
|
if (iframe && iframe.contentWindow) {
|
|
iframe.contentWindow.postMessage({ [action]: true}, '*');
|
|
}
|
|
}
|
|
|
|
function loadIframes() {
|
|
var streamID = document.getElementById("viewlink").value;
|
|
var path = "vdo.ninja";
|
|
var streamSrc = "https://" + path + "/?view=" + streamID;
|
|
|
|
document.getElementById("clean").style.display = "none";
|
|
|
|
var button = document.createElement("button");
|
|
button.id = "getDetailedState";
|
|
button.innerHTML = "Get Detailed State";
|
|
document.body.appendChild(button);
|
|
|
|
button.onclick = function () {
|
|
sendSelfCommand("getDetailedState", true);
|
|
};
|
|
|
|
|
|
var button2 = document.createElement("button");
|
|
button2.id = "getStats";
|
|
button2.innerHTML = "Get Full Connection Stats";
|
|
document.body.appendChild(button2);
|
|
|
|
button2.onclick = function () {
|
|
sendSelfCommand("getStats", true);
|
|
};
|
|
|
|
iframe = document.createElement("iframe");
|
|
iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
|
|
iframe.src = streamSrc;
|
|
iframe.style.width = "100%";
|
|
iframe.style.height = "400px"; // Adjust the size as needed
|
|
document.body.appendChild(iframe);
|
|
|
|
window.addEventListener("message", function (e) {
|
|
if (e.source === iframe.contentWindow) {
|
|
console.log(e.data);
|
|
if (e.data.action && (e.data.action == "view-stats-updated")){return;} // annoying stat.
|
|
document.getElementById("output").innerText += JSON.stringify(e.data);
|
|
document.getElementById("output").innerHTML += "<br />";
|
|
}
|
|
}, false);
|
|
|
|
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |