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

Update devices.html

Browse Source
This commit is contained in:
Joel Calado 2020-11-28 22:05:44 +00:00
parent 1084c8efd7
commit 574f9c6652
1 changed files with 100 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
devices.html
View File

@ -19,9 +19,15 @@
</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">
<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>
@ -34,9 +40,16 @@
<div id="audioOutputs"></div>
</div>
</div>
<div id="sharedDevices" style="display: none">
<span>Click to copy. Send this to your host:</span>
<span id="close" onclick="this.parentNode.style.display='none'">×</span>
<input id="devicesUrl" value="" />
</div>
<script>
var list = [];
var url = new URL(document.location.origin);
var audioInputDevices = [];
function isAudioInput(value) {
return value.kind == "audioinput";
@ -50,20 +63,96 @@
return value.kind == "videoinput";
}
function addDevice(element) {
var info = element.getElementsByClassName("device-id")[0];
var type = info.dataset.deviceType;
if (type == "audioinput") {
setAudioSearchParams(info);
}
if (type == "videoinput") {
setVideoSearchParams(info);
}
if (type == "audiooutput") {
return;
}
/*
Allows for multiple audio devices to be selected
Will be output as a comma separated string to &ad
*/
function setAudioSearchParams(info) {
// Device was already selected
if (info.parentNode.className == "device selected") {
// Remove device from list of selected devices
var index = audioInputDevices.indexOf(info.innerText);
if (index !== -1) {
audioInputDevices.splice(index, 1);
}
// Set the url param to the devices that are left
url.searchParams.set("ad", audioInputDevices.join(","));
element.className = "device";
// If no audio devices remained, just remove the param completely
if (audioInputDevices.length == 0) {
url.searchParams.delete("ad");
}
} else {
// Device is unselected
audioInputDevices.push(info.innerText);
url.searchParams.set("ad", audioInputDevices.join(","));
element.className = "device selected";
}
}
/*
Only allows for a single video device to be selected
*/
function setVideoSearchParams(info) {
// Device was already selected
if (info.parentNode.className == "device selected") {
info.parentNode.className = "device";
// Set the url param to the devices that are left
url.searchParams.set("vd", info.innerText);
element.className = "device";
// If no devices remained, just remove the param completely
if (audioInputDevices.length == 0) {
url.searchParams.delete("vd");
}
} else {
// Device is unselected
url.searchParams.set("vd", info.innerText);
element.className = "device selected";
}
}
// Update UI
showDeviceIdsPopup();
}
function showDeviceIdsPopup() {
document.getElementById("devicesUrl").value = decodeURIComponent(url);
document.getElementById("sharedDevices").style.display = "block";
}
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 += "<div class='device' onclick='addDevice(this)'>";
output +=
"<span class='device-name'>" +
value.label +
"</span><span class='device-id'>Device ID: " +
"</span><span class='device-id' data-device-type='" +
value.kind +
"'>" +
value.deviceId +
"</span>";
@ -73,6 +162,11 @@
document.getElementById(element).innerHTML = output;
}
document.getElementById("devicesUrl").onclick = function () {
this.select();
document.execCommand("copy");
};
navigator.mediaDevices
.enumerateDevices()
.then(function (devices) {