Merge remote-tracking branch 'origin/master' into 13.5a

This commit is contained in:
STeve Seguin 2020-11-28 04:13:27 -05:00
commit 82a709cf6f
8 changed files with 478 additions and 59 deletions

62
devices.css Normal file
View File

@ -0,0 +1,62 @@
#devices {
max-width: 80%;
width: fit-content;
margin: 0 auto;
}
h1 {
font-size: 1.5em;
padding:10px;
background-color:#457b9d;
color:white;
}
.device {
display: flex;
flex-direction: column;
margin: 20px 0px;
font-size: 1rem;
}
.device-name{
font-weight: bold;
margin-bottom: 5px;
}
.device-id {
}
.card {
margin: 10px;
}
.card > div {
padding: 10px;
}
.notice {
background-color: orange;
margin: 10px;
padding: 20px 20px;
font-weight: bold;
font-size: 1.2em;
text-align: center;
}
.notice a {
color: #457b9d;
}
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (orientation: portrait) {
#devices {
width: 100%;
}
.device-id {
text-overflow: ellipsis;
overflow: hidden;
}
}

View File

@ -1,28 +1,94 @@
<html>
<head><meta charset="UTF-8"></head>
<head>
<link rel="stylesheet" href="./lineawesome/css/line-awesome.min.css" />
<link rel="stylesheet" href="./main.css?ver=11" />
<link rel="stylesheet" href="./devices.css?ver=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf8" />
</head>
<body>
<pre><code id="json-container"></code></pre>
<script>
<div id="header">
<a
id="logoname"
href="./"
style="text-decoration: none; color: white; margin: 2px"
>
<span data-translate="logo-header">
<font id="qos">O</font>BS.Ninja
</span>
</a>
</div>
<div id="devices">
<div class="notice">Device IDs are bound to a combination of domain and browser. <br/>If you want to use electron-capture, open this URL on the electron-capture app.</div>
<div class="notice">Check for browser and camera capabilities <a href="/supports">here</a>.</div>
<div class="card">
<h1>🎤 Audio Inputs</h1>
<div id="audioInputs"></div>
</div>
<div class="card">
<h1>📹 Video Inputs</h1>
<div id="videoInputs"></div>
</div>
<div class="card">
<h1>🔉 Audio Outputs</h1>
<div id="audioOutputs"></div>
</div>
</div>
var list = [];
<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>
function isAudioInput(value) {
return value.kind == "audioinput";
}
function isAudioOutput(value) {
return value.kind == "audiooutput";
}
function isVideoInput(value) {
return value.kind == "videoinput";
}
function prettyPrint(json, element) {
var output = "<div class='prettyJson two-col'>";
var nestedObjs;
Object.entries(json)
.sort()
.forEach(([key, value]) => {
output += "<div class='device'>";
output +=
"<span class='device-name'>" +
value.label +
"</span><span class='device-id'>Device ID: " +
value.deviceId +
"</span>";
output += "</div>";
});
output += "</div>";
document.getElementById(element).innerHTML = output;
}
navigator.mediaDevices
.enumerateDevices()
.then(function (devices) {
devices.forEach(function (device) {
console.log(
device.kind + ": " + device.label + " id = " + device.deviceId
);
list.push(device);
});
prettyPrint(devices.filter(isAudioInput), "audioInputs");
prettyPrint(devices.filter(isAudioOutput), "audioOutputs");
prettyPrint(devices.filter(isVideoInput), "videoInputs");
})
.catch(function (err) {
console.log(err.name + ": " + err.message);
});
</script>
</body>
</html>

View File

@ -139,7 +139,7 @@
<i style="float: right; bottom: 0px; cursor: pointer; position: fixed; right: 2px; color: #d9e4eb; padding: 2px; margin: 2px 2px 0 0; font-size: 140%;" class="las la-language" aria-hidden="true"></i>
</span>
<div id="mainmenu" class="row" style="opacity: 0; align: center;">
<div id="container-1" class="column columnfade pointer" style=" overflow-y: auto;">
<div id="container-1" class="column columnfade pointer card" style=" overflow-y: auto;">
<h2>
<span data-translate="add-group-chat">Add Group Chat to OBS</span>
</h2>
@ -197,7 +197,7 @@
</div>
</div>
</div>
<div id="container-3" class="column columnfade pointer" onclick="previewWebcam()" style=" overflow-y: auto;">
<div id="container-3" class="column columnfade pointer card" onclick="previewWebcam()" style=" overflow-y: auto;">
<h2 id="add_camera">
<span data-translate="add-your-camera">Add your Camera to OBS</span>
</h2>
@ -281,7 +281,7 @@
</div>
</div>
<div id="container-2" class="column columnfade pointer" style=" overflow-y: auto;">
<div id="container-2" class="column columnfade pointer card" style=" overflow-y: auto;">
<h2 id="add_screen">
<span data-translate="remote-screenshare-obs">Remote Screenshare into OBS</span>
</h2>
@ -354,7 +354,7 @@
</div>
</div>
</div>
<div id="container-4" class="column columnfade pointer" style=" overflow-y: auto;">
<div id="container-4" class="column columnfade pointer card" style=" overflow-y: auto;">
<h2>
<span data-translate="create-reusable-invite">Create Reusable Invite</span>
</h2>
@ -458,7 +458,7 @@
</div>
</div>
</div>
<div id="container-5" class="column columnfade pointer advanced" style=" overflow-y: auto;">
<div id="container-5" class="column columnfade pointer advanced card" style=" overflow-y: auto;">
<h2><span data-translate="share-local-video-file">Stream Media File</span></h2>
<div class="container-inner">

View File

@ -810,6 +810,11 @@ label {
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1);
background-color: #ddd;
}
/* Create four equal columns that floats next to each other */
.column {
@ -825,8 +830,6 @@ label {
text-align: center;
font-size: 100%;
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1);
background-color: #ddd;
transition: box-shadow 0.1s ease-in-out;
}

View File

@ -962,7 +962,12 @@ if (ln_template){ // checking if manual lanuage override enabled
//log(ele.dataset.translate);
//log(translations[ele.dataset.translate]);
if (ele.dataset.translate in data){
ele.innerHTML = data[ele.dataset.translate];
if (ele.dataset.translateType) {
ele.setAttribute(ele.dataset.translateType, data[ele.dataset.translate]);
} else {
ele.innerHTML = data[ele.dataset.translate];
}
}
});
getById("mainmenu").style.opacity = 1;
@ -1894,8 +1899,10 @@ if (urlParams.has('permaid') || urlParams.has('push')){
getById("add_camera").innerHTML = "Share your Microphone";
} else {
getById("add_camera").innerHTML = "Share your Camera";
getById("add_camera").dataset.translate = "share-your-camera";
}
getById("add_screen").innerHTML = "Share your Screen";
getById("add_screen").dataset.translate = "share-your-screen";
getById("passwordRoom").value = "";
getById("videoname1").value = "";
getById("dirroomid").innerHTML = "";

139
supports.css Normal file
View File

@ -0,0 +1,139 @@
#supports .card:nth-child(2){
margin-top: 40px;
}
#supports .card {
width: 80%;
margin: 0 auto;
display: block;
padding: 20px;
}
#supports .card h1 {
font-size: 1.5em;
margin-bottom: 1em;
}
.prettyJson {
display: grid;
row-gap: 0;
column-gap: 10%;
}
.prettyJson.two-col {
grid-template-columns: 1fr 1fr;
}
.prettyJson.three-col {
grid-template-columns: 1fr 1fr 1fr;
}
.prettyJson.four-col {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (orientation: portrait) {
#supports .card {
width: 100%;
}
.prettyJson.two-col,
.prettyJson.three-col {
grid-template-columns: 1fr;
}
.subproperty {
font-size: 2rem;
}
}
.prettyJson .property {
display: grid;
grid-template-columns: 2fr 1fr;
border-bottom: 1px solid rgb(202, 202, 202);
padding: 1px;
}
.prettyJson > .property > span:nth-child(1) {
background: #f3f3f3;
padding: 5px;
}
.prettyJson > .property > span:nth-child(2) {
background: #d0d0d0;
padding: 5px;
white-space: pre-wrap;
overflow: hidden;
text-overflow: ellipsis;
}
.prettyJson .property.ok > span{
background: #40916c;
font-weight: bold;
color:white;
}
.supportedOption {
background: #f3f3f3;
margin: 5px;
border: 1px solid #457b9d;
}
.supportedOption > span:nth-child(1) {
font-weight: bold;
font-size: 1.3em;
background: #457b9d;
display: block;
padding: 5px;
color: white;
}
.supportedOption > span:nth-child(2) {
display: block;
overflow: hidden;
text-overflow: ellipsis;
padding: 5px;
}
.subproperty {
display: flex;
padding: 10px;
}
.subproperty:nth-child(even) {
background: gainsboro;
}
.subproperty span:nth-child(1) {
flex: 1;
}
.subproperty span:nth-child(2) {
flex: 2;
}
div#longCameraSupportedStrings {
background: #f3f3f3;
border: 1px solid #457b9d;
margin: 5px;
}
#longCameraSupportedStrings > span{
display: block;
padding: 10px;
}
#longCameraSupportedStrings > span:nth-child(1) {
/* padding: 0px; */
background: #457b9d;
/* margin: 0; */
font-weight: bold;
color: white;
}

View File

@ -1,28 +1,159 @@
<html>
<body>
<pre id="json"><pre>
<head>
<link rel="stylesheet" href="./lineawesome/css/line-awesome.min.css" />
<link rel="stylesheet" href="./main.css?ver=11" />
<link rel="stylesheet" href="./supports.css?ver=1" />
<meta charset="utf8" />
</head>
<body id="supports">
<div id="header">
<a
id="logoname"
href="./"
style="text-decoration: none; color: white; margin: 2px"
>
<span data-translate="logo-header"> <font id="qos">O</font>BS.Ninja </span>
</a>
</div>
<div class="card">
<h1 id="browserSupportedOptionsTitle">💻 Browser supported options</h1>
<p style="margin-bottom: 20px">
List of options your browser reports as supported. If an option lights up
green, your currently selected camera reports that it supports that option.
</p>
<div id="browserSupportedOptions"></div>
</div>
<div class="card">
<h1>Device to check</h1>
<select id="cameraSelector" onchange="changeCamera()"></select>
</div>
<div class="card">
<h1 id="cameraSupportedOptionsTitle">📹 Camera supported options</h1>
<div id="cameraSupportedOptions"></div>
</div>
<div class="card">
<h1>📹 Camera settings</h1>
<div id="cameraSettings"></div>
</div>
<script>
var supports = navigator.mediaDevices.getSupportedConstraints();
document.getElementById("json").innerHTML = "BROWSER SUPPORTED OPTIONS<HR>";
document.getElementById("json").innerHTML += JSON.stringify(supports, undefined, 2);
navigator.mediaDevices.getUserMedia({video: { facingMode: { ideal: "environment" }}, audio:false}).then(function(mediaStream){
console.log("worked");
setTimeout(function(){
mediaStream.getVideoTracks().forEach((track)=>{
const capabilities = track.getCapabilities();
const settings = track.getSettings();
document.getElementById("json").innerHTML += "<HR>CAMERA SUPPORTED<HR>";
document.getElementById("json").innerHTML += JSON.stringify(capabilities, undefined, 2);
document.getElementById("json").innerHTML += "<HR>CAMERA SETTINGS <HR>";
document.getElementById("json").innerHTML += JSON.stringify(settings, undefined, 2);
<script>
function prettyPrintJsonToId(json, element) {
var output = "<div class='prettyJson three-col'>";
Object.entries(json)
.sort()
.forEach(([key, value]) => {
if (value == true) {
value = "<i class='las la-check'></i>";
}
if (value == false) {
value = "<i class='las la-times'></i>";
}
output += "<div class='property' id=" + key + ">";
output += "<span>" + key + "</span><span>" + value + "</span>";
output += "</div>";
});
output += "</div>";
document.getElementById(element).innerHTML = output;
}
function prettyPrintSupportedOptions(json, element) {
long_ass_strings = [json.deviceId, json.groupId];
var output = "<div class='prettyJson two-col'>";
var nestedObjs;
delete json.deviceId;
delete json.groupId;
Object.entries(json)
.sort()
.forEach(([key, value]) => {
output += "<div class='supportedOption'>";
nestedObjs = "";
if (typeof value === "object" && value !== null) {
Object.entries(value)
.sort()
.forEach(([key, value]) => {
nestedObjs +=
"<div class='subproperty'><span>" +
key +
"</span><span>" +
value +
"</span></div>";
});
output += "<span>" + key + "</span><span>" + nestedObjs + "</span>";
} else {
output += "<span>" + key + "</span><span>" + value + "</span>";
}
output += "</div>";
});
output += "</div>";
output += "<div id='longCameraSupportedStrings'><span>IDs</span>";
output += "<span>deviceId: " + long_ass_strings[0] + "</span>";
output += "<span>groupId: " + long_ass_strings[1] + "</span></div>";
document.getElementById(element).innerHTML = output;
}
function changeCamera() {
var deviceId = document.getElementById("cameraSelector").value;
getCameraDetails(deviceId);
}
function getCameraDetails(deviceId) {
navigator.mediaDevices
.getUserMedia({
video: {
deviceId: deviceId,
},
audio: false,
})
.then(function (mediaStream) {
console.log("worked");
setTimeout(function () {
mediaStream.getVideoTracks().forEach((track) => {
const capabilities = track.getCapabilities();
const settings = track.getSettings();
prettyPrintSupportedOptions(capabilities, "cameraSupportedOptions");
document
.querySelectorAll(".property")
.forEach((el) => el.classList.remove("ok"));
Object.entries(capabilities)
.sort()
.forEach(([key, value]) => {
document.getElementById(key).classList.add("ok");
});
prettyPrintJsonToId(settings, "cameraSettings");
});
}, 1000);
});
}
var supports = navigator.mediaDevices.getSupportedConstraints();
prettyPrintJsonToId(supports, "browserSupportedOptions");
document.getElementById("browserSupportedOptionsTitle").innerText +=
" (" + Object.keys(supports).length + ")";
navigator.mediaDevices
.enumerateDevices()
.then(function (devices) {
setTimeout(function () {
console.log("Listing devices");
devices.forEach(function (device) {
if (device.kind == "videoinput") {
var element = document.createElement("option");
element.setAttribute("value", device.deviceId);
element.innerText = device.label;
document.getElementById("cameraSelector").appendChild(element);
console.log(device);
}
});
getCameraDetails(devices[0]);
}, 1000);
})
.catch(function (err) {
console.log(err.name + ": " + err.message);
});
},1000);
});
</script>
</body>
</html>
</script>
</body>
</html>

View File

@ -62,6 +62,17 @@
"this-is-obs-browser-souce-link-auto": "Também é um link para Fonte Browser do OBS. Todos os vídeos desta sala serão automaticamente adicionados.",
"click-for-quick-room-overview": "❔ Clique aqui para uma pequena apresentação e ajuda",
"push-to-talk-enable": "🔊 Ativar Push-to-talk do diretor",
"welcome-to-control-room": "Bem-vindo. Esta é a sala de controlo para o chat de grupo. Há diferentes coisas que pode fazer aqui:<br><br>\t<li>Pode hospedar um chat de grupo com amigos. Partilhe o link azul para os convidados se juntarem ao chat de forma automática.</li>\t<li>Uma sala de grupo pode hospedar entre 4 a 30 4 to 30 convidados, dependendo de inúmeros factores, incluindo CPU e largura de banda de todos os convidados na sala.</li>\t<li>Visualizações individuais de cada vídeo serão mostradas quando carregam. Estas podem ser usadas em Fontes do tipo Browser no OBS.</li>\t<li>Pode usar a cena de grupo automática, o link verde, para dispôr automaticamente os vídeos por si no OBS.</li>\t<li>Pode usar esta sala de controlo para gravar streams isolados de vídeo ou áudio, mas isto é ainda experimental.</li>\t<li>Vídeos na sala de controle são de baixa qualidade propositadamente; para poupar largura de banda/CPU</li>\t<li>Convidados na sala irão ver-se numa qualidade muito reduzida para conservar largura de banda/CPU.</li>\t<li>OBS tem acesso ao vídeo do convidado em alta qualidade; o bitrate de vídeo por omissão é 2500kbps.</li>\t<br>\tÀ medida que os convidados entram, os seus vídeos são mostrados abaixo. Pode levar os seus sinais para o OBS como cenas individuais ou pode adicioná-los à cena de grupo.\t<br>A Cena de grupo auto-mistura vídeos que lhe forem adicionados. Note que a auto-mistura requer que os convidados sejam manualmente adicionados; não são adicionados automaticamente.<br><br>Dispositivos móveis Apple, como iPhones e iPads, não suportam totalmente o Chat de Grupo. Este é um constrangimento de hardware.<br><br>\tPara opções avançadas e parâmetros, <a href=\"https://github.com/steveseguin/obsninja/wiki/Guides-and-How-to's#urlparameters\">veja o Wiki.</a>", "guest-will-appaer-here-on-join": "(Aparece aqui o vídeo quando um convidado entrar)",
"SOLO-LINK": "Link individual para OBS:"
"welcome-to-control-room": "Bem-vindo. Esta é a sala de controlo para o chat de grupo. Há diferentes coisas que pode fazer aqui:<br><br>\t<li>Pode hospedar um chat de grupo com amigos. Partilhe o link azul para os convidados se juntarem ao chat de forma automática.</li>\t<li>Uma sala de grupo pode hospedar entre 4 a 30 4 to 30 convidados, dependendo de inúmeros factores, incluindo CPU e largura de banda de todos os convidados na sala.</li>\t<li>Visualizações individuais de cada vídeo serão mostradas quando carregam. Estas podem ser usadas em Fontes do tipo Browser no OBS.</li>\t<li>Pode usar a cena de grupo automática, o link verde, para dispôr automaticamente os vídeos por si no OBS.</li>\t<li>Pode usar esta sala de controlo para gravar streams isolados de vídeo ou áudio, mas isto é ainda experimental.</li>\t<li>Vídeos na sala de controle são de baixa qualidade propositadamente; para poupar largura de banda/CPU</li>\t<li>Convidados na sala irão ver-se numa qualidade muito reduzida para conservar largura de banda/CPU.</li>\t<li>OBS tem acesso ao vídeo do convidado em alta qualidade; o bitrate de vídeo por omissão é 2500kbps.</li>\t<br>\tÀ medida que os convidados entram, os seus vídeos são mostrados abaixo. Pode levar os seus sinais para o OBS como cenas individuais ou pode adicioná-los à cena de grupo.\t<br>A Cena de grupo auto-mistura vídeos que lhe forem adicionados. Note que a auto-mistura requer que os convidados sejam manualmente adicionados; não são adicionados automaticamente.<br><br>Dispositivos móveis Apple, como iPhones e iPads, não suportam totalmente o Chat de Grupo. Este é um constrangimento de hardware.<br><br>\tPara opções avançadas e parâmetros, <a href=\"https://github.com/steveseguin/obsninja/wiki/Guides-and-How-to's#urlparameters\">veja o Wiki.</a>",
"guest-will-appaer-here-on-join": "(Aparece aqui o vídeo quando um convidado entrar)",
"SOLO-LINK": "Link individual para OBS:",
"hide-mic-selection": "Forçar microfone definido por omissão",
"share-local-video-file": "Fazer Stream de ficheiro de media",
"add-to-scene": "Adicionar à Cena",
"forward-to-room": "Transferir",
"disconnect-guest": "Desligar",
"change-to-low-quality": "&nbsp;&nbsp;<i class=\"las la-video-slash\"></i>",
"change-to-medium-quality": "&nbsp;&nbsp;<i class=\"las la-video\"></i>",
"change-to-high-quality": "&nbsp;&nbsp;<i class=\"las la-binoculars\"></i>",
"send-direct-chat": "<i class=\"las la-envelope\"></i> Enviar mensagem",
"more-than-four-can-join": "Estes quatro convidados são apenas ilustrativos. Podem juntar-se mais de quatro convidados numa sala."
}