Skip to content

Commit

Permalink
version 13.2
Browse files Browse the repository at this point in the history 
-bug fixes
-camera settings added
  • Loading branch information
@steveseguin
steveseguin authored Nov 9, 2020
1 parent a6332b3 commit 9d1e1d7
Show file tree
Hide file tree
Showing 6 changed files with 247 additions and 18 deletions.
28 changes: 28 additions & 0 deletions devices.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<html>
<head><meta charset="UTF-8"></head>
<body>
<pre><code id="json-container"></code></pre>
<script>



var list = [];


navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
devices.forEach(function(device) {
console.log(device.kind + ": " + device.label +
" id = " + device.deviceId);
list.push(device);
});
document.getElementById('json-container').innerHTML = JSON.stringify(list, null, 2);
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
});


</script>
</body>
</html>
6 changes: 3 additions & 3 deletions electron.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,9 +164,9 @@
*
*/

if (navigator.userAgent.indexOf('Mac OS X') != -1){
document.getElementById("warning4mac").style.display="block";
}
//if (navigator.userAgent.indexOf('Mac OS X') != -1){
// document.getElementById("warning4mac").style.display="block";
//}

var audioOutputSelect = document.querySelector('select#audioOutput');
audioOutputSelect.disabled = !('sinkId' in HTMLMediaElement.prototype);
Expand Down
20 changes: 13 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
<script type="text/javascript" crossorigin="anonymous" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/qrcode.min.js"></script>
<script type="text/javascript" src="./thirdparty/jquery.min.js"></script>
<link rel="stylesheet" href="./main.css?ver=18" />
<link rel="stylesheet" href="./main.css?ver=22" />
</head>
<body id="main" class="hidden">
<span itemprop="image" itemscope itemtype="image/png">
Expand All @@ -63,7 +63,7 @@
<link itemprop="url" href="./images/obsNinja_logo_full.png" />
</span>
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/CodecsHandler.js?ver=22"></script>
<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=110"></script>
<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=111"></script>
<input id="zoomSlider" type="range" style="display: none;" />
<div id="header">
<a id="logoname" href="./" style="text-decoration: none; color: white; margin: 2px;">
Expand Down Expand Up @@ -505,9 +505,12 @@ <h2>What is OBS.Ninja</h2>
<li>
iOS devices may have occasional audio issues, such as no sound. Fully close Safari and reopen it if nothing else seems to work.
</li>
<li>
The VP9 codec on Chromium-based browsers seems to lag when screen-sharing at the moment. Use the OBS Virtual Camera as a capture source instead.
</li>
<br />

🎈 Site Updated: <a href="https://www.reddit.com/r/OBSNinja/comments/jik5fk/version_13_released_change_log/">November 2nd, 2020</a>. The previous version can be found at
🎈 Site Updated: <a href="https://www.reddit.com/r/OBSNinja/comments/jik5fk/version_13_released_change_log/">November 9th, 2020</a>. The previous version can be found at
<a href="https://obs.ninja/v12/">https://obs.ninja/v12/</a> if you are having new issues.

<br />
Expand Down Expand Up @@ -539,7 +542,7 @@ <h3>
<a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
</div>
</div>
<span id="electronDragZone" style="pointer-events: none; z-index:-10; position:absolute;top:0;left:0;width:100%;height:20%;-webkit-app-region: drag;"></span>
<span id="electronDragZone" style="pointer-events: none; z-index:-10; position:absolute;top:0;left:0;width:100%;height:5%;-webkit-app-region: drag;"></span>
<div id="gridlayout" ></div>
<div id="controls_blank" style="display: none;">
<div class="controlsGrid">
Expand Down Expand Up @@ -622,7 +625,10 @@ <h3>
<select id="outputSource3" ></select>
</span>
<button id="shareScreenGear" style="padding:20px;text-align:center;" onclick="grabScreen()"><b>Share Screen</b><br /><i style="padding:5px; font-size:300%;" class="las la-desktop"></i></button><br />
<button onclick="toggleSettings()" style="background-color:#EFEFEF;padding:10px 12px 12px 2px;"><i class="chevron right" style="font-size:150%;top:3px;position:relative;"></i> <b>Close Settings</b></button>
<button onclick="toggleSettings()" style="background-color:#EFEFEF;padding:10px 12px 12px 2px;margin: 10px 0px 20px 0"><i class="chevron right" style="font-size:150%;top:3px;position:relative;"></i> <b>Close Settings</b></button>
<span id="popupSelector_constraints" style="display: block;">

</span>
</p>
</div>
<nav id="context-menu" class="context-menu">
Expand Down Expand Up @@ -740,7 +746,7 @@ <h4 style='color:#CCC;margin:20px 20px 0 20px;' data-translate='more-than-four-c
<script>

var session = WebRTC.Media; // session is a required global variable if configuring manually. Run before loading main.js but after webrtc.js.
session.version = "13.1";
session.version = "13.2";
session.streamID = session.generateStreamID(); // randomly generates a streamID for this session. You can set your own programmatically if needed

session.defaultPassword = "someEncryptionKey123"; // Disabling improves compatibility and is helpful for debugging.
Expand Down Expand Up @@ -804,7 +810,7 @@ <h4 style='color:#CCC;margin:20px 20px 0 20px;' data-translate='more-than-four-c
// If you wish to change branding, blank offers a good clean start.
<script type="text/javascript" id="main-js" src="./main.js" data-translation="blank"></script>
-->
<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=79"></script>
<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=80"></script>
<script type="text/javascript" crossorigin="anonymous" src="./animations.js?ver=13"></script>
</body>
</html>
98 changes: 97 additions & 1 deletion main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -471,6 +471,94 @@ body {
top: 20px;
cursor: pointer;
display: none;
-webkit-app-region: no-drag;
}

/*https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/*/
input[type=range] {
-webkit-appearance: none;
margin: 18px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #367ebd;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}

@media only screen and (max-height: 650px) {
Expand Down Expand Up @@ -579,8 +667,15 @@ body {
}
}


#popupSelector_constraints label{
color:white;
text-shadow: 0px 0px 6px #000000FF;
font-weight: 700;
}

#popupSelector {
background: linear-gradient(6deg, rgba(221, 221, 221, 0) 4%, rgb(221, 221, 221) 30%, rgba(120, 120, 100, .5) 100%);
background: linear-gradient(6deg, rgba(221, 221, 221, 0) 4%, rgb(221, 221, 221, 0.2) 30%, rgba(120, 120, 100, .5) 100%);
transition: all 0.2s linear 0s;
padding: 20px 20px 0px 20px;
position: fixed;
Expand Down Expand Up @@ -1150,6 +1245,7 @@ video.clean::-webkit-media-controls-timeline-container {
#videoSource {
display: inline-block;
vertical-align: middle;
font-size: 100%;
}
.gone {
position: absolute;
Expand Down
111 changes: 105 additions & 6 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -491,17 +491,23 @@ if (urlParams.has('stereo') || urlParams.has('s') || urlParams.has('proaudio')){
session.stereo = 0;
} else if (session.stereo==="1"){
session.stereo = 1;
} else if (session.stereo==="both"){
session.stereo = 1;
} else if (session.stereo==="3"){
session.stereo = 3;
} else if (session.stereo==="out"){
session.stereo = 3;
} else if (session.stereo==="4"){
session.stereo = 4;
} else if (session.stereo==="2"){ // this is for GUESTS to use in a room so they don't send out Stereo themsevles. shoudl still pull 256kbps
} else if (session.stereo==="2"){
session.stereo = 2;
} else if (session.stereo==="in"){
session.stereo = 2;
} else {
session.stereo = 1;
session.stereo = 5; // guests; no stereo in, no high bitrate in, but otherwise like stereo=1
}
}
if ((session.stereo==1) || (session.stereo==3) || (session.stereo==4)){
if ((session.stereo==1) || (session.stereo==3) || (session.stereo==4) || (session.stereo==5)){
session.echoCancellation = false;
session.autoGainControl = false;
session.noiseSuppression = false;
Expand Down Expand Up @@ -2057,6 +2063,8 @@ function toggleSettings(){ // TODO: I need to have this be MUTE, toggle, with vo

if (getById("popupSelector").style.display=="none"){

updateConstraintSliders();

setTimeout(function(){document.addEventListener("click", toggleSettings);},10);

getById("popupSelector").addEventListener("click",function(e){
Expand Down Expand Up @@ -2397,8 +2405,8 @@ function publishWebcam(btn = false){
window.addEventListener("resize", updateMixer);
window.addEventListener("orientationchange", function(){setTimeout(updateMixer, 200);});
getById("main").style.overflow = "hidden";
session.cbr=0; // we're just going to override it
if (session.stereo==1){
//session.cbr=0; // we're just going to override it
if (session.stereo==5){
session.stereo=3;
}
joinRoom(session.roomid);
Expand Down Expand Up @@ -4034,6 +4042,9 @@ async function grabVideo(quality=0, eleName='previewWebcam', selector="select#vi
if (videoSelect.options[videoSelect.selectedIndex].text.startsWith("OBS-Camera")){ // OBS Virtualcam
mirror=true;
obscam = true;
} else if (videoSelect.options[videoSelect.selectedIndex].text.startsWith("OBS Virtual Camera")){ // OBS Virtualcam
mirror=true;
obscam = true;
} else if (videoSelect.options[videoSelect.selectedIndex].text.includes(" back")){ // Android
mirror=true;
} else if (videoSelect.options[videoSelect.selectedIndex].text.includes(" rear")){ // Android
Expand Down Expand Up @@ -4123,10 +4134,15 @@ async function grabVideo(quality=0, eleName='previewWebcam', selector="select#vi
getById(eleName).controls=true;
}
}
if (getById("popupSelector_constraints")){
getById("popupSelector_constraints").innerHTML = "";
}
grabVideoTimer = setTimeout(function(){
if (eleName=="previewWebcam"){
getById(eleName).controls=true;
}
updateConstraintSliders();

dragElement(getById(eleName));
},1000); // focus

Expand Down Expand Up @@ -4480,7 +4496,90 @@ function dragElement(elmnt) {
document.ontouchmove = null;
}
}




function updateConstraintSliders(){
getById("popupSelector_constraints").innerHTML = "";

try {
var track0 = session.streamSrc.getVideoTracks();
track0 = track0[0];
if (track0.getCapabilities){
session.cameraConstaints = track0.getCapabilities();
}

log(session.cameraConstaints);
} catch(e){
errorlog(e);
return;
}

try {
var currentCameraConstaints={};
if (track0.getSettings){
currentCameraConstaints = track0.getSettings();
}
} catch(e){
errorlog(e);
}

for (var i in session.cameraConstaints){
try {
if ((typeof session.cameraConstaints[i] ==='object') && (session.cameraConstaints[i] !== null) && ("max" in session.cameraConstaints[i]) && ("min" in session.cameraConstaints[i])){
log(i);
log(session.cameraConstaints[i]);

if (i==="aspectRatio"){continue;}
else if (i==="width"){continue;}
else if (i==="height"){continue;}
else if (i==="frameRate"){continue;}

var label = document.createElement("label");
label.id= "label_"+i;
label.htmlFor = "constraints_"+i;
label.innerHTML = i+":";

var input = document.createElement("input");
input.min = session.cameraConstaints[i].min;
input.max = session.cameraConstaints[i].max;

if (i in currentCameraConstaints){
input.value = currentCameraConstaints[i];
label.innerHTML = i+": "+currentCameraConstaints[i];
} else {
label.innerHTML = i;
}
if ("step" in session.cameraConstaints[i]){
input.step = session.cameraConstaints[i].step;
}
input.type = "range";
input.dataset.keyname = i;
input.id = "constraints_"+i;
input.style="display:block; width:95%;";
input.name = "constraints_"+i;


input.onchange = function(e){
getById("label_"+e.target.dataset.keyname).innerHTML =e.target.dataset.keyname+": "+e.target.value;
updateCameraConstraints(e.target.dataset.keyname, e.target.value);
};



getById("popupSelector_constraints").appendChild(label);
getById("popupSelector_constraints").appendChild(input);
}
} catch(e){errorlog(e);}

}
}

function updateCameraConstraints(constraint, value=null){
var track0 = session.streamSrc.getVideoTracks();
track0 = track0[0];
track0.applyConstraints({advanced: [ {[constraint]: value} ]});
}

function setupWebcamSelection(stream=null){
log("setup webcam");
Expand Down
Loading

0 comments on commit 9d1e1d7

Please sign in to comment.