Add countdown to the webcam, and fix flipping

src/static/css/style.css

@@ -3,6 +3,36 @@
     margin-right: 20%;
 } */
 
+html, body {
+    height: 100%;
+    width: 100%;
+}
+
+.fullscreen-countdown {
+    position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    z-index: 100;
+    height: 100%;
+    width: 100%;
+    /* backdrop-filter: blur(10px); */
+    color: black;
+    box-sizing: initial;
+
+}
+
+#countdown-number {
+    font-weight: bolder;
+    font-size: 10em;
+    text-shadow:   0px 0px 3em white, 1px 1px 1px rgba(255, 255, 255, 1);
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
 /*// Small devices (landscape phones, 576px and up)*/
 @media (min-width: 576px) {
 

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){
+  printButton.addEventListener('click', async function(ev) {
-    data = take_picture();
+    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(){
+async function take_picture() {
-  var context = canvas.getContext('2d');
+  const context = canvas.getContext('2d');
+  let data = null;
   if (width && height) {
-      canvas.width = width;
+    canvas.width = width;
-      canvas.height = height;
+    canvas.height = height;
-      context.drawImage(video, 0, 0, width, height);
+    context.drawImage(video, 0, 0, width, height);
-
+    data = canvas.toDataURL('image/png');
-      var data = canvas.toDataURL('image/png');
+    photo.setAttribute('src', data);
-      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);

src/templates/webcam.html

@@ -54,6 +54,10 @@
 
 	</div>
 
+	<div id="countdown">
+		<div id="countdown-number"></div>
+	</div>
+
 <style media="screen">
   canvas {
     display: none;