mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-11 13:48:38 +00:00
121 lines
2.5 KiB
HTML
121 lines
2.5 KiB
HTML
<html>
|
|
<head><title>Twitch + Video</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%;
|
|
}
|
|
|
|
iframe {
|
|
width:100%;
|
|
height:100%;
|
|
border:0;
|
|
margin:0;
|
|
padding:0;
|
|
position:absolute;
|
|
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;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="clean">
|
|
<center>
|
|
<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>
|
|
<script>
|
|
|
|
window.addEventListener("orientationchange", function() {
|
|
// Announce the new orientation number
|
|
// alert(window.orientation);
|
|
}, false);
|
|
|
|
|
|
|
|
|
|
function loadIframes(url=false){
|
|
|
|
var streamID = document.getElementById("viewlink").value;
|
|
https://vdo.ninja/?label&webcam&cleanoutput&ad=1&vd=1
|
|
|
|
var path = "vdo.ninja"; //window.location.host+window.location.pathname.split("/").slice(0,-1).join("/");
|
|
var streamSrc = "https://"+path+"/?push="+streamID+"&label&webcam&cleanoutput&ad=1&vd=1";
|
|
|
|
document.getElementById("clean").parentNode.removeChild(document.getElementById("clean"));
|
|
|
|
var iframe = document.createElement("iframe");
|
|
iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
|
|
iframe.src = streamSrc;
|
|
document.body.appendChild(iframe);
|
|
|
|
function sendSelfCommand(action, value=null){
|
|
iframe.contentWindow.postMessage({"target":null, "action":action, "value":value}, '*');
|
|
}
|
|
|
|
|
|
|
|
var button = document.createElement("button");
|
|
button.id = "toggleMute";
|
|
button.innerHTML = "Mute";
|
|
button.dataset.value = "true";
|
|
document.body.appendChild(button);
|
|
|
|
button.onclick = function(){
|
|
|
|
if (this.dataset.value=="true"){
|
|
this.dataset.value = "false";
|
|
this.classList.add("pressed");
|
|
this.innerHTML = "Un-Mute";
|
|
sendSelfCommand("mic",false);
|
|
} else {
|
|
this.classList.remove("pressed");
|
|
this.innerHTML = "Mute";
|
|
this.dataset.value = "true";
|
|
sendSelfCommand("mic",true);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html> |