From 8b248c186b4071d5d4584f6490b91ca72f218571 Mon Sep 17 00:00:00 2001 From: colorfingers Date: Sat, 25 Nov 2023 13:28:51 +0000 Subject: [PATCH] Added video select, changed video button text --- applications/emocam/index.html | 102 ++++++++++++++++++++++++++++----- 1 file changed, 87 insertions(+), 15 deletions(-) diff --git a/applications/emocam/index.html b/applications/emocam/index.html index 6252859..583adc8 100644 --- a/applications/emocam/index.html +++ b/applications/emocam/index.html @@ -235,7 +235,6 @@ }; - @@ -247,14 +246,13 @@ -
-
- @@ -270,14 +268,18 @@
+ +
+ +
+ +
-
@@ -711,29 +713,99 @@ } else { console.warn("getUserMedia() is not supported by your browser"); } - + $(document).on("click", ".vid_link", function (event) { + var videoElement = document.querySelector('video'); + hrefValue = $(this).text(); + var idValue = $(this).attr('id'); + vidopttrigger = true; + document.querySelector("#videoSource").value=idValue; + $("#videoSource").val(idValue).prop('selected', true); + $("#videoSource").val(idValue).change(); + $("#videoDropdown").val(hrefValue); + MyAvatar.removeAnimationStateHandler(handlerId); + MyAvatar.restoreAnimation(); + }); // Enable the live webcam view and start detection. function enableCam(event) { + var videoElement = document.querySelector('video'); + var videoSelect = document.querySelector('select#videoSource'); + videoSelect.onchange = getStream; if (!faceLandmarker) { console.log("Wait! faceLandmarker not loaded yet."); return; } if (webcamRunning === true) { webcamRunning = false; - enableWebcamButton.innerText = "ENABLE PREDICTIONS"; + enableWebcamButton.innerText = "VIDEO ON"; + $('#videoSource').empty(); + window.stream.getTracks().forEach(track => { + track.stop(); + }); } else { + getStream().then(getDevices).then(gotDevices); webcamRunning = true; - enableWebcamButton.innerText = "DISABLE PREDICTIONS"; + enableWebcamButton.innerText = "VIDEO OFF"; + video.addEventListener("loadeddata", predictWebcam); } // getUsermedia parameters. + // Copyright 2017 Google Inc. + + // Licensed under the Apache License, Version 2.0 (the "License"); + // you may not use this file except in compliance with the License. + // You may obtain a copy of the License at + + // http://www.apache.org/licenses/LICENSE-2.0 + + // Unless required by applicable law or agreed to in writing, software + // distributed under the License is distributed on an "AS IS" BASIS, + // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + // See the License for the specific language governing permissions and + // limitations under the License. + + function getDevices() { + // AFAICT in Safari this only gets default devices until gUM is called :/ + return navigator.mediaDevices.enumerateDevices(); + } + + function gotDevices(deviceInfos) { + window.deviceInfos = deviceInfos; // make available to console + console.log('Available input and output devices:', deviceInfos); + for (const deviceInfo of deviceInfos) { + const option = document.createElement('option'); + option.value = deviceInfo.deviceId; + if (deviceInfo.kind === 'videoinput') { + option.text = deviceInfo.label || `Camera ${videoSelect.length + 1}`; + videoSelect.appendChild(option); + $("#vid_list").append("" + option.text + ""); + } + } + } + + function getStream() { + if (window.stream) { + window.stream.getTracks().forEach(track => { + track.stop(); + }); + } + + const videoSource = videoSelect.value; const constraints = { - video: true + video: {deviceId: videoSource ? {exact: videoSource} : undefined} }; - // Activate the webcam stream. - navigator.mediaDevices.getUserMedia(constraints).then(function (stream) { - video.srcObject = stream; - video.addEventListener("loadeddata", predictWebcam); - }); + return navigator.mediaDevices.getUserMedia(constraints). + then(gotStream).catch(handleError); + } + + function gotStream(stream) { + window.stream = stream; // make stream available to console + videoSelect.selectedIndex = [...videoSelect.options]. + findIndex(option => option.text === stream.getVideoTracks()[0].label); + videoElement.srcObject = stream; + } + + function handleError(error) { + console.error('Error: ', error); + } } let lastVideoTime = -1;