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;
var current_stream;
var current_camera_is;
var width = document.getElementById("video").parentNode.parentElement.clientWidth;
var height = width / (4 / 3);
@ -9,58 +12,28 @@ 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;
}
return true;
if (get_any_webcam()) {
console.log("Got a webcam !");
return true;
}
console.log("Nope");
return false;
}
function setup_events(){
@ -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);

View File

@ -2,56 +2,56 @@
{% block content %}
<noscript class="d-block">
<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="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 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>
</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>
</div>
</div>
<hr>
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="">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" 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="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">
<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>
<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>
</div>
<style media="screen">
canvas {
display: none;