n07070/littleprynter
n07070/littleprynter
1
0
Fork 0
Code Issues 5 Pull Requests Projects Releases Activity

Webcam support to use it as a photomaton ( photobooth ) #2

Merged
n07070 merged 11 commits from webcam into master 2022-05-10 00:03:46 +02:00
Conversation 0 Commits 11 Files Changed 11 +62 -144
3 changed files with 62 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5d99e78dea - Show all commits

6
src/templates/base.html
View File

@ -51,7 +51,9 @@
{% endblock %}
<hr>
<footer>Little Prynter is built by <a href="https://n07070.xyz/about-me/">n07070</a> because it's fun :) | <a href="https://git.n07070.xyz/n07070/littleprynter/src/branch/epson-tm-t20iii">Source code - AGPLv3</a></footer>
</div>
<footer class="row">
<p class=" text-center">Little Prynter is built by <a href="https://n07070.xyz/about-me/">n07070</a> because it's fun :) | <a href="https://git.n07070.xyz/n07070/littleprynter">Source code - AGPLv3</a></p>
</footer>
</body>
</html>

46
src/templates/index.html
View File

@ -2,29 +2,27 @@
{% block content %}
<div class="card">
<h3 class="card-header">Print a short message</h3>
<div class="card-body">
<div class="card">
<h3 class="card-header">Print a short message</h3>
<div class="card-body">
<form class="form-group" action="/api/print/sms" method="post">
<input class="form-control" type="text" name="txt" placeholder="200 chars or less " maxlength="200" required><br>
<input class="form-control" type="text" name="signature" placeholder="Signature or pseudo" maxlength="200" required><br>
<input class="btn btn-primary float-right" type="submit" value="Imprimer" name="imprimer">
</form>
</div>
</div>
<form class="form-group" action="/api/print/sms" method="post">
<input class="form-control" type="text" name="txt" placeholder="200 chars or less " maxlength="200" required><br>
<input class="form-control" type="text" name="signature" placeholder="Signature or pseudo" maxlength="200" required><br>
<br>
<input class="btn btn-primary float-right" type="submit" value="Imprimer" name="imprimer">
</form>
</div>
</div>
<br>
<div class="card">
<h3 class="card-header">Print an image</h3>
<div class="card-body">
<form enctype="multipart/form-data" class="form-group" action="/api/print/img" method="post">
<input class="form-control" type="file" name="img" required><br>
<input class="form-control" type="text" name="signature" placeholder="Signature or pseudo" maxlength="200" required><br>
<input class="btn btn-primary float-right" type="submit" value="Imprimer" name="imprimer">
</form>
</div>
{% endblock %}
<div class="card">
<h3 class="card-header">Print an image</h3>
<div class="card-body">
<form enctype="multipart/form-data" class="form-group" action="/api/print/img" method="post">
<input class="form-control" type="file" name="img" required><br>
<input class="form-control" type="text" name="signature" placeholder="Signature or pseudo" maxlength="200" required><br>
<input class="btn btn-primary float-right" type="submit" value="Imprimer" name="imprimer">
</form>
</div>
</div>
{% endblock %}

154
src/templates/webcam.html
View File

@ -2,13 +2,40 @@
{% 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.
</div>
</noscript>
<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">
<div class="row align-self-center">
<button class=" btn btn-primary" name="print_picture" id="print_button" disabled="">
<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="">
<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>
@ -17,21 +44,11 @@
<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> -->
</div>
</div>
@ -40,9 +57,9 @@
display: none;
}
video {
/* video {
display: none;
}
} */
.image_dither {
/* width: 300px;
@ -80,106 +97,7 @@
</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>
<script type="text/javascript" src="{{ url_for('static',filename='js/webcam.js') }}"></script>
<br>