Advanced Camera Controls

The Image Capture API allows Web applications to control the advanced settings of the device's camera, such as zoom, white balance, ISO or focus points and take photos based on these settings. It relies on the streamVideoTrack object that might be obtained from the stream - see Audio & Video Capture.

API glimpse

capturer = ImageCapture(streamVideoTrack)
Creates an image capturer out of the Media Stream Video Track.
capturer.takePhoto()
Returns a Promise resolved with the photo taken with the current settings.
capturer.setOptions(photoSettings)
Configures the photoSettings for subsequent captures; if visible, the effects of the configuration can be seen in the Track used as input.

Live Demo

Demo by Miguel Casas-Sanchez.

  • function getUserMedia(options, successCallback, failureCallback) {
      var api = navigator.getUserMedia || navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia || navigator.msGetUserMedia;
      if (api) {
        return api.bind(navigator)(options, successCallback, failureCallback);
      }
    }
    
    var theStream;
    
    function getStream() {
      if (!navigator.getUserMedia && !navigator.webkitGetUserMedia &&
        !navigator.mozGetUserMedia && !navigator.msGetUserMedia) {
        alert('User Media API not supported.');
        return;
      }
      
      var constraints = {
        video: true
      };
    
      getUserMedia(constraints, function (stream) {
        var mediaControl = document.querySelector('video');
        if (navigator.mozGetUserMedia) {
          mediaControl.mozSrcObject = stream;
        } else {
          mediaControl.srcObject = stream;
          mediaControl.src = (window.URL || window.webkitURL).createObjectURL(stream);
        }
        theStream = stream;
      }, function (err) {
        alert('Error: ' + err);
      });
    }
    
    function takePhoto() {
      if (!('ImageCapture' in window)) {
        alert('ImageCapture is not available');
        return;
      }
      
      if (!theStream) {
        alert('Grab the video stream first!');
        return;
      }
      
      var theImageCapturer = new ImageCapture(theStream.getVideoTracks()[0]);
    
      theImageCapturer.takePhoto()
        .then(blob => {
          var theImageTag = document.getElementById("imageTag");
          theImageTag.src = URL.createObjectURL(blob);
        })
        .catch(err => alert('Error: ' + err));
    }
  • <p><button class="btn btn-lg btn-default" onclick="getStream()">Grab video</button></p>
    <p><video autoplay style="height: 180px; width: 240px;"></video></p>
    <p><button class="btn btn-lg btn-default" onclick="takePhoto()">Take Photo!</button></p>
    <p><img id="imageTag" width="240" height="180"></p>
    
    <p><small>Demo by <a href="http://www.mcasas.tk/" target="_blank">Miguel Casas-Sanchez</a>.</small></p>

Resources