Capture image from camera video feed into a canvas element, a Context2D instance, or an instance of ImageData

Question

I'm having trouble finding an example of how to capture an image from a camera video feed that works.

I've found this great example and this great one that gets me most of the way, but the image capture part fails.

How can an image be grabbed from a webcam video feed and placed in a canvas element, a Context2D instance, or an instance of ImageData?

Answer 1

You can use the canvas element. Try the code below:

var video = document.getElementById('myVideo');
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

This article might help.