I use clmtrackr to track my face, but when I set the width of video tag equal to 100%, it cannot track the face. And I try to set the width of canvas tag as same as the width of video tag, but it still cannot work.
<div style="text-align:center;">
<div style="border: 1px solid #ccc; display:inline-block; position:relative;">
<video id="inputVideo" width="100%" height="auto" autoplay></video>
<canvas id="canvas" width="100%" height="auto" style="position:absolute; top:0; left:0;"></canvas>
</div>
</div>
<script src="clmtrackr.min.js"></script>
<script type="text/javascript">
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("inputVideo"),
videoObj = { "video": true },
videoFace = document.getElementById("video-face"),
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
// Not adding `{ audio: true }` since we only want video now
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
});
} else if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
var ctracker = new clm.tracker();
ctracker.init();
ctracker.start(video);
function positionLoop() {
requestAnimationFrame(positionLoop);
var positions = ctracker.getCurrentPosition();
}
positionLoop();
function drawLoop() {
requestAnimationFrame(drawLoop);
context.clearRect(0, 0, canvas.width, canvas.height);
ctracker.draw(canvas);
}
drawLoop();
});
</script>
Why it cannot work track the face unless set the video's width equal to 640, and video's height equal to 480? How to fix it with responsive width='100%' and height='auto'?
Your webcam resolution should be 640x480 and you're trying to take a frame with higher resolution (width='100%'). I had the same problem and fixed it by reducing the width-height attributes of the video element.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.