This demo page shows how to use the Media Capture and Streams API for capturing photos from webcam video streams through a canvas. There are three major steps:
- Getting a video stream from the webcam and rendering it on a <video> element.
- Taking a snapshot of the video and rendering it on a <canvas> element.
- Converting the canvas image to an image data blob to allow saving.
When there are multiple webcam devices, you can switch the webcams when you are using a browser that supports the API for capture device enumeration and selection.