Я использую clmtrackr для отслеживания своего лица, но когда я устанавливаю ширину видео-тега равной 100%, он не может отслеживать лицо. И я пытаюсь установить ширину тега canvas так же, как ширина тега video, но он все равно не может работать.

{amp}lt;div style="text-align:center;"{amp}gt; {amp}lt;div style="border: 1px solid #ccc; display:inline-block; position:relative;"{amp}gt; {amp}lt;video id="inputVideo" width="100%" height="auto" autoplay{amp}gt;{amp}lt;/video{amp}gt; {amp}lt;canvas id="canvas" width="100%" height="auto" style="position:absolute; top:0; left:0;"{amp}gt;{amp}lt;/canvas{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script src="clmtrackr.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script type="text/javascript"{amp}gt; // 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 {amp}amp;{amp}amp; 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(); }); {amp}lt;/script{amp}gt; 

Почему не может работать отслеживание лица, если не установить ширину видео, равную 640, и высоту видео, равную 480? Как это исправить с отзывчивыми width = ‘100%’ и height = ‘auto’?

Разрешение вашей веб-камеры должно быть 640×480, и вы пытаетесь снять кадр с более высоким разрешением (ширина = ‘100%’). У меня была та же проблема, и я исправил ее, уменьшив атрибуты width-height элемента video.