Javascript Clmtrackr无法处理响应性强的html5摄像头视频

我使用clmtrackr跟踪我的脸，但当我将视频标签的宽度设置为100%时，它无法跟踪脸。我尝试将canvas标签的宽度设置为与video标签的宽度相同，但仍然无法工作

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

//将事件侦听器放置到位
addEventListener（“DOMContentLoaded”，function（））{
//抓取元素、创建设置等。
var canvas=document.getElementById（“canvas”），
context=canvas.getContext（“2d”），
video=document.getElementById（“inputVideo”），
videoObj={“video”：true}，
videoFace=document.getElementById（“视频面”），
errBack=函数（错误）{
日志（“视频捕获错误：”，错误代码）；
};
if（navigator.mediaDevices&&navigator.mediaDevices.getUserMedia）{
//不添加“{audio:true}”，因为我们现在只需要视频
navigator.mediaDevices.getUserMedia（{video:true}）。然后（函数（流）{
video.src=window.URL.createObjectURL（流）；
video.play（）；
});
}else if（navigator.getUserMedia）{//Standard
getUserMedia（videoObj，函数（流）{
video.src=流；
video.play（）；
}，errBack）；
}else if（navigator.webkitGetUserMedia）{//WebKit前缀
webkitGetUserMedia（videoObj，函数（流）{
video.src=window.webkitURL.createObjectURL（流）；
video.play（）；
}，errBack）；
}
var ctracker=new clm.tracker（）；
ctracker.init（）；
ctracker.start（视频）；
函数positionLoop（）{
requestAnimationFrame（positionLoop）；
var positions=ctracker.getCurrentPosition（）；
}
positionLoop（）；
函数drawLoop（）{
requestAnimationFrame（drawLoop）；
clearRect（0，0，canvas.width，canvas.height）；
ctracker.draw（画布）；
}
drawLoop（）；
});

为什么除非将视频的宽度设置为640，视频的高度设置为480，否则无法跟踪人脸？

---

如何使用响应式width='100%'和height='auto'修复它？

您的网络摄像头分辨率应为640x480，并且您正在尝试使用更高分辨率（width='100%'）的帧。我也遇到了同样的问题，并通过减少视频元素的宽度-高度属性来修复它。

您的网络摄像头分辨率应为640x480，并且您正在尝试拍摄分辨率更高的帧（宽度为100%）。我也有同样的问题，并通过减少视频元素的宽度-高度属性来修复它