").addClass('photoFrameInfo').prependTo(pointPhoto.frame);
pointPhoto.modalCallback = function(result){
if(result=='closing'){
pointPhoto.modal = false;
if(pointPhoto.videostream){
pointPhoto.videostream.getTracks().forEach( (track) => {
track.stop();
});
}
}
}
// Put variables in global scope to make them available to the browser console.
pointPhoto.constraints = window.constraints = {
audio: false,
video: {
width: {ideal:640},
height: {ideal:480},
facingMode: pointPhoto.facingmode
}
};
pointPhoto.frontBack = function(){
clearInterval(pointPhoto.sizeInterval);
if(pointPhoto.videostream){
pointPhoto.videostream.getTracks().forEach( (track) => {
track.stop();
});
}
pointPhoto.facingmode = (pointPhoto.facingmode=="user"?"environment":"user");
pointPhoto.constraints = window.constraints = {
audio: false,
video: {
width: {ideal:640},
height: {ideal:480},
facingMode: pointPhoto.facingmode
}
};
pointPhoto.init();
}
pointPhoto.success = function(stream){
pointPhoto.videostream = stream;
pointPhoto.video = $('video',pointPhoto.stream)[0];
pointPhoto.videoTracks = stream.getVideoTracks();
console.log('Got stream with constraints:', pointPhoto.constraints);
console.log(`Using video device: ${pointPhoto.videoTracks[0].label}`);
console.log(pointPhoto.videoTracks);
window.stream = stream; // make variable available to browser console
pointPhoto.video.srcObject = stream;
}
pointPhoto.initButtons = function(){
$('.shootButton').on('click',function(){
pointPhoto.shoot();
});
$('.frontBackButton').on('click',function(){
pointPhoto.frontBack();
});
$('.cancelButton').on('click',function(){
$('canvas',pointPhoto.capture).hide();
$('.shootButton',pointPhoto.control).css('display','inline-block');
$('.frontBackButton',pointPhoto.control).css('display','inline-block');
$('.cancelButton',pointPhoto.control).css('display','none');
$('.saveButton',pointPhoto.control).css('display','none');
});
$('.saveButton').on('click',function(){
var lID = "loader"+new Date().getTime();
var container = "body";
$.ajax({
type:"post",
url:scriptPath,
dataType: "json",
data : {fce:"savePoint",imgdata: $('canvas',pointPhoto.capture)[0].toDataURL("image/png"),fce:'savePoint',recid:vars.setup.record_id,mid:vars.setup.module_id,point_id:butt.data('pointid'),lat:method.position.coords.x,lng:method.position.coords.y},
beforeSend:function(){
ajaxLoader($(container),"ajaxLoaderPage",lID,'Ukládám fotografii',true,'center center','center center');
},
success:function(result){
ajaxLoaderRemove(lID);
pointPhoto.modal.closeModal();
},
error:function(jqXHR, status, thrownError) {
console.log(jqXHR.responseText);
ajaxLoaderRemove(lID);
}
});
});
}
pointPhoto.shoot = function(){
$('canvas',pointPhoto.capture).show();
var ww = $(window).width()*0.7;
var scale = ww / $('video',pointPhoto.stream).width();
pointPhoto.capture.css('transform','scale('+scale+')');
pointPhoto.capture.show();
var canvas = $('canvas',pointPhoto.capture)[0];
var video = $('video',pointPhoto.stream)[0];
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
$('.shootButton',pointPhoto.control).css('display','none');
$('.frontBackButton',pointPhoto.control).css('display','none');
$('.cancelButton',pointPhoto.control).css('display','inline-block');
$('.saveButton',pointPhoto.control).css('display','inline-block');
}
pointPhoto.changeSize = function(){
if(pointPhoto.modal){
$("#"+pointPhoto.modal.getid).show();
var ww = $(window).width()*0.7;
var video = $('video',pointPhoto.stream);
pointPhoto.info.html();
video.show();
video.w = video.width();
video.h = video.height();
var scale = ww / video.width();
pointPhoto.stream.css('width',video.w);
pointPhoto.stream.css('height',video.h);
pointPhoto.frame.css('height',video.h*scale);
pointPhoto.stream.css('transform','scale('+scale+')');
pointPhoto.modal.settings.width = ww;
pointPhoto.modal.resizeCenter();
}
}
pointPhoto.handleError = function(error) {
if (error.name === 'ConstraintNotSatisfiedError') {
const v = constraints.video;
pointPhoto.errorMsg(`The resolution ${v.width.exact}x${v.height.exact} px is not supported by your device.`);
} else if (error.name === 'PermissionDeniedError') {
pointPhoto.errorMsg('Permissions have not been granted to use your camera and microphone, you need to allow the page access to your devices in order for the demo to work.');
}
//$('.photoResultVms',method.modalPoint.content).html("Fotografii nebylo možné zachytit. Chyba zařízení.");
pointPhoto.errorMsg("Fotografii nebylo možné zachytit. Chyba zařízení.", error);
console.log(`getUserMedia error: ${error.name}`);
pointPhoto.modal.closeModal();
}
pointPhoto.errorMsg = function(msg, error) {
pointPhoto.info.html('
${msg}
');
if (typeof error !== 'undefined') {
$.vmsInfoBox({content:msg,icon:"times-square",type:"error"});
console.error(error);
}
}
pointPhoto.showModal = function(){
pointPhoto.modal = $.vmsModal({content:pointPhoto.frame,titleText:"Zachyť k bodu fotografii", titleIco:"camera", overlay:true, caller:pointPhoto, draggable:false,width:width+40,class:"photoModal"});
$("#"+pointPhoto.modal.getid).hide();
pointPhoto.getCameraSelection();
pointPhoto.init();
pointPhoto.initButtons();
}
pointPhoto.getCameraSelection = async () => {
const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = devices.filter(device => device.kind === 'videoinput');
const options = videoDevices.map(videoDevice => {
return `
`;
});
//cameraOptions.innerHTML = options.join('');
};
pointPhoto.init = async function(e) {
try {
const stream = await navigator.mediaDevices.getUserMedia(pointPhoto.constraints);
pointPhoto.success(stream);
pointPhoto.sizeInterval = setInterval(pointPhoto.changeSize,100);
} catch (e) {
pointPhoto.handleError(e);
}
}
pointPhoto.showModal();
}
method.init();
}