ウェブカメラからキャンバスに背景画像を設定する

Question

私の目標はウェブカメラの背景画像に設定されています。ボタンをクリックするたびに、背景画像が変わるはずです。私は更新機能でWebカメラから画像を描画しています。しかし問題があります。背景画像は常に変化しています。私は更新機能でこのイメージを描く必要があります。

window.onload = function() { 
 

 
    backgroundImage = null; 
 

 
    // Grab elements, create settings, etc. 
 
    var video = document.getElementById('video'); 
 

 
    // Get access to the camera! 
 
    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(); 
 
    }); 
 
    } 
 

 
    //get canvas and context element 
 
    var c = document.getElementById("canvas"); 
 
    var ctx = c.getContext("2d"); 
 

 
    // Trigger photo take 
 
    document.getElementById("snap").addEventListener("click", function() { 
 
    backgroundImage = video; 
 
    }); 
 

 
    //call update function every 80 nanoseconds 
 
    setInterval(function() { 
 
    update(c, ctx); 
 
    }, 80); 
 
} 
 

 

 
function update(c, ctx) { 
 
    if (backgroundImage) { 
 
    ctx.drawImage(backgroundImage, 0, 0, 640, 480); 
 
    } 
 
    ctx.rect(20, 20, 150, 100); 
 
    ctx.stroke(); 
 
}

<video id="video" width="640" height="480" autoplay></video> 
 
<button id="snap">Snap Photo</button> 
 
<canvas id="canvas" width="640" height="480"></canvas>

Answer 1

次に、あなたの目に見える1に、このオフスクリーンキャンバスを描く、スナップショットを取るためにオフスクリーンキャンバスを使用する必要があります。

とChromeのためのライブfiddle

//get canvas and context element 
 
var c = document.getElementById("canvas"); 
 
var ctx = c.getContext("2d"); 
 
// create an offscreen canvas to take your snapshots 
 
var snapper = c.cloneNode().getContext('2d'); 
 

 
window.onload = function() { 
 

 
    // Grab elements, create settings, etc. 
 
    var video = document.createElement('video'); 
 

 
    // Get access to the camera! 
 
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { 
 
    // Not adding `{ audio: true }` since we only want video now 
 
    navigator.mediaDevices.getUserMedia({ 
 
     video: true 
 
    }).then(function(stream) { 
 
     // don't use createObjectURL(stream), it's deprecated because it locks hardware 
 
     video.srcObject = stream; 
 
     video.play(); 
 
    }) 
 
    .catch(e =>{ 
 
     console.log('Please visit the https fiddle at https://jsfiddle.net/Kaiido/7uugy7td/'); 
 
     }); 
 
    } 
 
    // Trigger photo take 
 
    document.getElementById("snap").addEventListener("click", function() { 
 
    // draw the video's current frame on the off-screen canvas 
 
    snapper.drawImage(video, 0, 0); 
 
    }); 
 
} 
 

 

 
function update() { 
 
    // draw our offscreen canvas on the visible one. 
 
    ctx.drawImage(snapper.canvas, 0, 0, 640, 480); 
 
    ctx.rect(20, 20, 150, 100); 
 
    ctx.stroke(); 
 
    // don't use setInterval for animations 
 
    requestAnimationFrame(update); 
 
} 
 
update();

<button id="snap">Snap Photo</button> 
 
<canvas id="canvas" width="640" height="480"></canvas>

。