MENU


Image Capture API

This shows how to capture an image snapshot using the camera of the user's device.

getUserMedia() is a powerful feature that can only be used in secure HTTPS contexts.

If you have a deviceId, obtainable from the promise navigator.mediaDevices.enumerateDevices(), you can use it to request a specific device.

To use the rear camera, set: facingMode: { exact: "environment" }.

You can also change the constraints of an existing MediaStreamTrack on the fly, by calling the track's applyConstraints() method, passing into it an object representing the constraints you wish to apply to the track. You can also access the settings of a track with imageCapture.track.getSettings().
RESETRUNFULL
<!DOCTYPE html><html><body>
   <video autoplay style="width:640px; height:480px;filter:grayscale(80%)"> </video>
   <canvas width="320" height="240"></canvas>
   <img style="width:320px; height:240px"/>
   <button onclick="grabFrame()">Grab Frame</button>
   <script>
      var imageCapture;
      navigator.mediaDevices.getUserMedia({
         audio: false,
         video: {   // 'true' to use default values
            // deviceId: myPreferredCameraDeviceId,
            facingMode: "user",
            frameRate: { ideal: 10, max: 15 }, // frm. per second
            width: { min: 320, ideal: 640, max: 1920 },
            height: { min: 240, ideal: 480, max: 1080}}}).then(mediaStream => {
         document.querySelector('video').srcObject = mediaStream;
         imageCapture = new ImageCapture(mediaStream.getVideoTracks()[0]);
      });
      async function grabFrame() {
         const img = await imageCapture.grabFrame();
         /* alternative:
         const img = await createImageBitmap(await imageCapture.takePhoto());
         */
         document.querySelector('canvas').getContext('2d').drawImage(img, 0, 0, 640, 480, 0, 0, 320, 240);
         document.querySelector("img").src = URL.createObjectURL(await imageCapture.takePhoto());
         console.log(await imageCapture.getPhotoCapabilities());
         console.log(await imageCapture.getPhotoSettings());
      }
   </script>
</body></html>