elias/vdo.ninja
1
0
Fork 0
mirror of https://github.com/eliasstepanik/vdo.ninja.git synced 2026-01-11 13:48:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add files via upload

Browse Source 
speedtest stats fix
title bar updates
stats menu UI updates
electron app tweaked
etc
This commit is contained in:
Steve Seguin 2020-09-07 06:20:18 -04:00 committed by GitHub
parent 7e839a0a5b
commit 472a83870a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 65 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
electron.html
View File

@ -138,11 +138,13 @@ function updateOutputTarget(e){
document.getElementById('changeText').value = url;
}
function getPermssions(e){
function getPermssions(e=null){
if (listed==true){
return;
}
e.currentTarget.blur();
if (e!==null){
e.currentTarget.blur();
}
navigator.mediaDevices.getUserMedia({audio: true,video: false}).then((stream)=>{
navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(console.error); // list all devices
stream.getTracks().forEach(track => {
@ -301,9 +303,10 @@ function modURL(ele=false){
return url;
}
function gohere(){
var url = modURL(true);
window.location = url;
};
var url = modURL(true);
window.location = url;
};
getPermssions();
</script>
</body>
</html>

10
index.html
View File

@ -115,7 +115,7 @@
<div id="mutevideobutton" title="Disable the Camera" onclick="toggleVideoMute()" class="advanced float" style="cursor: pointer;" alt="Toggle the camera">
<i id="mutevideotoggle" class="toggleSize las la-eye my-float"></i>
</div>
<div id="settingsbutton" title="Settings" onclick="toggleSettings(this)" class="advanced float" style="cursor: pointer;" alt="Toggle the Settings Menu">
<div id="settingsbutton" title="Settings" onclick="toggleSettings()" class="advanced float" style="cursor: pointer;" alt="Toggle the Settings Menu">
<i id="settingstoggle" class="toggleSize las la-cog my-float"></i>
</div>
<div id="hangupbutton" title="Hangup the Call" onclick="hangup()" class="advanced float" style="cursor: pointer;" alt="Disconnect and End">
@ -237,7 +237,7 @@
</center>
<div id="audioMenu" class="form-group multiselect" alt="tip: Hold CTRL (command) to select Multiple" title="tip: Hold CTRL (command) to select Multiple">
<a id="multiselect-trigger" class="form-control multiselect-trigger" tabindex="3">
<div id="audioTitle" class="title">
<div class="audioTitle">
<i class="las la-microphone-alt"></i><span data-translate="select-audio-source"> Audio Source(s) </span>
<i id='chevarrow1' class="chevron bottom" aria-hidden="true"></i>
<div class="meter" id="meter1"></div>
@ -254,7 +254,7 @@
</div>
<br />
<span id="headphonesDiv" style="text-align:left; margin:17px 0; max-width: 550px; min-width: 420px; background-color: #f3f3f3; display: none; padding: 10px 10px; border: 1px solid #ccc; vertical-align: middle;">
<div id="audioTitle2" class="title">
<div class="audioTitle2">
<i class="las la-headphones"></i><span data-translate="select-output-source"> Audio Output Destination: <button onclick="playtone()" style="margin:0 0 0 15px;" type="button">Test</button>
</span></div>
<select id="outputSource" ></select>
@ -547,7 +547,7 @@
<br />
<br />
<div id="audioMenu3" class="form-group multiselect" alt="tip: Hold CTRL (command) to select Multiple" title="tip: Hold CTRL (command) to select Multiple" style="padding: 10px; background-color:#f3f3f3;">
<div class="form-group multiselect" alt="tip: Hold CTRL (command) to select Multiple" title="tip: Hold CTRL (command) to select Multiple" style="padding: 10px; background-color:#f3f3f3;">
<a id="multiselect-trigger3" class="form-control multiselect-trigger" tabindex="3">
<div id="audioTitle2" class="title">
<i class="las la-microphone-alt"></i><span data-translate="select-audio-source"> Audio Source(s) </span>
@ -561,7 +561,7 @@
</div>
<br />
<span id="headphonesDiv3" style="display: inline-block;">
<div id="audioTitle3" class="title">
<div class="title">
<i class="las la-headphones"></i><span data-translate="select-output-source"> Audio Output Destination:
</div>
<select id="outputSource3" ></select>

4
main.css
View File

@ -1007,12 +1007,12 @@ video {
background-color: #0066aa !important;
}
#audioTitle{
.audioTitle {
text-align:left;
padding: 7px 0px;
}
#audioTitle2{
.audioTitle2 {
text-align:left;
padding: 0px 10px 10px 1px;
}

82
main.js
View File

@ -1259,20 +1259,10 @@ setInterval(function(){checkConnection();},5000);
function printViewStats(menu, statsObj, streamID){ // Stats for viewing a remote video
menu.className = "debugStats remotestats";
menu.interval = setTimeout(printViewStats,3000, menu, statsObj, streamID);
menu.innerHTML="<h1>Statistics</h1>";
menu.innerHTML+="<button class='close'>×</button>";
menu.innerHTML+="StreamID: <b>"+streamID+"</b><br />";
menu.innerHTML="StreamID: <b>"+streamID+"</b><br />";
menu.innerHTML+= printValues(statsObj);
document.getElementsByClassName('close')[0].addEventListener('click', function(e) {
clearTimeout(menu.interval);
e.currentTarget.parentNode.remove();
});
}
function printValues(obj) { // see: printViewStats
var out = "";
@ -1312,23 +1302,13 @@ function printValues(obj) { // see: printViewStats
}
function setupStatsMenu(menu){ // Stats for checking on our local video being published
menu.className = 'debugStats viewstats';
menu.interval = setInterval(printMyStats,3000, menu);
printMyStats(menu);
}
function printMyStats(menu){ // see: setupStatsMenu
menu.innerHTML="";
session.stats.outbound_connections = Object.keys(session.pcs).length;
session.stats.inbound_connections = Object.keys(session.rpcs).length;
menu.innerHTML = "";
menu.innerHTML+="<h1>Statistics</h1>";
menu.innerHTML+="<button class='close'>×</button>";
function printViewValues(obj) {
for (var key in obj) {
if (typeof obj[key] === "object") {
@ -1343,12 +1323,6 @@ function printMyStats(menu){ // see: setupStatsMenu
for (var uuid in session.pcs){
printViewValues(session.pcs[uuid].stats);
}
document.getElementsByClassName('close')[0].addEventListener('click', function(e) {
clearInterval(menu.interval);
e.currentTarget.parentNode.remove();
});
}
@ -1455,7 +1429,7 @@ function toggleVideoMute(apply=false){ // TODO: I need to have this be MUTE, tog
}
}
function toggleSettings(ele=null){ // TODO: I need to have this be MUTE, toggle, with volume not touched.
function toggleSettings(){ // TODO: I need to have this be MUTE, toggle, with volume not touched.
if (getById("popupSelector").style.display=="none"){
@ -1556,6 +1530,8 @@ function directVolume(ele){ // A directing room only is controlled by the Direct
msg.target = ele.parentNode.parentNode.dataset.UUID; // i want to focus on the STREAM ID, not the UUID...
msg.value = ele.value;
// session.anysend(msg // msg.UUID -> can't do this yet as DIRECTOR isn't "verfied" via WebRTC yet. ALSO,
// need to send to just scenes, and that isn't the case as voice is push to talk setup first. RTC is off by default then.
session.sendMsg(msg); // send to everyone in the room, so they know if they are on air or not.
}
@ -1897,8 +1873,19 @@ function createRoom(roomname=false){
getById("roomid").innerHTML = roomname;
try{
if (document.title==""){
document.title = "Control Room";
} else {
document.title += " - Control Room";
}
} catch(e){errorlog(e);};
session.director = true;
getById("reshare").parentNode.removeChild(getById("reshare"));
getById("chatbutton").classList.remove("advanced");
getById("controlButtons").style.display = "inherit";
var passAdd="";
var passAdd2="";
@ -1914,12 +1901,12 @@ function createRoom(roomname=false){
gridlayout.innerHTML += "<font style='font-size:130%;color:white'></font><input class='task' onmousedown='copyFunction(this)' data-drag='1' onclick='popupMessage(event);copyFunction(this)' style='cursor:grab;font-weight:bold;background-color:#5F4;width:400px;font-size:100%;padding:10px;border:2px solid black;margin:5px;' value='https://"+location.host+location.pathname+"?scene=1&room="+session.roomid+passAdd2+"' /><font style='font-size:110%;color:white'><i class='las la-th-large' style='position:relative;top:7px;font-size:2em;' aria-hidden='true'></i> - This is an OBS Browser Source link that is empty by default. Videos in the room can be manually added to this scene.</font><br />";
gridlayout.innerHTML += "<font style='font-size:130%;color:white'></font><input class='task' onmousedown='copyFunction(this)' data-drag='1' onclick='popupMessage(event);copyFunction(this)' style='cursor:grab;font-weight:bold;background-color:#7C7;width:400px;font-size:100%;padding:10px;border:2px solid black;margin:5px;' value='https://"+location.host+location.pathname+"?scene=0&room="+session.roomid+passAdd2+"' /><font style='font-size:110%;color:white'><i class='las la-th-large' style='position:relative;top:7px;font-size:2em;' aria-hidden='true'></i> - Also an OBS Browser Source link, all videos in this group chat room will automatically be added into this scene.</font><br />";
gridlayout.innerHTML += "<font style='font-size:130%;color:white'></font><input class='task' onmousedown='copyFunction(this)' data-drag='1' onclick='popupMessage(event);copyFunction(this)' style='cursor:grab;font-weight:bold;background-color:#7C7;width:400px;font-size:100%;padding:10px;border:2px solid black;margin:5px;' value='https://"+location.host+location.pathname+"?scene=0&room="+session.roomid+passAdd2+"' /><font style='font-size:110%;color:white'><i class='las la-th-large' style='position:relative;top:7px;font-size:2em;' aria-hidden='true'></i> - Also an OBS Browser Source link. All guest videos in this group chat room will automatically be added into this scene.</font><br />";
gridlayout.innerHTML += '<button style="margin:10px;" onclick="toggle(getById(\'roomnotes2\'),this);">❔ Click Here for a quick overview and help</button> ';
gridlayout.innerHTML += '<button id="press2talk" style="margin:10px;" onclick="press2talk(this);">🔊 Enable Press to Talk</button>';
gridlayout.innerHTML += '<span id="miniPerformer"><button id="press2talk" style="margin:10px;" onclick="press2talk(this);">🔊 Enable Director\'s Push-to-Talk Mode</button></span>';
gridlayout.innerHTML += "<br /><div id='roomnotes2' style='display:none;padding:0 0 0 10px;' ><br />\
<font style='color:#CCC;'>Welcome. This is the control-room for the group-chat. There are different things you can use this room for:<br /><br />\
@ -1948,6 +1935,7 @@ function createRoom(roomname=false){
function press2talk(ele){
log(ele);
ele.style.minWidth="127px";
if (!(document.getElementById("videosource"))){
ele.innerHTML = "🔴 Push to Mute";
session.publishDirector();
@ -1961,7 +1949,7 @@ function press2talk(ele){
});
log("PUSHED TO TALK 1");
} else {
ele.innerHTML = "🔴 Push to Talk ";
ele.innerHTML = "🔇 Push to Talk ";
ele.dataset.enabled="false";
session.streamSrc.getAudioTracks().forEach((track) => {
track.enabled = false;
@ -3484,11 +3472,11 @@ function setupWebcamSelection(stream=null){
session.sink = outputSelect.options[outputSelect.selectedIndex].value;
//if (session.sink=="default"){session.sink=false;} else {
getById("previewWebcam").setSinkId(session.sink).then(() => {
log("New Output Device:"+session.sink);
}).catch(error => {
errorlog(error);
//setTimeout(function(){alert("Failed to change audio output destination.");},1);
});
log("New Output Device:"+session.sink);
}).catch(error => {
errorlog(error);
//setTimeout(function(){alert("Failed to change audio output destination.");},1);
});
//}
}
@ -3762,6 +3750,13 @@ function generateQRPage(){
if (session.view){
getById("main").className = "";
getById("credits").style.display = 'none';
try{
if (document.title==""){
document.title = "View="+session.view.toString();
} else {
document.title += ", View="+session.view.toString();
}
} catch(e){errorlog(e);};
}
@ -3810,6 +3805,15 @@ if ((session.view) && (session.roomid===false)){
play();
//getById("mainmenu").style.display="none";
}
} else if (session.roomid!==false){
try{
if (document.title==""){
document.title = "Room="+session.roomid.toString();
} else {
document.title += ", Room="+session.roomid.toString();
}
} catch(e){errorlog(e);};
}

8
speedtest.html
View File

@ -131,7 +131,9 @@ function loadIframe(){
for (var streamID in e.data.stats.inbound_stats){
out += printValues(e.data.stats.inbound_stats[streamID]);
}
document.getElementById("statsdiv").innerHTML = out;
if (out.split("Bitrate_in_kbps").length>1){
document.getElementById("statsdiv").innerHTML = "<b>Bitrate_in_kbps</b>"+out.split("Bitrate_in_kbps")[1];
}
}
});
@ -145,7 +147,9 @@ function printValues( obj) {
out +="<br />";
out += printValues(obj[key]);
} else {
out +="<b>"+key+"</b>: "+obj[key]+"<br />";
if (key.startsWith("_")){} else {
out +="<b>"+key+"</b>: "+obj[key]+"<br />";
}
}
}
return out;

2
webrtc.js
View File

File diff suppressed because one or more lines are too long