Move JS to another file, added printing from webcam

src/static/js/webcam.js

@@ -0,0 +1,160 @@
+let streaming;
+var width = document.getElementById("video").parentNode.parentElement.clientWidth;
+var height = width / (4 / 3);
+
+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() ){
+    setup_events();
+    clear_canvas();
+  } else {
+    console.log("Seems like it's impossible to get a webcam.");
+  }
+}
+
+function check_webcam(){
+  try {
+    // access video stream from webcam
+    navigator.mediaDevices.getUserMedia({
+           video: true,
+           audio: false
+       })
+       // on success, stream it in video tag
+       // the video tag is hidden, as is the canvas.
+       .then(function(stream) {
+          switch_cameras.removeAttribute("disabled","");
+
+           video.srcObject = stream;
+           video.play();
+       })
+       .catch(function(err) {
+           console.log("An error occurred: " + err);
+
+       });
+  } catch (err) {
+    console.log("An error occurred: " + err);
+    console.log("Seems like they is no webcam available.")
+
+    // We disable the print button is it cannot be clicked.
+    printButton.setAttribute("disabled","");
+
+    // We create an alert message.
+    const frame_div = document.getElementById("image_dither");
+    frame_div.removeAttribute('class');
+
+    const alert_div = document.createElement("div");
+    alert_div.setAttribute("class", "alert alert-warning");
+    alert_div.setAttribute("role", "alert");
+
+    var alert_message = document.createTextNode("We where unable to get a Webcam device, this page will not work.");
+    alert_div.appendChild(alert_message);
+    frame_div.appendChild(alert_div);
+    console.log("Should be a new div somewhere");
+    throw new Error("Unable to get a video device, stopping the photobooth.");
+  } finally {
+
+
+  }
+  return true;
+}
+
+function setup_events(){
+
+  // When the video is ready, we start streaming it to the canvas.
+  // The canvas is hidden, but it still exists in the browser.
+  video.addEventListener('canplay', function(ev) {
+      if (!streaming) {
+          height = video.videoHeight / (video.videoWidth / width);
+
+          if (isNaN(height)) {
+              height = width / (4 / 3);
+          }
+
+          video.setAttribute('width', width);
+          video.setAttribute('height', height);
+          canvas.setAttribute('width', width);
+          canvas.setAttribute('height', height);
+
+          photo.setAttribute('width', width);
+          photo.setAttribute('height', height);
+
+
+          streaming = true;
+          printButton.removeAttribute("disabled","");
+
+      }
+  }, false);
+
+  switch_cameras.addEventListener('click', function(ev) {
+    alert("Just turn your phone.");
+  }, false );
+
+  printButton.addEventListener('click', function(ev){
+    data = take_picture();
+    print_picture(data)
+    ev.preventDefault();
+  }, false);
+
+}
+
+function clear_canvas() {
+    var context = canvas.getContext('2d');
+    context.fillStyle = "#AAA";
+    context.fillRect(0, 0, canvas.width, canvas.height);
+
+    var data = canvas.toDataURL('image/png');
+    photo.setAttribute('src', data);
+}
+
+function dataURLtoFile(dataurl, filename) {
+  var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
+      bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+  while(n--){
+      u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new File([u8arr], filename, {type:mime});
+}
+
+function take_picture(){
+  var context = canvas.getContext('2d');
+  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);
+  } else {
+      clear_canvas();
+  }
+
+  return data;
+}
+
+function print_picture(data){
+  var url = "/api/print/img"
+  var picture = dataURLtoFile(data);
+  const formData = new FormData();
+  let currentDate = new Date();
+  let time = currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
+
+  formData.set("img", picture, "picture.png");
+  formData.set("signature", "Printed via the webcam @ " + time)
+
+  fetch(url, {
+    method: 'POST', // or 'PUT'
+    body: formData,
+    // headers:{
+    //   'Content-Type': 'multipart/form-data'
+    // }
+  }).then(response => console.log('Success:', response), true)
+  .catch(error => console.error('Error:', error), false);
+
+}
+
+window.addEventListener('load', startup, false);