Problems using the camera on mobile or tablet

Question

Good afternoon. I made a code that takes photo using webcam or camera phone

on desktop and android works and on iphone the screen gets black.

follows 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>&nbsp;' +
        '<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>&nbsp;' +
            '<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> 

someone can help me on how to make it work on iphone and ipad?