From 16c1ef4d722e94d28fc28704cb6bff84d687cadd Mon Sep 17 00:00:00 2001
From: n07070 <contact@n07070.xyz>
Date: Sun, 17 May 2026 16:40:00 +0200
Subject: [PATCH] Add countdown to the webcam, and fix flipping

---
 src/static/js/webcam.js   | 70 +++++++++++++++++++++++++++++----------
 src/templates/webcam.html |  4 +++
 2 files changed, 57 insertions(+), 17 deletions(-)

diff --git a/src/static/js/webcam.js b/src/static/js/webcam.js
index 7e48c3e..2238e2c 100644
--- a/src/static/js/webcam.js
+++ b/src/static/js/webcam.js
@@ -186,18 +186,18 @@ function setup_events(){
   }, false);
 
   switch_cameras.addEventListener('click', function(ev) {
-    flip_cameras(camera_options);
+    flip_cameras();
   }, false );
 
-  printButton.addEventListener('click', function(ev){
-    data = take_picture();
+  printButton.addEventListener('click', async function(ev) {
+    ev.preventDefault();
     try {
+      await countDownToPicture();         // wait for countdown to finish
+      const data = await take_picture();  // take_picture can be async
       print_picture(data);
     } catch (e) {
       alert("Failed to print a picture because : " + e);
     }
-
-    ev.preventDefault();
   }, false);
 
 }
@@ -220,19 +220,18 @@ function dataURLtoFile(dataurl, filename) {
   return new File([u8arr], filename, {type:mime});
 }
 
-function take_picture(){
-  var context = canvas.getContext('2d');
+async function take_picture() {
+  const context = canvas.getContext('2d');
+  let data = null;
   if (width && height) {
-      canvas.width = width;
-      canvas.height = height;
-      context.drawImage(video, 0, 0, width, height);
-
-      var data = canvas.toDataURL('image/png');
-      photo.setAttribute('src', data);
+    canvas.width = width;
+    canvas.height = height;
+    context.drawImage(video, 0, 0, width, height);
+    data = canvas.toDataURL('image/png');
+    photo.setAttribute('src', data);
   } else {
-      clear_canvas();
+    clear_canvas();
   }
-
   return data;
 }
 
@@ -257,10 +256,18 @@ function print_picture(data){
 
 }
 
-function flip_cameras(camera_options){
+function flip_cameras(){
+  console.log("Current facing mode : " + camera_options.video.facingMode)
   if ( supports_facing_mode ) {
-    get_webcam((camera_options.video.facingMode === 'user' ? 'environment' : 'user'));
+    console.log("Support facing mode, trying to switch !");
+    if (camera_options.video.facingMode == 'user'){
+      camera_options = { audio: false, video: { facingMode: "environment" },};
+    } else {
+      camera_options = { audio: false, video: { facingMode: "user" },};
+    }
   }
+  console.log("Switching to " + camera_options.video.facingMode );
+  get_webcam(camera_options);
 }
 
 function stop_video_streams(){
@@ -300,4 +307,33 @@ function no_webcam_error(){
   throw new Error("Unable to get a video device, stopping the photobooth.");
 }
 
+async function countDownToPicture(){
+  return new Promise((resolve) => {
+    console.log("Starting countdown");
+    // We create full-page overlay that displays a number to countdown until the picture is taken.
+    const countdown_div = document.getElementById("countdown");
+    countdown_div.style.display = "block";
+
+    // Set the different styling attributes of the element
+    countdown_div.setAttribute("class", "fullscreen-countdown");
+
+    // The loop must run for 3 seconds
+    interval = 1000;
+    var loops = 3;
+
+    var x = setInterval(() => {
+      console.log(loops);
+      // Update the content of the div
+      document.getElementById("countdown-number").innerHTML = loops;
+      if (loops == 0) {
+        countdown_div.style.display = "none";
+        // The timer has finished
+        clearInterval(x);
+        resolve();
+      }
+      loops--;
+    }, interval);
+  });
+}
+
 window.addEventListener('load', startup, false);
diff --git a/src/templates/webcam.html b/src/templates/webcam.html
index 8361e85..5a74bbe 100644
--- a/src/templates/webcam.html
+++ b/src/templates/webcam.html
@@ -54,6 +54,10 @@
 
 	</div>
 
+	<div id="countdown">
+		<div id="countdown-number"></div>
+	</div>
+
 <style media="screen">
   canvas {
     display: none;