Capturing an image from your webcam using JavaScript
4 years ago
This post is a bit of an update on one of my popular posts from a few years ago – Webcam to Canvas or data URI with HTML5 and Javascript
I thought I’d do an updated post on how to get an image from webcam using current web APIs. This time we’ll be using the Media Stream API.
To start off, we need to create a couple of HTML elements – a button and an img tag:
<button id="takephoto">Take Photo</button>
<img id="img" />
For the JavaScript we’ll start by getting the video devices that are available:
let mediaStream;
try {
mediaStream = await navigator.mediaDevices.getUserMedia({ video: true })
} catch (error) {
console.error('getUserMedia() error:', error)
}
READ MORE