DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Yaser Adel Mehraban
Yaser Adel Mehraban

Posted on • Originally published at yashints.dev

Take a selfie 🀳 using Image Capture API and a few lines of code

It's been a while since I last wrote about Intersection Observer V2, partly because I had a lot on my plate and I was feeling exhausted and partly because I was working on my first PluralSight course on web performance for PWAs.

But I am back, and this time we're going to review how to take a selfie from your webcam using Image Capture API.

Image Capture API

There are some really useful APIs which allow us to work with media like audio, video, etc. I will write about those too, but this time I wanted to show you how you can extract a frame from your video feed such as your webcam with a few lines of code.

Image Capture API enables us to capture an image or frame from video devices. In addition to capturing data, it also allows you to retrieve information about device capability such as image size, red-eye detection and whether or not there is flash turned on.

Usage

We need to take some actions to be able to work with media devices. First thing first we need to get a reference of the device:

navigator.mediaDevices.getUserMedia({ video: true })
  .then(mediaStream => {
    // Do something with the stream.
  })
Enter fullscreen mode Exit fullscreen mode

Next we need to get the visual parts of the media stream by calling getVideoTracks method of the mediaStream object:

const track = mediaStream.getVideoTracks()[0];
Enter fullscreen mode Exit fullscreen mode

Of course we're assuming that the first item in the array is the one you want to use, but don't worry if not, you can loop through all the tracks, find the one you need and either get it with its right index, or by calling getTrackById method.

After we've got our track, it's time to capture our image. If you wanted to configure some of the settings on your media device such as zoom level, you need to do it now before capturing our image:

const capabilities = track.getCapabilities();
// Check whether zoom is supported or not.
if(!capabilities.zoom) {
  return;
}

const zoom = capabilities.zoom.max - capabilities.zoom.min;

track.applyConstraints({ advanced : [{ zoom: zoom }] });
Enter fullscreen mode Exit fullscreen mode

When we're done with settings, we can then create an instance of the ImageCapture object:

let imageCapture = new ImageCapture(track);
Enter fullscreen mode Exit fullscreen mode

Once that's done, you can capture an image from your video feed by calling the takePhoto method:

imageCapture.takePhoto()
  .then(blob => createImageBitmap(blob))
  .then(imageBitmap => {
    // do something with the photo
  })
  .catch(error => console.error(error));
Enter fullscreen mode Exit fullscreen mode

Permissions

Similar to other APIs you would need permission to be able to access the webcam on devices. If you didn't see any pop up, make sure you give the camera permission to the site on your browser to be able to get your code working properly. You can try that with below demo.

Demo

You can see a working example of this in my CodePen below:

I hope you've learnt a new thing or two and till next time πŸ‘‹πŸ½.

Top comments (1)

Collapse
 
bias profile image
Tobias Nickel

wow, awesome, thanks for this article. just this weekend I was also playing with this API and also plan a little article.

I did not see getCapabilities API, actually, I hope to find something about focussing. Can`t wait to get in front of a PC and try it out.

5 Website To Learn Frontend Web Development Faster

In this article, Bentil Shadrack has curated 5 resourceful sites that will help you better you web development skills really fast.