|
|
|
|
@@ -1,6 +1,8 @@
|
|
|
|
|
let streaming;
|
|
|
|
|
var current_stream;
|
|
|
|
|
var current_camera_is;
|
|
|
|
|
var supports_facing_mode;
|
|
|
|
|
var camera_options;
|
|
|
|
|
|
|
|
|
|
var width = document.getElementById("video").parentNode.parentElement.clientWidth;
|
|
|
|
|
var height = width / (4 / 3);
|
|
|
|
|
@@ -29,32 +31,114 @@ async function startup(){
|
|
|
|
|
photo = document.getElementById('photo');
|
|
|
|
|
switch_cameras = document.getElementById('flip')
|
|
|
|
|
printButton = document.getElementById('print_button');
|
|
|
|
|
if ( await check_webcam() === true ){
|
|
|
|
|
|
|
|
|
|
console.log("Checking for client webcam capabilities");
|
|
|
|
|
// We have a camera_options dictionnary in return, or false if the device does not support webcams.
|
|
|
|
|
let client_webcam_capabilities = await check_webcam_capabilies();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ( client_webcam_capabilities != false ){
|
|
|
|
|
get_webcam(client_webcam_capabilities);
|
|
|
|
|
setup_events();
|
|
|
|
|
clear_canvas();
|
|
|
|
|
} else if ( await check_server_camera() === true){
|
|
|
|
|
console.log("The server has a camera, using it.");
|
|
|
|
|
} else {
|
|
|
|
|
no_webcam_error();
|
|
|
|
|
console.log("Seems like it's impossible to get a webcam.");
|
|
|
|
|
console.log("Checking for server webcam capabilities");
|
|
|
|
|
let server_webcam_capabilities = await check_server_camera();
|
|
|
|
|
if (server_webcam_capabilities === true ){
|
|
|
|
|
console.log("The server has a camera, using it.");
|
|
|
|
|
console.log("TODO");
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
no_webcam_error();
|
|
|
|
|
console.log("Seems like it's impossible to get a webcam from the client nor the server.");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function check_webcam(){
|
|
|
|
|
console.log("Cheking for a camera...");
|
|
|
|
|
if (await get_front_webcam()) {
|
|
|
|
|
console.log("Got front camera !");
|
|
|
|
|
return true;
|
|
|
|
|
async function check_webcam_capabilies(){
|
|
|
|
|
console.log("Checking for a the capabilities of the client's media devices");
|
|
|
|
|
|
|
|
|
|
// We try to start with the front facing camera,
|
|
|
|
|
// if we have no support, we switch back to a normal camera.
|
|
|
|
|
try {
|
|
|
|
|
// We first check if the navigator has a media device
|
|
|
|
|
if (!navigator.mediaDevices?.enumerateDevices) {
|
|
|
|
|
console.log("enumerateDevices() not supported.");
|
|
|
|
|
return false;
|
|
|
|
|
} else {
|
|
|
|
|
// List cameras and microphones.
|
|
|
|
|
console.log("The device has the following media devices : ")
|
|
|
|
|
await navigator.mediaDevices
|
|
|
|
|
.enumerateDevices()
|
|
|
|
|
.then((devices) => {
|
|
|
|
|
devices.forEach((device) => {
|
|
|
|
|
console.log(`${device.kind}: ${device.label} id = ${device.deviceId}`);
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
console.error(`${err.name}: ${err.message}`);
|
|
|
|
|
return false;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.log("The device does not seem to support webcams " + e);
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (await get_any_webcam()) {
|
|
|
|
|
console.log("Got a webcam !");
|
|
|
|
|
return true;
|
|
|
|
|
console.log("Checking for the supported constraints of the media devices ");
|
|
|
|
|
try {
|
|
|
|
|
const supports = navigator.mediaDevices.getSupportedConstraints();
|
|
|
|
|
if (!supports['facingMode']) {
|
|
|
|
|
throw new Error("This browser does not support facingMode!");
|
|
|
|
|
} else {
|
|
|
|
|
console.log("The device supports facing mode, selecting the front camera by default");
|
|
|
|
|
supports_facing_mode = true;
|
|
|
|
|
camera_options = {
|
|
|
|
|
video: {
|
|
|
|
|
facingMode: 'user', // Or 'environment' if we want a camera facing away
|
|
|
|
|
},
|
|
|
|
|
audio: false
|
|
|
|
|
};
|
|
|
|
|
return camera_options;
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.log("Resetting to default camera : " + e);
|
|
|
|
|
supports_facing_mode = false;
|
|
|
|
|
camera_options = {
|
|
|
|
|
video: true,
|
|
|
|
|
audio: false
|
|
|
|
|
};
|
|
|
|
|
return camera_options
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
console.log("Found no usable cameras on client device");
|
|
|
|
|
async function get_webcam(options){
|
|
|
|
|
stop_video_streams();
|
|
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
try {
|
|
|
|
|
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 the webcam stream");
|
|
|
|
|
|
|
|
|
|
printButton.removeAttribute("disabled","");
|
|
|
|
|
current_stream = stream;
|
|
|
|
|
video.srcObject = stream;
|
|
|
|
|
video.setAttribute('autoplay', '');
|
|
|
|
|
video.setAttribute('muted', '');
|
|
|
|
|
video.setAttribute('playsinline', '')
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function check_server_camera(){
|
|
|
|
|
@@ -63,8 +147,10 @@ async function check_server_camera(){
|
|
|
|
|
await socket.emit('get_camera_status', (response) => {
|
|
|
|
|
if (response){
|
|
|
|
|
console.log("Server has a camera !");
|
|
|
|
|
return true;
|
|
|
|
|
} else {
|
|
|
|
|
console.log("The server doesn't seem to have a camera");
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
@@ -100,7 +186,7 @@ function setup_events(){
|
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
|
|
switch_cameras.addEventListener('click', function(ev) {
|
|
|
|
|
flip_cameras();
|
|
|
|
|
flip_cameras(camera_options);
|
|
|
|
|
}, false );
|
|
|
|
|
|
|
|
|
|
printButton.addEventListener('click', function(ev){
|
|
|
|
|
@@ -171,26 +257,9 @@ function print_picture(data){
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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 flip_cameras(camera_options){
|
|
|
|
|
if ( supports_facing_mode ) {
|
|
|
|
|
get_webcam((camera_options.video.facingMode === 'user' ? 'environment' : 'user'));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@@ -211,84 +280,6 @@ function stop_video_streams(){
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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.setAttribute('autoplay', '');
|
|
|
|
|
video.setAttribute('muted', '');
|
|
|
|
|
video.setAttribute('playsinline', '')
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function get_any_webcam(){
|
|
|
|
|
var camera_options = {
|
|
|
|
|
video: {
|
|
|
|
|
facingMode: 'environment', // Or 'environment' if we want a camera facing away
|
|
|
|
|
},
|
|
|
|
|
audio: false
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if(await get_webcam(camera_options)){
|
|
|
|
|
console.log("Got any camera, or environment camera.");
|
|
|
|
|
current_camera_is = "any";
|
|
|
|
|
return true;
|
|
|
|
|
} else {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async 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(await 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.")
|
|
|
|
|
|
|
|
|
|
|