추적 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

잠시 시간을내어 읽으십시오. 다음 주제 : http://stackoverflow.com/help/someone-answers 감사합니다! –

당신은 getUserMedia API를 사용하고 <a> 요소에 download 속성을 사용할 수 있습니다. 그것은 조금 까다로운 그리고 모든 브라우저에서 사용할 수 없습니다 :

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

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

이 참조를 유지 : 스냅 샷을 트리거하는 방법을 만들기

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); 
    }); 
});

먼저 캔버스에 비디오를 그려 사용자 미디어 :

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

행동 here에있는 모든 코드를 거친 데모를 참조하십시오 . 동영상을 클릭하면 이미지를 저장해야합니다 (참고 : 최신 Chrome 사용, 좌표를 미세 조정해야 할 수 있습니다. 검색이 올바르게 완료되면 스냅 샷을 클릭해야합니다).

출처

2016-11-04 09:56:08

추적 js에서 얼굴을 탐지 한 후 이미지를 캡처하는 방법

답변

관련 문제