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

Merge pull request #96 from Armored-Dragon/fix/hidePreviewWindow

Browse source 
Added preview toggle to emocam
This commit is contained in:
ksuprynowicz 2024-10-02 18:45:42 +02:00 committed by GitHub
commit dd717ff530
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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");