mirror
/
OpenBuilds-CONTROL
kopia lustrzana https://github.com/OpenBuilds/OpenBuilds-CONTROL
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Add camera to 3D View

pull/294/head
Karen Lees 2023-02-06 18:43:05 +01:00
rodzic f3bcf217de
commit 7296790803
1 zmienionych plików z 57 dodań i 4 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

61
app/index.html
Wyświetl plik

@ -1147,11 +1147,17 @@
</div>
<div class="section" id="tab-three">
<div id="renderArea"></div>
<div style="position: absolute; top: 10px; right:10px; z-index: 1; max-width: 100px; max-width: 100px;" id="overlayimg">
<!-- <img src="img/mch/acro55.png" style="max-width:100%; max-height:100%;">
<span style="position: absolute; top: 3px; right:3px; z-index: 1;" class="fas fa-cogs"></span> -->
<div style="position: absolute; top: 10px; right:10px; z-index: 1; max-width: 100px;" id="overlayimg">
<!-- <img src="img/mch/acro55.png" style="max-width:100%; max-height:100%;"> -->
<span style="position: absolute; top: 3px; right:3px; z-index: 1;" class="fas fa-cogs"></span>
</div>
<div class="fixed-bottom m-3 mb-9">
<div style="position: absolute; top: 60px; right:10px; z-index: 1; width: 200px; border: 1px lightgrey solid;">
<select data-prepend="&nbsp;<i class='fas fa-video'></i>" id="videoInputSelect" class="text-small" onchange="streamSelectedCamera()">
<option value="">None</option>
</select>
<video width="200px" autoplay="true" id="videoElement"></video>
</div>
<div class="fixed-bottom m-3 mb-9" style="border: 1px grey solid;">
<button class="button dark" onclick="simSpeed();"><span class="icon"><span class="fas fa-tachometer-alt"></span></span><span class="caption"><span id="simspeedval">1</span>x</span>
</button>
<button id="runSimBtn" title="Run simulation" class="button dark drop-shadow" onclick="sim(0)"><i class="fas fa-fighter-jet"></i> Simulate</button>&nbsp;
@ -1164,6 +1170,9 @@
<div class="section" id="tab-four">
<div id="macros"></div>
</div>
<div class="section" id="tab-five">
<div>Hello world</div>
</div>
</div>
</nav>
</div>
@ -2076,5 +2085,49 @@
<script src="/lib/furcanIconPicker/iconpicker-1.5.0.js"></script>
<script>
function streamSelectedCamera() {
console.log('Streaming camera...');
const deviceId = document.getElementById("videoInputSelect").value;
const video = document.querySelector("#videoElement");
if (deviceId === "") {
console.log('No camera selected..');
video.srcObject = null;
return;
}
navigator.mediaDevices.getUserMedia({ video: { deviceId: { exact: deviceId }}})
.then((device)=>{
console.log('updating camera stream');
video.srcObject = device;
})
.catch(function (err) {
console.error(`${err.name}: ${err.message}`);
});
}
function getVideoDevices() {
navigator.mediaDevices.enumerateDevices()
.then((devices) => {
const videoDevices = devices.filter(device => device.kind === "videoinput");
const videoSelect = document.getElementById("videoInputSelect");
videoDevices.forEach((device) => {
let option = new Option(device.label, device.deviceId);
videoSelect.options.add(option);
});
})
.catch((err) => {
console.error(`${err.name}: ${err.message}`);
});
}
if (!navigator.mediaDevices?.enumerateDevices) {
console.log("enumerateDevices() not supported. Cannot stream video.");
} else {
getVideoDevices();
}
</script>
</html>
<!-- -->