Good afternoon. I made a code that takes photo using the webcam or camera of the cellular
on the desktop and android works and on iphone the screen turns black.
Follow my cod
html
<div class="demo-container">
<canvas class='box' id="box"></canvas>
<video id="video" preload autoplay loop muted></video>
</div>
jquery
<script src="<?php url(); ?>/assets/js/html2canvas.js"></script>
<script language="JavaScript">
var sound = document.getElementById("audio");
var xG,yG,wG,hG = 0;
window.onload = function() {
var video = document.getElementById('video');
var tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
tracking.track('#video', tracker, { camera: {
width: {
ideal: 1920
},
height: {
ideal: 1080
}
} });
tracker.on('track', function(event) {
//context.clearRect(0, 0, canvas.width, canvas.height);
event.data.forEach(function(rect) {
//console.log('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
//console.log('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
$(".box").css('margin-left',rect.x);
$(".box").css('margin-top',rect.y);
$(".box").css('height',rect.height);
$(".box").css('width',rect.width);
videoW = 640;
videoH = 480;
videoWA = $("#video").width();
videoHA = $("#video").height();
xG = Math.round(videoW * rect.x / videoWA)-15;
yG = Math.round(videoH * rect.y / videoHA)-30;
hG = Math.round(videoH * rect.height / videoHA)+60;
wG = Math.round(videoW * rect.width / videoWA)+30;
//console.log(rect.width+ " | " +rect.height);
});
});
};
function capture(video, scaleFactor) {
if(scaleFactor == null){
scaleFactor = 1;
}
var w = video.videoWidth * scaleFactor;
var h = video.videoHeight * scaleFactor;
var canvas = document.createElement('canvas');
canvas.width = wG;
canvas.height = hG;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, xG, yG, wG, hG,0,0, wG, hG);
return canvas;
}
function shoot(){
sound.play();
var video = document.getElementById('video');
var img = document.getElementById('base64image');
var canvas = capture(video, 1);
// saida para post
var imgF = canvas.toDataURL('image/jpeg', 0.7);
swal({
title: '<strong>Atenção</strong>',
type: 'warning',
html:
'Você confirma o envio desta imagem ?' + '<br> ' +
'<br><img src="'+imgF+'"> ',
showCloseButton: true,
showCancelButton: true,
confirmButtonText:
'<i class="fa fa-thumbs-up"></i> Sim',
cancelButtonText:
'<i class="fa fa-thumbs-down"></i> Tirar outra',
showLoaderOnConfirm: true,
preConfirm: (login) => {
$.ajax({
type: "POST",
url: "<?php url(); ?>/cadastro-manual",
data: {
imgBase64: imgF,
loja: $("#loloja").val()
}
}).done(function(o) {
if(o=="0"){
swal.close();
swal({
type: 'error',
title: 'Oops...',
text: 'A face selecionada não pode ser detectada! Por favor tente novamente.',
})
} else {
window.location.replace("<?php url(); ?>/cliente/"+o);
}
});
},
allowOutsideClick: false
})
}
function readImage(inputElement) {
var deferred = $.Deferred();
var files = inputElement.get(0).files;
if (files && files[0]) {
var fr= new FileReader();
fr.onload = function(e) {
deferred.resolve(e.target.result);
};
fr.readAsDataURL( files[0] );
} else {
deferred.resolve(undefined);
}
return deferred.promise();
}
$('#fotof').on('click touchstart' , function(){
$(this).val('');
});
$("#fotof").change(function(e) {
readImage($(this)).done(function(base64Data){
swal({
title: '<strong>Atenção</strong>',
type: 'warning',
html:
'Você confirma o envio desta imagem ?' + '<br> ' +
'<br><center><img src="'+base64Data+'" class="img-responsive"></center> ',
showCloseButton: true,
showCancelButton: true,
confirmButtonText:
'<i class="fa fa-thumbs-up"></i> Sim',
cancelButtonText:
'<i class="fa fa-thumbs-down"></i> Tirar outra',
showLoaderOnConfirm: true,
preConfirm: (login) => {
$.ajax({
type: "POST",
url: "<?php url(); ?>/cadastro-manual",
data: {
imgBase64: base64Data,
loja: $("#loloja").val()
}
}).done(function(o) {
if(o=="0"){
swal.close();
swal({
type: 'error',
title: 'Oops...',
text: 'A face selecionada não pode ser detectada! Por favor tente novamente.',
})
} else {
window.location.replace("<?php url(); ?>/cliente/"+o);
}
});
},
allowOutsideClick: false
})
});
});
</script>
Can anyone help me with how to make iphone and ipad work?