Anyone can enter a room if they know the name, so keep it unique
Having more than four (4) people in a room is not advisable due to performance reasons.
-
There are numerous known issues. Please report feedback.
With a room name entered, enter the room as a director. Links to invite guests will be provided.
@@ -109,8 +107,9 @@
note: Do not forget to click "Share audio" in Chrome. (Firefox does not support audio sharing.)
-
-
+
+
+
@@ -123,11 +122,11 @@
Generate Invite Link
- Invite Links are reusable, but only one invite link can be used at a time.
-
+ Invite Links are reusable, but each invited media source needs a unique invite link.
+
-
+
@@ -154,7 +153,7 @@
MacOS users need to use OBS v23 or resort to Window Capturing a Chrome Browser with OBS v25
- Site last updated: April 19th, 2020. The previous version can be found at https://obs.ninja/old/ if you are having new issues
+ Site last updated: April 21th, 2020. The previous version can be found at https://obs.ninja/old/ if you are having new issues
Check out the sub-reddit for help and advanced info. I'm also on Discord and you can email me at steve@seguin.email
+
+
diff --git a/main.css b/main.css
index 73016ad..d439cc4 100644
--- a/main.css
+++ b/main.css
@@ -160,7 +160,7 @@ body {
@media screen and (min-width: 1000px) {
- body {
+ .cat {
background-image: url(cat.svg);
background-repeat: no-repeat;
background-size: auto 50%;
diff --git a/main.js b/main.js
index 9407055..14f135c 100644
--- a/main.js
+++ b/main.js
@@ -248,13 +248,13 @@ function directEnable(ele){ // A directing room only is controlled by the Direct
if (ele.parentNode.parentNode.dataset.enable==1){
ele.parentNode.parentNode.dataset.enable = 0;
ele.className = "";
- ele.innerHTML = "Add to Scene 1";
+ ele.innerHTML = "Add to Group Scene";
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";
+ ele.innerHTML = "Remove from Group Scene";
}
var msg = {};
msg.request = "sendroom";
@@ -412,22 +412,14 @@ function joinRoom(roomname, maxbitrate=false){
if ("UUID" in response[i]){
if ("streamID" in response[i]){
if (response[i]['UUID'] in session.pcs){
- console.log("RTC already connected"); /// lets just say instead of Stream, we have
+ log("RTC already connected"); /// lets just say instead of Stream, we have
} else {
//var title = ""; // TODO: Assign labels
//if ("title" in response[i]){
// title = response[i]["title"];
//}
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'])
- }
- }
+ play(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?
}
@@ -481,18 +473,18 @@ function createRoom(){
session.director = true;
document.getElementById("reshare").parentNode.removeChild(document.getElementById("reshare"));
- gridlayout.innerHTML = " Group Chat Invite Link: Give this link to your guests --> https://"+location.hostname+location.pathname+"?roomid="+session.roomid+"\
- ";
+ gridlayout.innerHTML = "
\
- From here, using the OBS PULL links provided below each video that appears, you can create individual video elements within OBS. \
- You can also use the following Scene 1 link to crete a single element in OBS that comprises all the video elements and automixes them for you\
-
";
-
- gridlayout.innerHTML += "Optional Scene 1 link for OBS. This will auto-mix for you, if you prefer that instead.https://"+location.hostname+location.pathname+"?scene=1&roomid="+session.roomid+" ";
+ As guests join, their videos will appear below. You can bring their video streams into OBS manually as solo-scenes or you can add them to the Group Scene. The Group Scene auto-mixes together videos you have added to the group-scene; just add the Group Scene link to OBS in that case.\
+ ";
joinRoom(roomname,100);
@@ -842,9 +834,8 @@ function previewWebcam(){
});
}
- var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
-
- if (iOS){
+
+
navigator.mediaDevices.getUserMedia({audio:true, video:true }).then(function(stream){ // Apple needs thi to happen before I can access EnumerateDevices.
//document.getElementById('previewWebcam').srcObject=stream;
stream.getTracks().forEach(function(track) { // We don't want to keep it without audio; so we are going to try to add audio now.
@@ -855,9 +846,7 @@ function previewWebcam(){
errorlog("trying to list webcam again");
setupWebcamSelection();
});
- } else {
- setupWebcamSelection();
- }
+
},0);
}
@@ -889,9 +878,19 @@ function checkOBS(){
});
}
-function play(streamName){
+function play(streamid=null){ // play whatever is in the URL params; or filter by a streamID option
log("play stream");
- session.watchStream(streamName);
+ if (urlParams.has('streamid')){
+ var streamlist = urlParams.get('streamid').split(",");
+ log(streamlist);
+ for (j in streamlist){
+ if (streamid===null){
+ session.watchStream(streamlist[j]);
+ } else if (streamid === streamlist[j]){
+ session.watchStream(streamlist[j]);
+ }
+ }
+ }
}
var retry=null;
function browse(){
@@ -906,9 +905,13 @@ function browse(){
function generateQRPage(ele){
try{
+ var title = encodeURI(document.getElementById("videoname4").value);
+ if (title.length){
+ title = "&label="+title;
+ }
var sid = session.generateStreamID();
- ele.parentNode.innerHTML = '
In OBS v25 you can drag this link directly into OBS, or you can create a Browse element in OBS and insert it the URL source. \
+ ele.parentNode.innerHTML = '
In OBS v25 you can drag this link directly into OBS, or you can create a Browse element in OBS and insert it the URL source. \
\
Please also note, the invite link and OBS ingestion link created is reusable, but only one person may use a specific invite at a time.';
var qrcode = new QRCode(document.getElementById("qrcode"), {
@@ -926,6 +929,11 @@ function generateQRPage(ele){
}
+if (urlParams.has('streamid')){
+ document.getElementById("main").className = "";
+ document.getElementById("credits").style.display = 'none';
+}
+
if ((urlParams.has('streamid')) && (session.roomid==false)){
document.getElementById("container-4").className = 'column columnfade';
@@ -945,12 +953,13 @@ if ((urlParams.has('streamid')) && (session.roomid==false)){
document.getElementById("mainmenu").style.backgroundPosition = "bottom center";
document.getElementById("mainmenu").style.minHeight = "300px";
document.getElementById("mainmenu").style.backgroundSize = "100px 100px";
- document.getElementById("mainmenu").innerHTML = '
Attempting to load video stream.
';
-
+ document.getElementById("mainmenu").innerHTML = '';
+
setTimeout(function(){
try{
if (urlParams.get("streamid")){
if (document.getElementById("mainmenu")){
+ document.getElementById("mainmenu").innerHTML = '
Attempting to load video stream.
';
document.getElementById("mainmenu").innerHTML += 'If the stream does not load within a few seconds, the stream may not be available or some other error has occured. If the issue persists, please check out the https://reddit.com/r/obsninja for possible solutions or contact steve@seguin.email.
';
@@ -964,7 +973,7 @@ if ((urlParams.has('streamid')) && (session.roomid==false)){
qrcode.makeCode('https://' + location.hostname + location.pathname + '?permaid=' + urlParams.get("streamid"));
retry = setInterval(function(){
if (document.getElementById("mainmenu")){
- play(urlParams.get('streamid'));
+ play();
} else {
clearInterval(retry);
}
@@ -980,12 +989,12 @@ if ((urlParams.has('streamid')) && (session.roomid==false)){
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1){
alert("Safari requires us to ask for an audio permission to use peer-to-peer technology. You will need to accept it in a moment if asked to view this live video");
navigator.mediaDevices.getUserMedia({audio: true}).then(function(){
- play(urlParams.get('streamid'));
+ play();
}).catch(function(){
- play(urlParams.get('streamid'));
+ play();
});
} else {
- play(urlParams.get('streamid'));
+ play();
//document.getElementById("mainmenu").style.display="none";
}
}
@@ -1069,9 +1078,16 @@ function updateMixer(){
document.addEventListener("dragstart", e => {
var url = e.target.href || e.target.data;
if (!url || !url.startsWith('http')) return;
- var streamId = url.split('=')[1];
+
+ var streamId = url.split('streamid=');
+ var label = url.split('label=');
+
+
url += '&layer-name=OBS.Ninja';
- if (streamId) url += ': ' + streamId;
+ if (streamId.length>1) url += ': ' + streamId[1].split('&')[0];
+
+ if (label.length>1) url += ' - ' + decodeURI(label[1].split('&')[0]);
+
try{
var video = document.getElementById('videosource');
url += '&layer-width=' + video.videoWidth; // this isn't always 100% correct, as the resolution can fluxuate, but it is probably good enough
