кадрирование видео с помощью Canvas и Traking.js - PullRequest
Новая
       35

кадрирование видео с помощью Canvas и Traking.js

0 голосов
/ 25 сентября 2018

Добрый день.Я использую tracking.js поверх <video> для обнаружения лиц.

https://i.stack.imgur.com/O3dwh.png

Теперь я пытаюсь обрезать и захватить только содержимое этого квадрата, нопри обрезке изображение моего лица находится в квадрате, но не определяется.

мой код ниже: 

<style>

    video {     
        width: 100%;
        height: auto;
    }
    .box{
        border:1px solid red;
        position: absolute;
        z-index:99999;
    }
</style>
<script src="<?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>

результат должен быть примерно таким, как здесь.

также я заметил, что у каждого монитора это обрезается по-разному.Я уже пытался исправить вручную, установив квадрат на свое лицо, но когда я нажимаю, чтобы сделать обрезку, это не правильно.

...