mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-16 08:08:28 +00:00
Currently whats in production
TURN server auth codes are temporary. Don't get addicted. yet.
This commit is contained in:
Steve Seguin
GitHub
parent
366ab39fb6
commit
5f2e198956
169
index.html
169
index.html
@ -40,6 +40,14 @@
|
||||
.gowebcam {
|
||||
font-size:110%;
|
||||
}
|
||||
|
||||
.pressed {
|
||||
background: #e3e3e3;
|
||||
-webkit-box-shadow: inset 0px 0px 5px #a1a1a1;
|
||||
-moz-box-shadow: inset 0px 0px 5px #a1a1a1;
|
||||
box-shadow: inset 0px 0px 5px #a1a1a1;
|
||||
outline: none;
|
||||
}
|
||||
.row {
|
||||
align-content:center;
|
||||
text-align: center;
|
||||
@ -89,7 +97,7 @@
|
||||
|
||||
.directorsgrid {
|
||||
justify-items: normal;
|
||||
grid-auto-columns: minmax(100px,300px);
|
||||
grid-auto-columns: minmax(100px,500px);
|
||||
grid-auto-rows: minmax(100px, 300px);
|
||||
display:block ! important;
|
||||
|
||||
@ -102,7 +110,7 @@
|
||||
.directorsgrid .vidcon {
|
||||
display: inline-block !important;
|
||||
max-width: 300px !important;
|
||||
max-height: 300px !important;
|
||||
max-height: 500px !important;
|
||||
background: #E3E4EF;
|
||||
}
|
||||
.directorsgrid .tile {
|
||||
@ -444,7 +452,7 @@ video {
|
||||
</head>
|
||||
<body id="main">
|
||||
<script language="javascript" type="text/javascript" src="./CodecsHandler.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="./webrtc.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="./webrtc.js?v=5"></script>
|
||||
|
||||
<div id="header">
|
||||
<h2>
|
||||
@ -480,16 +488,16 @@ video {
|
||||
<div id="mainmenu" class="row" style="align:center;">
|
||||
<div id="container-1" class="column columnfade" style="background-color:#ddd;">
|
||||
<h2>Add Group Video Chat to OBS</h2>
|
||||
(COMING VERY SOON)
|
||||
<div class="container-inner">
|
||||
<br /><br />
|
||||
<p><input id="videoname1" placeholder="Enter a ROOM NAME here" size=35 maxlength=50 style="padding:5px;" /></br ><br /></p>
|
||||
<br /><h2><font style="color:#D22">The Group Chat is EXPERIMENTAL and likely unstable.<br />Please report issues to steve@seguin.email</font></h2><br />
|
||||
<p><b>Room Name:</b><input id="videoname1" placeholder="Enter a ROOM NAME here" size=35 maxlength=50 style="padding:5px;" /></br ><br /></p>
|
||||
<li>Anyone can enter a room if they know the name, so keep it unique</li>
|
||||
<li>Having more than four (4) people in a room is not advisable due to performance reasons.</li>
|
||||
<li>There are numerous known issues. Please report feedback.</li>
|
||||
<br />
|
||||
With a room name entered, enter the room as a director. Links to invite guests will be provided.
|
||||
<br />
|
||||
<button onclick="createRoom()" class="gowebcam">Enter Room</button><br />
|
||||
<button onclick="createRoom()" class="gowebcam">Enter Room as Director</button><br />
|
||||
</div>
|
||||
<div class="outer close">
|
||||
<div class="inner">
|
||||
@ -564,14 +572,15 @@ video {
|
||||
<br />
|
||||
<i><font style="color:red">Known issues:</font></i><br />
|
||||
|
||||
<li>** MacOS users need to use OBS v23 and a local microphone for the time being.</li>
|
||||
<li>** MacOS users need to use OBS v23, along with either a local microphone or virtual audio cable.</li>
|
||||
<li>** The rear camera on some smartphones have issues. Please report these issues, including your phone's model.</li>
|
||||
<li>** For some users the video fails to load in OBS. Try a few times and if it still fails, contact me.</li>
|
||||
<li>** For some users the video fails to load into OBS; this is often caused by a network firewall.</li>
|
||||
<br />
|
||||
<li><b>March 30th, 2020</b>: Site updated. Previous version can be found at https://obs.ninja/old/</li>
|
||||
<li><b>April 7th, 2020</b>: Site updated. The previous version can be found at https://obs.ninja/old/</li><br />
|
||||
<font style="color:green"><h1><u>** Please REFRESH the CACHE in OBS and on your Smartphone/Browser if having problems. <a href="https://imgur.com/C3Oxcpw">https://imgur.com/C3Oxcpw</a></u></h1></font>
|
||||
|
||||
<br /><br />
|
||||
<i><h3>Send feature requests and support to steve@seguin.email, or check out the <a href="https://www.reddit.com/r/OBSNinja/">sub-reddit</a></i></h3>
|
||||
<i><h3>Check out the <a href="https://www.reddit.com/r/OBSNinja/">sub-reddit</a> for help and advanced info. Or email me steve@seguin.email</i></h3>
|
||||
</div>
|
||||
</center>
|
||||
</p></div>
|
||||
@ -584,22 +593,7 @@ video {
|
||||
// Some browsers partially implement mediaDevices. We can't just assign an object
|
||||
// with getUserMedia as it would overwrite existing properties.
|
||||
// Here, we will just add the getUserMedia property if it's missing.
|
||||
if (navigator.mediaDevices.getUserMedia === undefined) {
|
||||
navigator.mediaDevices.getUserMedia = function(constraints) {
|
||||
// First get ahold of the legacy getUserMedia, if present
|
||||
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
|
||||
// Some browsers just don't implement it - return a rejected promise with an error
|
||||
// to keep a consistent interface
|
||||
if (!getUserMedia) {
|
||||
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
|
||||
}
|
||||
// Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
|
||||
return new Promise(function(resolve, reject) {
|
||||
getUserMedia.call(navigator, constraints, resolve, reject);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var VIS = vis;
|
||||
var formSubmitting = true;
|
||||
var setFormSubmitting = function() { formSubmitting = true; };
|
||||
@ -653,12 +647,19 @@ if (urlParams.has('turn')){
|
||||
var turnstring = urlParams.get('turn').split(";");
|
||||
var turn = {};
|
||||
turn.username = turnstring[0]; // myusername
|
||||
turn.credential = turnstring[1]; mypassword
|
||||
turn.credential = turnstring[1]; //mypassword
|
||||
turn.urls = [turnstring[2]]; // ["turn:turn.obs.ninja:443"];
|
||||
session.configuration.iceServers.push(turn);
|
||||
} catch (e){
|
||||
alert("TURN server parameters were wrong.");
|
||||
errorlog(e);
|
||||
}
|
||||
} else { // THIS IS ME being Very Generous. For a little while.
|
||||
var turn = {};
|
||||
turn.username = "steve";
|
||||
turn.credential = "justtesting";
|
||||
turn.urls = ["turn:turn.obs.ninja:443"];
|
||||
session.configuration.iceServers.push(turn);
|
||||
}
|
||||
|
||||
|
||||
@ -683,8 +684,8 @@ if (urlParams.has('roomid')){
|
||||
document.getElementById("head1").className = 'advanced';
|
||||
document.getElementById("head2").className = 'advanced';
|
||||
document.getElementById("head3").className = 'advanced';
|
||||
document.getElementById("mainmenu").innerHTML = "";
|
||||
joinRoom(roomid);
|
||||
document.getElementById("mainmenu").style.display = "none";
|
||||
joinRoom(roomid); // this is a scene, so we want high resolutions
|
||||
}
|
||||
}
|
||||
|
||||
@ -700,7 +701,7 @@ function checkConnection(){
|
||||
setInterval(function(){checkConnection();},5000);
|
||||
|
||||
function toggleMute(){ // TODO: I need to have this be MUTE, toggle, with volume not touched.
|
||||
var msg = {};
|
||||
var msg = {};
|
||||
if (micvolume==0){
|
||||
micvolume = 100;
|
||||
document.getElementById("mutetoggle").className="fa fa-microphone my-float";
|
||||
@ -714,46 +715,70 @@ function toggleMute(){ // TODO: I need to have this be MUTE, toggle, with volume
|
||||
session.volume = micvolume;
|
||||
session.sendMessage(msg);
|
||||
}
|
||||
////////////////////////////
|
||||
|
||||
function directEnable(ele){ // A directing room only is controlled by the Director, with the exception of MUTE.
|
||||
log("enable");
|
||||
if (ele.parentNode.parentNode.dataset.enable==1){
|
||||
ele.parentNode.parentNode.dataset.enable = 0;
|
||||
ele.className = "";
|
||||
ele.innerHTML = "Add to Scene 1";
|
||||
ele.parentNode.parentNode.style.backgroundColor = "#E3E4EF";
|
||||
} else {
|
||||
ele.parentNode.parentNode.style.backgroundColor = "#AFA";
|
||||
ele.parentNode.parentNode.dataset.enable = 1;
|
||||
ele.className = "pressed";
|
||||
ele.innerHTML = "Remove from Scene 1";
|
||||
}
|
||||
var msg = {};
|
||||
msg.request = "sendroom";
|
||||
msg.roomid = session.roomid;
|
||||
msg.director = "1" // scene
|
||||
msg.action = "display";
|
||||
msg.value = ele.parentNode.parentNode.dataset.enable;
|
||||
msg.target = ele.parentNode.parentNode.dataset.UUID;
|
||||
session.sendMsg(msg); // send to everyone in the room, so they know if they are on air or not.
|
||||
}
|
||||
|
||||
|
||||
function directMute(ele){ // A directing room only is controlled by the Director, with the exception of MUTE.
|
||||
log("mute");
|
||||
log("mute");
|
||||
if (ele.parentNode.parentNode.dataset.mute==0){
|
||||
ele.parentNode.parentNode.dataset.mute = 1;
|
||||
ele.className = "";
|
||||
ele.innerHTML = "Mute";
|
||||
} else {
|
||||
ele.parentNode.parentNode.dataset.mute = 0;
|
||||
ele.className = "pressed";
|
||||
ele.innerHTML = "Unmute";
|
||||
}
|
||||
var msg = {};
|
||||
msg.request = "sendroom";
|
||||
msg.roomid = session.roomid;
|
||||
msg.director = "placeholder";
|
||||
msg.director = "1";
|
||||
msg.action = "mute";
|
||||
msg.value = 0;
|
||||
msg.target = ele.dataset.UUID;
|
||||
msg.value = ele.parentNode.parentNode.dataset.mute;
|
||||
msg.target = ele.parentNode.parentNode.dataset.UUID;
|
||||
session.sendMsg(msg); // send to everyone in the room, so they know if they are on air or not.
|
||||
}
|
||||
|
||||
|
||||
function directVolume(ele){ // A directing room only is controlled by the Director, with the exception of MUTE.
|
||||
log("volume");
|
||||
log("volume");
|
||||
var msg = {};
|
||||
msg.request = "sendroom";
|
||||
msg.roomid = session.roomid;
|
||||
msg.director = "placeholder";
|
||||
msg.director = "1";
|
||||
msg.action = "volume";
|
||||
msg.target = ele.parentNode.parentNode.dataset.UUID; // i want to focus on the STREAM ID, not the UUID...
|
||||
msg.value = ele.value;
|
||||
msg.target = ele.dataset.UUID; // i want to focus on the STREAM ID, not the UUID...
|
||||
session.sendMsg(msg); // send to everyone in the room, so they know if they are on air or not.
|
||||
}
|
||||
|
||||
function directVisibility(ele){ // A directing room only is controlled by the Director, with the exception of MUTE.
|
||||
log("display ");
|
||||
var msg = {};
|
||||
msg.request = "sendroom";
|
||||
msg.roomid = session.roomid;
|
||||
msg.director = "placeholder";
|
||||
msg.action = "display";
|
||||
msg.value = 0;
|
||||
msg.target = ele.dataset.UUID;
|
||||
|
||||
session.sendMsg(msg); // send to everyone in the room, so they know if they are on air or not.
|
||||
}
|
||||
|
||||
|
||||
function chatRoom(chatmessage="hi"){ // A directing room only is controlled by the Director, with the exception of MUTE.
|
||||
log("display ");
|
||||
log("Chat message");
|
||||
var msg = {};
|
||||
msg.request = "sendroom";
|
||||
msg.roomid = session.roomid;
|
||||
@ -819,8 +844,9 @@ function publishWebcam(){
|
||||
formSubmitting = false;
|
||||
window.scrollTo(0, 0); // iOS has a nasty habit of overriding the CSS when changing camaera selections, so this addresses that.
|
||||
|
||||
if (session.roomid){
|
||||
joinRoom(session.roomid,300);
|
||||
|
||||
}
|
||||
|
||||
session.publishStream(stream, title);
|
||||
log("streamID is: "+session.streamID);
|
||||
@ -838,6 +864,7 @@ function joinRoom(roomname, maxbitrate=false){
|
||||
roomname = roomname.replace(/[^0-9a-z]/gi, '');
|
||||
if (roomname.length){
|
||||
log("Join room",roomname);
|
||||
log(roomname);
|
||||
session.joinRoom(roomname,maxbitrate).then(function(response){
|
||||
log("Members in Room");
|
||||
log(response);
|
||||
@ -852,7 +879,19 @@ function joinRoom(roomname, maxbitrate=false){
|
||||
// title = response[i]["title"];
|
||||
//}
|
||||
console.log("PLAYING VIDEO 729");
|
||||
session.watchStream(response[i]['streamID']); // How do I make sure they aren't requesting the same movie twice as a race condition?
|
||||
if (urlParams.has('streamid')){
|
||||
session.single=true;
|
||||
var streamlist = urlParams.get('streamid').split(",");
|
||||
console.log(streamlist);
|
||||
for (j in streamlist){
|
||||
if (response[i]['streamID'] == streamlist[j]){
|
||||
log("PLAYIGN!!!");
|
||||
session.watchStream(response[i]['streamID'])
|
||||
}
|
||||
}
|
||||
} else {
|
||||
session.watchStream(response[i]['streamID']); // How do I make sure they aren't requesting the same movie twice as a race condition?
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -883,6 +922,7 @@ function createRoom(){
|
||||
|
||||
var roomname = document.getElementById("videoname1").value;
|
||||
log(roomname);
|
||||
session.roomid = roomname;
|
||||
formSubmitting = false;
|
||||
|
||||
var m = document.getElementById("mainmenu");
|
||||
@ -892,14 +932,17 @@ function createRoom(){
|
||||
document.getElementById("head2").className = 'advanced';
|
||||
document.getElementById("head3").className = 'advanced';
|
||||
document.getElementById("head4").className = '';
|
||||
|
||||
document.getElementById("dirroomid").innerHTML = roomname;
|
||||
document.getElementById("roomid").innerHTML = roomname;
|
||||
|
||||
//document.getElementById("reshare").innerHTML = "https://obs.ninja/?room="+roomname;
|
||||
//document.getElementById("reshare").setAttribute("data-share","?room="+roomname);
|
||||
|
||||
//document.getElementById("mutebutton").className="float3";
|
||||
//document.getElementById("helpbutton").className="float2";
|
||||
session.director = true;
|
||||
joinRoom(roomname);
|
||||
document.getElementById("reshare").parentNode.removeChild(document.getElementById("reshare"));
|
||||
gridlayout.innerHTML = "<br /><font style='font-size:130%;color:white;'>Invite Link: Give this link to your guests --> <a data-share='' onclick='var range=document.createRange(); range.selectNodeContents(this); var selec = window.getSelection(); selec.removeAllRanges();selec.addRange(range);document.execCommand(\"copy\");' onmouseover='this.style.cursor=\"pointer\"'><font style='color:#54F'>https://"+location.hostname+location.pathname+"?roomid="+session.roomid+"</font></a><br /><br /></font><font style='color:white'><b>Scene 1</b> (auto-mix) for OBS: (experimental+optional) --> <a data-share='' onclick='var range=document.createRange(); range.selectNodeContents(this); var selec = window.getSelection(); selec.removeAllRanges();selec.addRange(range);document.execCommand(\"copy\");' onmouseover='this.style.cursor=\"pointer\"' id='reshare'><font style='color:#54F'><font style='color:#2F3'>https://"+location.hostname+location.pathname+"?scene=1&roomid="+session.roomid+"</font></a></font><br /><br />";
|
||||
joinRoom(roomname,300);
|
||||
|
||||
}
|
||||
|
||||
@ -1298,7 +1341,7 @@ function generateQRPage(ele){
|
||||
|
||||
|
||||
|
||||
if (urlParams.has('streamid')){
|
||||
if ((urlParams.has('streamid')) && (session.roomid==false)){
|
||||
document.getElementById("container-4").className = 'column columnfade';
|
||||
document.getElementById("container-3").className = 'column columnfade';
|
||||
document.getElementById("container-2").className = 'column columnfade';
|
||||
@ -1517,11 +1560,13 @@ function poker(){
|
||||
</script>
|
||||
<div class='credits'>Icons made by <a href="https://www.flaticon.com/authors/lucy-g" title="Lucy G">Lucy G</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a> and by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
|
||||
</div>
|
||||
<div style="margin:0;border:0;padding:0;width:100%;height:100%;" id="gridlayout"></div>
|
||||
<div id="controls_blank" style="display:none"><center>
|
||||
<button>Enable</button><button onclick="directMute(this.parentNode.parentNode);">Mute</button><button onclick="directVisibility(this.parentNode.parentNode);">Pause</button><input type="range" min="0" max="100" onclick="directVolume(this.parentNode.parentNode);"><br />
|
||||
<a href="https://obs.ninja/?streamid=xxxxx">https://obs.ninja/?streamid=xxxxx</a>
|
||||
</center></div>
|
||||
<div style="margin:0;border:0;padding:0;width:100%;height:100%;" id="gridlayout">
|
||||
</div>
|
||||
<div id="controls_blank" style="display:none"><center><br /><b>Remote Control for OBS</b><br />
|
||||
<button data-value="0" onclick="directEnable(this);">Add to Scene 1</button>
|
||||
<button onclick="directMute(this);">Mute</button>
|
||||
<br />Volume:<input type="range" min="1" max="100" value="100" onclick="directVolume(this);"><br />
|
||||
<br /><hr /></center></div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user