Clmtrackr cannot work with responsive html5 camera video

[TsaiKoga]

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

[lisct]

Hi There,

I realized that in order to work in responsive, you have to first load all the elements. Imagine that they load in opacity: 0, with the default settings with: 640 in the html, so you can't see it and then after it loads change it in the css to be width=100% and height: 100% according to their parent container.

The trick is that the user don't notice about the change, for that reason the opacity: 0.

That approach worked for me.