littleprynter/src/templates/webcam.html

{% extends 'base.html' %}

{% block content %}

<div class="card">
  <h3 class="card-header">Photomaton</h3>
  <div class="card-body row">

    <canvas id="canvas"></canvas>
    <video id="video" class="align-self-center">Video stream not available.</video>
    <div class="image_dither">
      <picture>
        <img id="photo" class="align-self-center">
      </picture>
    </div>
  </div>

  <hr>

  <!-- <div class="row row-cols-2"> -->
      <!-- <button class="align-self-center col-3 btn btn-danger" name="take_picture" id="startbutton">
        <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>
      </button>
      <br><br> -->
      <button class="align-self-center col-3 btn btn-danger" name="print_picture" id="print_button">
        <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>
  <!-- </div> -->

</div>

<style media="screen">
  canvas {
    display: none;
  }

  video {
    display: none;
  }

  .image_dither {
    /* width: 300px;
    height: 400px; */
    image-rendering: smooth;
    filter: saturate(0) contrast(250);
  }

  picture {
    image-rendering: smooth;
  }

  .image_dither > picture::after {
    content: '';
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: fixed;
    display: block;
    z-index: 2;
    top: 0px;
    left: 0px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAOklEQVR4nC3KQQFAQAAAwd0EIohANA0uiiiugQgiiLA+5j0AVBewVa/VUGd1qBNgrR5gqW6r8x+7Oj8/xCBur9LU/wAAAABJRU5ErkJggg==');
    background-repeat: repeat;
}


  #photo {
    background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
    padding: 0;
    max-width: 100%;
    vertical-align: middle;
    image-rendering: pixelated;
  }

</style>

<script type="text/javascript">
  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');
    printButton = document.getElementById('print_button');

    // 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) {
            video.srcObject = stream;
            video.play();
        })
        .catch(function(err) {
            console.log("An error occurred: " + err);
        });

    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;
        }
    }, false);

    printButton.addEventListener('click', function(ev){
      data = takepicture();
      printPicture(data)
      ev.preventDefault();

    }, false)

}

  function clearphoto() {
      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 takepicture() {
      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 {
          clearphoto();
      }

      return data;
  }

  function printPicture(data){
      var url = "/api/print/img"
      var picture = data;
      const formData = new FormData();

      formData.append("file", picture);

      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);
</script>

<br>

{% endblock %}