Mirrors/community-apps
3
0
Fork 0
mirror of https://github.com/overte-org/community-apps.git synced 2025-04-05 10:46:56 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added preview toggle to emocam. Default off!

Browse source
This commit is contained in:
armored-dragon 2024-09-18 08:10:16 -05:00
parent 242bd78b46
commit 403563f0cd
No known key found for this signature in database
GPG key ID: C7207ACC3382AD8B
1 changed files with 17 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
applications/emocam/index.html
View file

@ -4,7 +4,7 @@
Created by George Deac, October 21st, 2023.
Copyright 2023 George Deac.
Copyright 2023 The MediaPipe Authors.
Copyright 2023, Overte e.V.
Copyright 2024, Overte e.V.
Overte Application for Mediapipe face tracking in Desktop mode.
@ -267,6 +267,15 @@
<span class="slider"></span>
</label>
</td>
<td>
Show preview window:
</td>
<td>
<label class="switch">
<input type="checkbox" id="enable_webcam_display" class="switchmove">
<span class="slider"></span>
</label>
</td>
</tr>
<tr><td colspan="4">
<div class="select">
@ -274,7 +283,7 @@
</div>
</td></tr>
</table><br>
<div style="position: relative;">
<div id="preview_camera_area" style="display:none; position: relative;">
<video id="webcam" autoplay playsinline></video>
<canvas class="output_canvas" id="output_canvas" style="position: absolute; left: 0px; top: 0px;"></canvas>
</div>
@ -662,6 +671,7 @@
const {FaceLandmarker, FilesetResolver, DrawingUtils} = vision;
const demosSection = document.getElementById("demos");
const videoBlendShapes = document.getElementById("video-blend-shapes");
const enableWebcamDisplaySwitch = document.querySelector('#enable_webcam_display')
let faceLandmarker;
let runningMode = "IMAGE";
let enableWebcamButton;
@ -696,6 +706,11 @@
runDemo();
enableWebcamDisplaySwitch.addEventListener('change', (event) => {
let enabled = event.target.checked;
preview_camera_area.style.display = enabled ? "block" : "none";
})
const video = document.getElementById("webcam");
const canvasElement = document.getElementById("output_canvas");
const canvasCtx = canvasElement.getContext("2d");