Capturing an image from your webcam using JavaScript
1 year ago
This post is a bit of an update on one of my popular posts from a few years ago – https://www.purplesquirrels.com.au/2013/08/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:
READ MORE
1
2
3
4
5
6
7 let mediaStream;
try {
mediaStream = await navigator.mediaDevices.getUserMedia({ video: true })
} catch (error) {
console.error('getUserMedia() error:', error)
}