Video Crop using Canvas and Traking.js

Good afternoon. I'm using tracking.js over <video> to detect faces.

NowI'mtryingtocropandgrabonlythecontentsofthissquare.andthat'swheretheproblemis.inCroptheimageofmyfaceisneverthesameastheoneinthesquare.

followmycode

<style>video{width:100%;height:auto;}.box{border:1pxsolidred;position:absolute;z-index:99999;}</style><scriptsrc="<?php url(); ?>/assets/build/tracking-min.js"></script>
<script src="<?php url(); ?>/assets/build/data/face-min.js"></script>
<div class="demo-frame">
                                        <div class="demo-container">
                                          <div class='box' id='box'></div>                                      
                                          <video id="video" preload autoplay loop muted></video>                                          
                                        </div>
                                    </div>                                  
                                    <center>&nbsp;<br><button type="button" value="Snap It" onClick="shoot()" class='btn btn-lg btn-warning'><i class="fa fa-camera" aria-hidden="true"></i></button></center><br>
<div id="results" id="contentimg"><img id="base64image" src="<?php url(); ?>/img/nopicface.jpg" class="embed-responsive-item"/></div>


<script language="JavaScript">
    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: true });
        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);

                  xG = rect.x;
                  yG = rect.y;
                  hG = rect.height;
                  wG = rect.width;
                  //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 box  = document.getElementById('box'); 

    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(){

    var video  = document.getElementById('video'); 
    var img  = document.getElementById('base64image');    
    var canvas = capture(video, 1);  

    img.src = canvas.toDataURL();

}


</script>  

The result of this comes somewhat crude similar to this here.

And I noticed that on each monitor this crooked image is different. I already tried to correct it manually but the square is in the right position on my face always and when I click to make the crop it is not correct.