Compare commits

...

2 Commits

Author SHA1 Message Date
bcb36da020 Fixed switching cameras. 2022-05-09 23:59:46 +02:00
3aa0bc7f1b Fixed buttons placement 2022-05-09 23:59:36 +02:00
2 changed files with 203 additions and 88 deletions

View File

@ -1,4 +1,7 @@
let streaming; let streaming;
var current_stream;
var current_camera_is;
var width = document.getElementById("video").parentNode.parentElement.clientWidth; var width = document.getElementById("video").parentNode.parentElement.clientWidth;
var height = width / (4 / 3); var height = width / (4 / 3);
@ -9,60 +12,30 @@ function startup(){
switch_cameras = document.getElementById('flip') switch_cameras = document.getElementById('flip')
printButton = document.getElementById('print_button'); printButton = document.getElementById('print_button');
if ( check_webcam() ){ if (check_webcam() === true ){
setup_events(); setup_events();
clear_canvas(); clear_canvas();
} else { } else {
no_webcam_error();
console.log("Seems like it's impossible to get a webcam."); console.log("Seems like it's impossible to get a webcam.");
} }
} }
function check_webcam(){ function check_webcam(){
try { console.log("Cheking for a camera...");
// access video stream from webcam if (get_front_webcam()) {
navigator.mediaDevices.getUserMedia({ console.log("Got front camera !");
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; return true;
} }
if (get_any_webcam()) {
console.log("Got a webcam !");
return true;
}
console.log("Nope");
return false;
}
function setup_events(){ function setup_events(){
// When the video is ready, we start streaming it to the canvas. // When the video is ready, we start streaming it to the canvas.
@ -86,17 +59,24 @@ function setup_events(){
streaming = true; streaming = true;
printButton.removeAttribute("disabled",""); printButton.removeAttribute("disabled","");
switch_cameras.removeAttribute("disabled","");
} }
}, false); }, false);
switch_cameras.addEventListener('click', function(ev) { switch_cameras.addEventListener('click', function(ev) {
alert("Just turn your phone."); flip_cameras();
}, false ); }, false );
printButton.addEventListener('click', function(ev){ printButton.addEventListener('click', function(ev){
data = take_picture(); data = take_picture();
print_picture(data) try {
print_picture(data);
} catch (e) {
alert("Failed to print a picture because : " + e);
}
ev.preventDefault(); ev.preventDefault();
}, false); }, false);
@ -152,9 +132,144 @@ function print_picture(data){
// headers:{ // headers:{
// 'Content-Type': 'multipart/form-data' // '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); .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); window.addEventListener('load', startup, false);

View File

@ -3,16 +3,13 @@
{% block content %} {% block content %}
<noscript class="d-block"> <noscript class="d-block">
<div class="alert alert-warning " role="alert"> <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"> <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="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"/> <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> </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> </div>
</noscript> </noscript>
@ -21,32 +18,35 @@
<div class="card-body row"> <div class="card-body row">
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
<video id="video" class="align-self-center">Video stream not available.</video> <video id="video" class="">Video stream not available.</video>
<div class="row align-self-center">
<button class=" btn btn-primary" name="print_picture" id="print_button" disabled=""> <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" disabled="">
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" fill="currentColor" class="bi bi-printer" viewBox="0 0 16 16"> <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="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"/> <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> </svg>
</button> </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" 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"> <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 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"/> <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> </svg>
</button> </button>
<div class="image_dither" id="image_dither">
<picture>
<img id="photo" class="align-self-center">
</picture>
</div>
</div> </div>
<hr> <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 reprensentation of what is printed on the thermal printer.</p>
</div>
<!-- </div> -->
</div> </div>