キャンバスctx.stroke（）正常に動作しない/正しく表示されています（JavaScript、Chrome）

Question

私はキャンバスにウェブカメラのストリームを持っており、矩形を上に表示するのに問題があります。ウェブカメラのストリームが機能します。 問題が長方形が表示されないということです、そして時には、迅速な長方形のフラッシュがある（そしてかなりぼやけがあまりにも...）キャンバスのセットアップに

ウェブカメラ：上

const canvas = document.querySelector('.photo'); 
const ctx = canvas.getContext('2d'); 

// gets the video stream from the user's webcam 
function getVideo() { 
navigator.mediaDevices.getUserMedia({ 
    video: true, 
    audio: false 
}).then(localMediaStream => { 
    video.src = window.URL.createObjectURL(localMediaStream); 
    video.play(); 
}).catch(err => { 
    console.error('oh no', err); 
}); 
} 

// Applies the webcam stream to a canvas 
function paintToCanvas() { 
const width = video.videoWidth; 
const height = video.videoHeight; 
canvas.width = width; 
canvas.height = height; 

return setInterval(() => { 
    ctx.drawImage(video, 0, 0, width, height); 
}, 16); 
} 

ドロー矩形上：

function drawRectangle() { 
    ctx.rect(150, 150, 50, 30); 
    ctx.lineWidth = 2; 
    ctx.strokeStyle = '#FF0000'; 
    ctx.stroke(); 
} 
drawRectangle(); 

私は異なるストローク、線幅、および領域を試しましたが、同じ結果です。 私は何が間違っていますか？なぜそれが時々点滅して（ページの読み込み時に）点在していないのですか？

Answer 1

あなたは代わりのsetInterval

ブラウザは、それはビューポートの更新時に図面が起こるかその方法のrequestAnimationFrameのを使用する必要があります。ここで

Drawing a shape in Canvas on repeat

function draw() { 
    requestAnimationFrame(draw); 
    ctx.drawImage(video, 0, 0, width, height); 
} 

function paintToCanvas() { 
const width = video.videoWidth; 
const height = video.videoHeight; 
canvas.width = width; 
canvas.height = height; 
requestAnimationFrame(draw); 
} 

Answer 2

私はそれを修正するために追加するものです。

let startTime; 
    const interval=1; 

    requestAnimationFrame(animate); 

    function animate(t){ 
    requestAnimationFrame(animate); 
    if(!startTime){startTime=t;} 
    if(t-startTime<interval){return;} 
    startTime=t; 
    drawRectangle(); 
    } 

ごとにミリ秒（私の選択）形状が描かれています。テストされ、動作します。 関数の外でdrawRectangleの呼び出しを停止し、ページ読み込み時にFlashがなくなりました。