Taking invisible WebRTC/video photos without canvas/display

Question

I've read Taking still photos from MDN describing how you can capture photos from the web cam (using a video element and mediaDevices.getUserMedia) to show them to the user using a canvas.

However I do not need (and do not want) to display the taken image to the user and thus I also do not want to use a canvas as I'd say that first drawing a canvas just to get the image data (as ImageData or DataUri) could be bad for the performance.

So is there a way to get the image data without using canvas?

Answer 1

Using canvas is totally fine and performs well. Just don't attach the canvas to the document and it won't be shown. I think your concern about performance is unfounded.

The only other way to get data out of a stream would be MediaRecorder but it produces video at a given frame rate, not what you want, and much more involved.

There's talk of an imageCapture API, but it's not implemented in any browser yet, except behind a flag. It would offer a .takePhoto() method which would also give access to full-resolution photo cameras where available (i.e. phones).