TIL about the Image Capture API

POSTED ON: Mar 06, 2022

The Image Capture API which helps us to capture an image or grab a frame from the video devices(like webcam). Not only that, you can also perform actions on capturing an image or grabbing a frame.

NOTE: The end user does need to give the code permission to do so.

navigator.mediaDevices.getUserMedia({video: true})
  .then(mediaStream => {
     document.querySelector('video').srcObject = mediaStream;
     const track = mediaStream.getVideoTracks()[0];
     setTrack(track);
  }).catch(error => {
     console.error(` ${error} is not yet supported`);
     setError(error);
});

In the blog post, there's also other use-cases.
Like taking screenshots, or streaming the video.

You can check out the demo: https://demo.greenroots.info/web-apis/web-apis-image-capture/

via Tapas Adhikary's 10 lesser-known Web APIs you may want to use

Related TILs

Tagged: browser

TIL minimal responsive image component

So when I saw that JS frameworks made image wrapper components (like Nuxt was with nuxt-img), I was blown away and wanted this power at work.

Mar 22, 2023

TIL why google recommends you avoid document.write()

By injecting it with code, it bypasses the preload scanner. This means that the browser can’t request this file until it’s actually run the '<script>' block that inserts it, which is very much just-in-time (and too late).

Mar 03, 2023

TIL the history of fonts and COLRv1

COLRv1 fonts, have a smaller footprint, vector-scalable, reposition-able, gradient-featuring, and blend-mode powered fonts that accept parameters to customize the font per use case or to match a brand.

Feb 23, 2023