elias/vdo.ninja
1
0
Fork 0
mirror of https://github.com/eliasstepanik/vdo.ninja.git synced 2026-01-11 13:48:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added iFrame communication and an example

Browse Source
This commit is contained in:
Steve Seguin 2020-07-17 02:25:09 -04:00 committed by GitHub
parent 9d1c466025
commit 079b1e8545
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 235 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
iframe.html Normal file
View File

@ -0,0 +1,116 @@
<html>
<head><title>IFRAME Example</title>
<style>
body{
padding:0;
margin:0;
}
iframe {
border:0;
margin:0;
padding:0;
display:block;
margin:10px;
width:320px;
height:180px;
}
#viewlink {
width:400px;
}
#container {
display:block;
padding:0px;
}
input{
padding:5px;
margin:5px;
}
button{
padding:5px;
margin:5px;
}
</style>
<script>
function loadIframe(){
var iframe = document.createElement("iframe");
var iframeContainer = document.createElement("div");
iframe.allow="autoplay";
if (document.getElementById("clean").checked){
iframe.src = document.getElementById("viewlink").value+"&cleanoutput";
} else {
iframe.src = document.getElementById("viewlink").value;
}
iframeContainer.appendChild(iframe);
document.getElementById("container").appendChild(iframeContainer);
var button = document.createElement("button");
button.innerHTML = "Mute";
button.onclick = function(){iframe.contentWindow.postMessage({"mute":true}, '*');}
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "Un-Mute";
button.onclick = function(){iframe.contentWindow.postMessage({"mute":false}, '*');}
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "Toggle Mute";
button.onclick = function(){iframe.contentWindow.postMessage({"mute":"toggle"}, '*');}
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "Disconnect";
button.onclick = function(){iframe.contentWindow.postMessage({"close":true}, '*');}
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "Low Bitrate";
button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":30}, '*');}
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "High Bitrate";
button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":5000}, '*');}
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "Default Bitrate";
button.onclick = function(){iframe.contentWindow.postMessage({"bitrate":-1}, '*');}
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "Reload";
button.onclick = function(){iframe.contentWindow.postMessage({"reload":true}, '*');}
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "50% Volume";
button.onclick = function(){iframe.contentWindow.postMessage({"volume":0.5}, '*');}
iframeContainer.appendChild(button);
var button = document.createElement("button");
button.innerHTML = "100% Volume";
button.onclick = function(){iframe.contentWindow.postMessage({"volume":1.0}, '*');}
iframeContainer.appendChild(button);
}
</script>
</head>
<body>
<input placeholder="Enter an OBS.Ninja View URL here" id="viewlink" />
<button onclick="loadIframe();">ADD</button>
<input type="checkbox" id="clean" checked>Clean Output
<div id="container">
</div>
</body>
</html>

31
index.html
View File

@ -8,7 +8,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png" />
<link rel="icon" href="./images/favicon.ico" />
<link itemprop="thumbnailUrl" href="./images/obsNinja_logo_full.png" />
<link itemprop="thumbnailUrl" href="//images/obsNinja_logo_full.png" />
<!-- Primary Meta Tags -->
<title>OBS.Ninja</title>
<meta name="title" content="OBS.Ninja" />
@ -20,11 +20,11 @@
<meta property="og:url" content="https://obs.ninja/" />
<meta property="og:title" content="OBS.Ninja" />
<meta property="og:description" content="Bring live video from your smartphone, computer, or friends directly into OBS Studio. 100% free." />
<meta property="og:image" itemprop="image" content="./images/obsNinja_logo_full.png" />
<meta property="og:image" itemprop="image" content="https://obs.ninja/images/obsNinja_logo_full.png" />
<meta name="msapplication-TileImage" content="./images/obsNinja_logo_full.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="256" />
<meta property="og:image:height" content="256" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://obs.ninja/" />
@ -38,7 +38,7 @@
<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script type="text/javascript" src="./thirdparty/qrcode.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="./main.css?ver=2" />
<link rel="stylesheet" href="./main.css?ver=3" />
</head>
<body id="main" class="cat">
<span itemprop="image" itemscope itemtype="image/png">
@ -48,8 +48,8 @@
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="./images/obsNinja_logo_full.png" />
</span>
<script language="javascript" type="text/javascript" src="./thirdparty/CodecsHandler.js?ver=6"></script>
<script language="javascript" type="text/javascript" src="./webrtc.js?ver=7"></script>
<script language="javascript" type="text/javascript" src="./thirdparty/CodecsHandler.js?ver=7"></script>
<script language="javascript" type="text/javascript" src="./webrtc.js?ver=9"></script>
<input id="zoomSlider" type="range" style="display: none;" />
<div id="header">
<a id="logoname" href="./" style="text-decoration: none; color: white; margin: 2px;">
@ -57,10 +57,11 @@
<font id="qos">O</font>BS.Ninja
</span>
</a>
<div id="head1" style="display: inline-block; position: relative;">
<div id="head1" style="display: inline-block; padding:1px; position: relative;">
<input id="joinroomID" name="joinroomID" size="22" placeholder="Join by Room Name here" />
<button style="padding:1px;margin:0;" onclick="jumptoroom();">GO</button>
</div>
<div id="head3" style="display: block;" class="advanced">
<div id="head3" style="display: inline-block;" class="advanced">
<font style="color: #888;" id="copythisurl"> &nbsp;
<span data-translate="copy-this-url">Copy this URL into an OBS "Browser Source"</span> <i style="color: #CCC;" class="las la-long-arrow-alt-right"></i> &nbsp;
</font>
@ -435,7 +436,7 @@
</li>
<br />
Site last updated: <a href="https://www.reddit.com/r/OBSNinja/comments/hhba50/version_8_just_released_see_the_change_log_here/">June 28th, 2020</a>. The previous version can be found at
Site last updated: <a href="https://www.reddit.com/r/OBSNinja/comments/hhba50/version_8_just_released_see_the_change_log_here/">July 10th, 2020</a>. The previous version can be found at
<a href="https://obs.ninja/v7/">https://obs.ninja/v7/</a> if you are having new issues.
@ -525,6 +526,12 @@
<br />
<a onclick="changeLg('it');toggle(document.getElementById('languages'));" style="cursor: pointer;">Italian </a>
<br />
<a onclick="changeLg('de');toggle(document.getElementById('languages'));" style="cursor: pointer;">German </a>
<br />
<a onclick="changeLg('es');toggle(document.getElementById('languages'));" style="cursor: pointer;">Spanish </a>
<br />
<a onclick="changeLg('nl');toggle(document.getElementById('languages'));" style="cursor: pointer;">Dutch </a>
<br />
</u>
<br />
<a href="https://github.com/steveseguin/obsninja/tree/master/translations">Add More Here!</a>
@ -550,7 +557,7 @@
turn = {};
turn.username = "steve";
turn.credential = "justtesting";
turn.urls = ["turn:turn2.obs.ninja:443"]; // US WEST
turn.urls = ["turn:turn2.obs.ninja:3478?transport=tcp"]; // US WEST
session.configuration.iceServers.push(turn);
// session.configuration.iceTransportPolicy = "relay"; // uncomment to enable "&privacy" and force the TURN server

103
main.js
View File

@ -139,7 +139,21 @@ document.addEventListener("keydown", event => {
if ((event.ctrlKey) || (event.metaKey) ){ // detect if CTRL is pressed
CtrlPressed = true;
}
if (CtrlPressed && event.keyCode){
if (event.keyCode == 77) { // m
toggleMute();
} else if (event.keyCode == 69) { // e
hangup();
} else if (event.keyCode == 66) { // b
toggleVideoMute();
}
}
});
document.addEventListener("keyup", event => {
if (!((event.ctrlKey) || (event.metaKey))){
if (CtrlPressed){
@ -160,9 +174,10 @@ window.onpopstate = function() {
}
};
if (typeof variable !== 'undefined') { // make sure to init the WebRTC if not exists.
if (typeof session === 'undefined') { // make sure to init the WebRTC if not exists.
var session = WebRTC.Media;
session.streamID = session.generateStreamID();
errorlog("Serious error: WebRTC session didn't load in time");
}
@ -647,6 +662,8 @@ if ((urlParams.has('mirror')) && (urlParams.has('flip'))){
var mirrorStyle = document.createElement('style');
mirrorStyle.innerHTML = "video {transform: scaleX(-1) scaleY(-1); }";
document.getElementsByTagName("head")[0].appendChild(mirrorStyle);
session.mirrored=true;
session.flipped=true;
} catch (e){errorlog(e);}
} else if (urlParams.has('mirror')){ // mirror the video horizontally
try {
@ -654,12 +671,14 @@ if ((urlParams.has('mirror')) && (urlParams.has('flip'))){
var mirrorStyle = document.createElement('style');
mirrorStyle.innerHTML = "video {transform: scaleX(-1);}";
document.getElementsByTagName("head")[0].appendChild(mirrorStyle);
session.mirrored=true;
} catch (e){errorlog(e);}
} else if (urlParams.has('flip')){ // mirror the video vertically
try {
log("Mirror all videos");
session.flipped=true;
var mirrorStyle = document.createElement('style');
mirrorStyle.innerHTML = "video {transform: scaleY(-1); }";
mirrorStyle.innerHTML = "video {transform: scaleY(-1);}";
document.getElementsByTagName("head")[0].appendChild(mirrorStyle);
} catch (e){errorlog(e);}
}
@ -848,6 +867,73 @@ function updateStats(){
} catch (e){errorlog(e);}
}
window.onmessage = function(e){ // iFRAME support
log(e.data);
if ("mute" in e.data) {
if (e.data.mute == true){
for (var i in session.rpcs){
try {
session.rpcs[i].videoElement.muted = true;
} catch(e){
errorlog(e);
}
}
} else if (e.data.mute == false){
for (var i in session.rpcs){
try {
session.rpcs[i].videoElement.muted = false;
} catch(e){
errorlog(e);
}
}
} else if (e.data.mute == "toggle"){
for (var i in session.rpcs){
try {
session.rpcs[i].videoElement.muted = !(session.rpcs[i].videoElement.muted);
} catch(e){
errorlog(e);
}
}
}
}
if ("volume" in e.data) {
for (var i in session.rpcs){
try {
session.rpcs[i].videoElement.volume = parseFloat(e.data.volume);
} catch(e){
errorlog(e);
}
}
}
if ("bitrate" in e.data){
for (var i in session.rpcs){
try {
session.requestRateLimit(parseInt(e.data.bitrate),i);
} catch(e){
errorlog(e);
}
}
}
if ("reload" in e.data){
location.reload();
}
if ("close" in e.data){
for (var i in session.rpcs){
try {
session.rpcs[i].close();
} catch(e){
errorlog(e);
}
}
}
};
function toggleMute(){ // TODO: I need to have this be MUTE, toggle, with volume not touched.
if (session.muted==false){
session.muted = true;
@ -1190,7 +1276,7 @@ function createRoom(roomname=false){
passAdd2="&password="+session.password;
}
gridlayout.innerHTML = "<br /><div style='display:inline-block'><font style='font-size:130%;color:white;'></font><input onclick='popupMessage(event);copyFunction(this)' onmousedown='copyFunction(this)' style='cursor:grab;font-weight:bold;background-color:#78F; width:400px; font-size:100%; padding:10px; border:2px solid black; margin:5px;' class='task' value='https://"+location.host+location.pathname+"?room="+session.roomid+passAdd+"' /><font style='font-size:130%;color:white;'><i class='las la-video' style='position:relative;top:10px;font-size:2em;' aria-hidden='true'></i> - Invites users to join the group and broadcast their feed to it. These users will see every feed, so a limit of 4 is recommended.</font></div>";
gridlayout.innerHTML = "<br /><div style='display:inline-block'><font style='font-size:130%;color:white;'></font><input onclick='popupMessage(event);copyFunction(this)' onmousedown='copyFunction(this)' style='cursor:grab;font-weight:bold;background-color:#78F; width:400px; font-size:100%; padding:10px; border:2px solid black; margin:5px;' class='task' value='https://"+location.host+location.pathname+"?room="+session.roomid+passAdd+"' /><font style='font-size:130%;color:white;'><i class='las la-video' style='position:relative;top:10px;font-size:2em;' aria-hidden='true'></i> - Invites users to join the group and broadcast their feed to it. These users will see every feed, so performance problems may arise for some guests if too many people join a room.</font></div>";
gridlayout.innerHTML += "<br /><font style='font-size:130%;color:white;'></font><input class='task' onclick='popupMessage(event);copyFunction(this)' onmousedown='copyFunction(this)' style='cursor:grab;font-weight:bold;background-color:#F45;width:400px;font-size:100%;padding:10px;border:2px solid black;margin:5px;' value='https://"+location.host+location.pathname+"?room="+session.roomid+passAdd+"&view' /><font style='font-size:130%;color:white;'><i class='las la-video' style='position:relative;top:10px;font-size:2em;' aria-hidden='true'></i> - Link to Invite users to broadcast their feeds to the group. These users will not see or hear any feed from the group.</font><br />";
@ -1968,6 +2054,17 @@ function previewWebcam(){
if( activatedPreview == true){log("activeated preview return 1");return;}
activatedPreview = true;
if (session.mirrored && session.flipped){
getById('previewWebcam').style.transform = " scaleX(1) scaleY(-1)";
} else if (session.mirrored){
getById('previewWebcam').style.transform = "scaleX(1)";
} else if (session.flipped){
getById('previewWebcam').style.transform = "scaleY(-1) scaleX(-1)";
} else {
getById('previewWebcam').style.transform = "scaleX(-1)";
}
window.setTimeout(() => {
try{
var oldstream = getById('previewWebcam').srcObject;