Photo Capture Using Webcam

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:

  1. Getting a video stream from the webcam and rendering it on a <video> element.
  2. Taking a snapshot of the video and rendering it on a <canvas> element.
  3. Converting the canvas image to an image data blob to allow saving.

Switching webcams

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.

About this demo


Last updated

Sep 1, 2015


Fork on GitHub to contribute