# MediaStream Image Capture API 🏙

aka Image Capture API

TIP

The ImageCapture interface of the MediaStream Image Capture API provides methods to enable the capture of images or photos from a camera.

# Examples

# Demo #1

Simple image capture

Code

navigator.mediaDevices.getUserMedia({ video: true })
    .then((stream) => {
      const track = stream.getVideoTracks()[0]
      const imageCapture = new ImageCapture(track)
    
      imageCapture.takePhoto()
        .then(blob => {
          // A Blob object represents a file-like object of immutable, raw data
          // Can be read as text or binary data, or converted into a ReadableStream so its methods can be used for processing the data.
          // Blobs can represent data that isn't necessarily in a JavaScript-native format.
          
          // Source image:
          // window.URL.createObjectURL(blob)
        })
    })
    .catch((err) => {
      // Handle error
    })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Demo #2

Image capture with live preview

Code

navigator.mediaDevices.getUserMedia({ video: true })
  .then((stream) => {
    // Show video in realtime
    videoPlayer.srcObject = stream
  })

1
2
3
4
5