Update little printer requirements

src/static/js/webcam.js

@@ -4,38 +4,72 @@ var current_camera_is;
 
 var width = document.getElementById("video").parentNode.parentElement.clientWidth;
 var height = width / (4 / 3);
+var socket = io();
 
-function startup(){
+socket.on('connect', function() {
+    socket.emit('ping', {data: 'I\'m connected!'});
+    console.log("Sent a ping to the server :)");
+});
+
+
+socket.on('pong', () => {
+  console.log('Received pong back ! ');
+});
+
+socket.on('new_image', () => {
+    console.log("Received new image event");
+    const img = document.getElementById('snapshot');
+    img.src = '/image?' + new Date().getTime();  // Bust cache
+});
+
+
+async function startup(){
   video = document.getElementById('video');
   canvas = document.getElementById('canvas');
   photo = document.getElementById('photo');
   switch_cameras = document.getElementById('flip')
   printButton = document.getElementById('print_button');
-
-  if (check_webcam() === true ){
+  if ( await check_webcam() === true ){
     setup_events();
     clear_canvas();
+  } else if ( await check_server_camera() === true){
+    console.log("The server has a camera, using it.");
   } else {
     no_webcam_error();
     console.log("Seems like it's impossible to get a webcam.");
   }
 }
 
-function check_webcam(){
+async function check_webcam(){
   console.log("Cheking for a camera...");
-  if (get_front_webcam()) {
+  if (await get_front_webcam()) {
     console.log("Got front camera !");
     return true;
   }
 
-  if (get_any_webcam()) {
+  if (await get_any_webcam()) {
     console.log("Got a webcam !");
     return true;
   }
-  console.log("Nope");
+
+  console.log("Found no usable cameras on client device");
+
   return false;
 }
 
+async function check_server_camera(){
+  console.log("Checking for a camera on the server");
+
+  await socket.emit('get_camera_status', (response) => {
+    if (response){
+      console.log("Server has a camera !");
+    } else {
+      console.log("The server doesn't seem to have a camera");
+    }
+  });
+
+}
+
 function setup_events(){
 
   // When the video is ready, we start streaming it to the canvas.
@@ -206,7 +240,7 @@ async function get_webcam(options){
   }
 }
 
-function get_any_webcam(){
+async function get_any_webcam(){
   var camera_options = {
     video: {
        facingMode: 'environment', // Or 'environment' if we want a camera facing away
@@ -214,7 +248,7 @@ function get_any_webcam(){
     audio: false
   };
 
-  if(get_webcam(camera_options)){
+  if(await get_webcam(camera_options)){
     console.log("Got any camera, or environment camera.");
     current_camera_is = "any";
     return true;
@@ -223,11 +257,11 @@ function get_any_webcam(){
   }
 }
 
-function get_front_webcam(){
+async function get_front_webcam(){
   // We try to start with the front facing camera,
   // if we have no support, we switch back to a normal camera.
   try {
-    const supports = navigator.mediaDevices.getSupportedConstraints();
+    const supports =  navigator.mediaDevices.getSupportedConstraints();
     if (!supports['facingMode']) {
       throw new Error("This browser does not support facingMode!");
     } else {
@@ -246,7 +280,7 @@ function get_front_webcam(){
     };
   }
 
-  if(get_webcam(camera_options)){
+  if(await get_webcam(camera_options)){
     console.log("Got the front camera");
     current_camera_is = "front";
     return true;