elias/vdo.ninja
1
0
Fork 0
mirror of https://github.com/eliasstepanik/vdo.ninja.git synced 2026-01-15 23:58:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #534 from jcalado/master

Browse Source 
touch up /devices
This commit is contained in:
Steve Seguin 2020-11-28 00:31:37 -05:00 committed by GitHub
commit a93556e662
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 152 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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;
}
}

114
devices.html
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>