Changed rate limits

Reviewed-on: http://git.n07070.xyz/n07070/littleprynter/pulls/2

README.md

@@ -1,9 +1,9 @@
 # Little Prynter
 ---
 
-> Print out shit from the cloud on a thermal paper.
+<img src="src/static/images/little-printer_banner.png" style="padding:auto">
 
-![LittlePrynter Logo](src/static/images/little-printer.png)
+> Print out shit from the cloud on a thermal paper.
 
 ## About
 
@@ -21,6 +21,7 @@ To make this project work, you will need :
 - Some knowledge of Python.
 - 3h of your time, 5h if things need debugging.
 - `git`, `virtualenv`,`pip` and `python` >= 3.8.6.
+- A webcam for the webcam page to work. Will work on a smartphone. Not required.
 
 ## Context
 
@@ -60,6 +61,16 @@ This command should start a web server with which you can test your configuratio
 
 Voilà !
 
+## Screenshots
+
+![](src/static/images/homepage.png)
+> The first page. You can print a picture, or a short message. It's basically exposing the API in html.
+
+![](src/static/images/photomaton.png)
+> Using the webcam via Javascript, you can print out a picture from your phone, webcam, or any other video device.
+
+![](src/static/images/result.jpg)
+
 ## More
 
 If you liked this project, feel free to support my work !

requirements.txt

@@ -1,31 +1,31 @@
-Adafruit-Thermal==1.1.0
-appdirs==1.4.4
-argcomplete==2.0.0
-click==8.1.3
-commonmark==0.9.1
-Deprecated==1.2.13
-escpos==1.9
-Flask==2.1.2
-Flask-Limiter==2.4.5.1
-future==0.18.2
-itsdangerous==2.1.2
-Jinja2==3.1.2
-limits==2.6.1
-MarkupSafe==2.1.1
-packaging==21.3
-Pillow==9.1.0
-Pygments==2.12.0
-pyparsing==3.0.8
-pyserial==3.5
-python-barcode==0.13.1
-pyusb==1.2.1
-PyYAML==6.0
-qrcode==7.3.1
-rich==12.4.1
-six==1.16.0
-toml==0.10.2
-typing_extensions==4.2.0
-Unidecode==1.3.4
-viivakoodi==0.8.0
-Werkzeug==2.1.2
-wrapt==1.14.1
+Adafruit-Thermal~=1.1.0
+appdirs~=1.4.4
+argcomplete~=2.0.0
+click~=8.1.3
+commonmark~=0.9.1
+Deprecated~=1.2.13
+escpos~=1.9
+Flask~=2.1.2
+Flask-Limiter~=2.4.5.1
+future~=0.18.2
+itsdangerous~=2.1.2
+Jinja2~=3.1.2
+limits~=2.6.1
+MarkupSafe~=2.1.1
+packaging~=21.3
+Pillow~=9.1.0
+Pygments~=2.12.0
+pyparsing~=3.0.8
+pyserial~=3.5
+python-barcode~=0.13.1
+pyusb~=1.2.1
+PyYAML~=6.0
+qrcode~=7.3.1
+rich~=12.4.1
+six~=1.16.0
+toml~=0.10.2
+typing_extensions~=4.2.0
+Unidecode~=1.3.4
+viivakoodi~=0.8.0
+Werkzeug~=2.1.2
+wrapt~=1.14.1

src/main.py

@@ -96,7 +96,7 @@ def api_index():
 
 
 @app.route('/api/print/sms', methods=['POST'])
-@limiter.limit("2/minute", override_defaults=False)
+@limiter.limit("6/minute", override_defaults=False)
 def api_print_sms():
     app.logger.debug("Printing an sms")
     try:
@@ -114,7 +114,7 @@ def api_print_sms():
     return redirect(url_for('index'))
 
 @app.route('/api/print/img', methods=['POST'])
-@limiter.limit("2/minute", override_defaults=False)
+@limiter.limit("6/minute", override_defaults=False)
 def api_print_image():
     app.logger.debug("Printing an image")
 

src/static/js/webcam.js

@@ -1,4 +1,7 @@
 let streaming;
+var current_stream;
+var current_camera_is;
+
 var width = document.getElementById("video").parentNode.parentElement.clientWidth;
 var height = width / (4 / 3);
 
@@ -9,60 +12,30 @@ function startup(){
   switch_cameras = document.getElementById('flip')
   printButton = document.getElementById('print_button');
 
-  if ( check_webcam() ){
+  if (check_webcam() === true ){
     setup_events();
     clear_canvas();
   } else {
+    no_webcam_error();
     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 {
-
-
-  }
+  console.log("Cheking for a camera...");
+  if (get_front_webcam()) {
+    console.log("Got front camera !");
     return true;
   }
 
+  if (get_any_webcam()) {
+    console.log("Got a webcam !");
+    return true;
+  }
+  console.log("Nope");
+  return false;
+}
+
 function setup_events(){
 
   // When the video is ready, we start streaming it to the canvas.
@@ -86,17 +59,24 @@ function setup_events(){
 
           streaming = true;
           printButton.removeAttribute("disabled","");
+          switch_cameras.removeAttribute("disabled","");
+
 
       }
   }, false);
 
   switch_cameras.addEventListener('click', function(ev) {
-    alert("Just turn your phone.");
+    flip_cameras();
   }, false );
 
   printButton.addEventListener('click', function(ev){
     data = take_picture();
-    print_picture(data)
+    try {
+      print_picture(data);
+    } catch (e) {
+      alert("Failed to print a picture because : " + e);
+    }
+
     ev.preventDefault();
   }, false);
 
@@ -152,9 +132,144 @@ function print_picture(data){
     // headers:{
     //   'Content-Type': 'multipart/form-data'
     // }
-  }).then(response => console.log('Success:', response), true)
+  }).then(function(response) { console.log('Success:', response); alert("Picture printed."); } , true)
   .catch(error => console.error('Error:', error), false);
 
 }
 
+function flip_cameras(){
+  switch (current_camera_is) {
+    case "front":
+      try {
+        get_any_webcam();
+      } catch (e) {
+        console.log("Could not get another camera");
+        get_front_webcam();
+      }
+      break;
+    case "any":
+      try {
+        get_front_webcam();
+      } catch (e) {
+        console.log("Could not get another camera");
+        get_any_webcam();
+      }
+      break;
+    default:
+      console.log("Impossible to switch cameras : none is selected.");
+  }
+}
+
+function stop_video_streams(){
+  console.log("Stopping existing video streams.");
+  // Stop the tracks
+  try {
+    if (current_stream) {
+      const tracks = current_stream.getTracks();
+      tracks.forEach(track => track.stop());
+      console.log("Stopped playing current videostreams.");
+      return true;
+    } else {
+      console.log("No streams currently playing.");
+    }
+  } catch (e) {
+    console.log("Could not stop playing current streams." + e);
+  }
+}
+
+async function get_webcam(options){
+  stop_video_streams();
+
+  try {
+    await navigator.mediaDevices.getUserMedia(options)
+    .then(function(stream) {
+      // on success, stream it in video tag
+      // the video tag is hidden, as is the canvas.
+      console.log("Got a camera ( generic )");
+
+      printButton.removeAttribute("disabled","");
+      current_stream = stream;
+      video.srcObject = stream;
+      video.play();
+      return true;
+    })
+    .catch(function(err) {
+        console.log("Didn't manage to get a camera :" + err);
+        return false;
+    });
+  } catch (err) {
+    console.log("Didn't manage to get a camera :" + err);
+    return false;
+  }
+}
+
+function get_any_webcam(){
+  var camera_options = {
+    video: {
+       facingMode: 'environment', // Or 'environment' if we want a camera facing away
+    },
+    audio: false
+  };
+
+  if(get_webcam(camera_options)){
+    console.log("Got any camera, or environment camera.");
+    current_camera_is = "any";
+    return true;
+  } else {
+    return false;
+  }
+}
+
+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();
+    if (!supports['facingMode']) {
+      throw new Error("This browser does not support facingMode!");
+    } else {
+      var camera_options = {
+        video: {
+           facingMode: 'user', // Or 'environment' if we want a camera facing away
+        },
+        audio: false
+      };
+    }
+  } catch (e) {
+    console.log("Resetting to default camera : " + e);
+    var camera_options = {
+      video: true,
+      audio: false
+    };
+  }
+
+  if(get_webcam(camera_options)){
+    console.log("Got the front camera");
+    current_camera_is = "front";
+    return true;
+  } else {
+    return false;
+  }
+}
+
+function no_webcam_error(){
+  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);
+  throw new Error("Unable to get a video device, stopping the photobooth.");
+}
+
 window.addEventListener('load', startup, false);

src/templates/webcam.html

@@ -3,16 +3,13 @@
 {% block content %}
 
 	<noscript class="d-block">
-
 			<div class="alert alert-warning " role="alert">
-
-
 				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bug-fill" viewBox="0 0 16 16">
 					<path d="M4.978.855a.5.5 0 1 0-.956.29l.41 1.352A4.985 4.985 0 0 0 3 6h10a4.985 4.985 0 0 0-1.432-3.503l.41-1.352a.5.5 0 1 0-.956-.29l-.291.956A4.978 4.978 0 0 0 8 1a4.979 4.979 0 0 0-2.731.811l-.29-.956z"/>
 					<path d="M13 6v1H8.5v8.975A5 5 0 0 0 13 11h.5a.5.5 0 0 1 .5.5v.5a.5.5 0 1 0 1 0v-.5a1.5 1.5 0 0 0-1.5-1.5H13V9h1.5a.5.5 0 0 0 0-1H13V7h.5A1.5 1.5 0 0 0 15 5.5V5a.5.5 0 0 0-1 0v.5a.5.5 0 0 1-.5.5H13zm-5.5 9.975V7H3V6h-.5a.5.5 0 0 1-.5-.5V5a.5.5 0 0 0-1 0v.5A1.5 1.5 0 0 0 2.5 7H3v1H1.5a.5.5 0 0 0 0 1H3v1h-.5A1.5 1.5 0 0 0 1 11.5v.5a.5.5 0 1 0 1 0v-.5a.5.5 0 0 1 .5-.5H3a5 5 0 0 0 4.5 4.975z"/>
 				</svg>
-		  This page will need Javascript and your authorization to use the webcam to work. It is not possible because Javascript seems to be deactived on this page.
 
+			This page will need Javascript and your authorization to use the webcam to work. It is not possible because Javascript seems to be deactived on this page.
 		</div>
 	</noscript>
 
@@ -21,32 +18,42 @@
 	  <div class="card-body row">
 
 	    <canvas id="canvas"></canvas>
-    <video id="video" class="align-self-center">Video stream not available.</video>
-		<div class="row align-self-center">
-			<button class=" btn btn-primary" name="print_picture" id="print_button" disabled="">
+	    <video id="video" class="">Video stream not available.</video>
+
+			<div class="container-sm">
+				<div class="row">
+					<button class="col-sm col-lg-3 offset-lg-2 btn btn-primary justify-content-center" name="print_picture" id="print_button" data-bs-toggle="tooltip" data-bs-placement="top" title="Snap & print a picture" disabled="">
+						<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" fill="currentColor" class="bi bi-camera" viewBox="0 0 16 16">
+						  <path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1v6zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2z"/>
+						  <path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
+						</svg>
+						<b>&</b>
 						<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" fill="currentColor" class="bi bi-printer" viewBox="0 0 16 16">
 						  <path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/>
 						  <path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2H5zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"/>
 						</svg>
 					</button>
-			<button class=" btn btn-secondary" name="flip" id="flip" disabled="">
+					<button class="col-sm col-lg-3 offset-lg-2 btn btn-secondary justify-content-center" name="flip" id="flip" data-bs-toggle="tooltip" data-bs-placement="top" title="Change camera" disabled="">
 						<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
 							<path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
 							<path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
 						</svg>
 					</button>
-    <div class="image_dither" id="image_dither">
-      <picture>
-        <img id="photo" class="align-self-center">
-      </picture>
-    </div>
 				</div>
 
 				<hr>
 
+				<div class="image_dither" id="image_dither">
+					<picture>
+				        <img id="photo" class="justify-content-center">
+				  </picture>
+	  		</div>
 
+				<p>
+					This is a as-close-as-possible representation of what is printed on the thermal printer.
+				</p>
+	  	</div>
 
-<!-- </div> -->
 
 		</div>