トラッキングjsで顔検出後に画像をキャプチャする方法

私はtracking jsを顔検出に使用しています。私は正常に顔を検出したが、私は画像フレームをキャプチャする方法を知らない。私は画像として検出された顔を保存したい。これは私のHTMLページです：トラッキングjsで顔検出後に画像をキャプチャする方法

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>tracking.js - face with camera</title> 

    <script src="../tracking.js-master/build/tracking-min.js" type="text/javascript"></script> 
    <script src="../tracking.js-master/build/data/face-min.js"></script> 

    <link rel="stylesheet" type="text/css" href="face.css"> 

</head> 
<body> 

    <div class="demo-frame"> 
     <video id="video" class="face-video" width="740" height="560" preload autoplay loop muted></video> 
     <canvas id="canvas" class="face-canvas" width="740" height="560"> </canvas> 
    </div> 

    <script src="faceDetection.js" type="text/javascript"></script> 

</body> 
</html>

そして、これは私のfaceDetection.jsファイルです：

window.onload = function() { 
    var video = document.getElementById('video'); 
    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 
    var tracker = new tracking.ObjectTracker('face'); 
    tracker.setInitialScale(6); 
    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) { 
     context.strokeStyle = '#ff0000'; 
     context.strokeRect(rect.x, rect.y, rect.width, rect.height); 
     context.font = '11px Helvetica'; 
     context.fillStyle = "#fff"; 
     context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11); 
     context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22); 
    }); 
    }); 
};

出典

2016-11-04 Jai Prak

しばらく時間をとってこのSOのトピックを読んでください：http://stackoverflow.com/help/someone-answersありがとう！ –

あなたはgetUserMedia APIを使用して<a>要素にdownload属性を使用することができます。それは少しトリッキーだし、すべてのブラウザでは利用できません。

まず、キャンバス上のビデオを描く：

tracker.on('track', function(event) { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    event.data.forEach(function(rect) { 
    context.strokeStyle = '#ff0000'; 
    context.strokeRect(rect.x, rect.y, rect.width, rect.height); 
    context.font = '11px Helvetica'; 
    context.fillStyle = "#fff"; 
    context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11); 
    context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22); 
    context.drawImage(video, rect.x, rect.y, rect.width, rect.height, rect.x, rect.y, rect.width, rect.height); 
    }); 
});

は、スナップショットをトリガーする方法を作成します。

var snapshot = function() { 
    if (localMediaStream) { 
    document.querySelector('a').href = canvas.toDataURL('image/webp'); 
    } 
} 

video.addEventListener('click', snapshot, false);

を参照してくださいユーザーメディアへ：

navigator.getUserMedia({video: true}, function(stream) { 
    localMediaStream = stream; 
}, function(error){console.error(error)});

アクションhereのすべてのコードを参照してください。動画をクリックすると画像が保存されます（注：最新のChromeを使用する;座標を微調整する必要があります;検出が正しく行われた後で必ずスナップショットをクリックしてください）。

出典

2016-11-04 09:56:08

トラッキングjsで顔検出後に画像をキャプチャする方法

答えて

関連する問題