mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-15 07:38:32 +00:00
version 13.2
-bug fixes -camera settings added
This commit is contained in:
Steve Seguin
GitHub
parent
a6332b347a
commit
9d1e1d7f53
28
devices.html
Normal file
28
devices.html
Normal file
@ -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>
|
||||
@ -164,9 +164,9 @@ input[type='checkbox']:checked {
|
||||
*
|
||||
*/
|
||||
|
||||
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);
|
||||
|
||||
20
index.html
20
index.html
@ -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">
|
||||
@ -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;">
|
||||
@ -505,9 +505,12 @@
|
||||
<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 />
|
||||
@ -539,7 +542,7 @@
|
||||
<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">
|
||||
@ -622,7 +625,10 @@
|
||||
<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">
|
||||
@ -740,7 +746,7 @@
|
||||
<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.
|
||||
@ -804,7 +810,7 @@
|
||||
// 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
main.css
98
main.css
@ -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) {
|
||||
@ -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;
|
||||
@ -1150,6 +1245,7 @@ video.clean::-webkit-media-controls-timeline-container {
|
||||
#videoSource {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 100%;
|
||||
}
|
||||
.gone {
|
||||
position: absolute;
|
||||
|
||||
111
main.js
111
main.js
@ -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;
|
||||
@ -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){
|
||||
@ -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);
|
||||
@ -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
|
||||
@ -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
|
||||
|
||||
@ -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");
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user