What Web Can Do Today?

Can I rely on the Web Platform features to build my app?

An overview of the device integration HTML5 APIs

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 ('srcObject' in mediaControl) {
          mediaControl.srcObject = stream;
        } else if (navigator.mozGetUserMedia) {
          mediaControl.mozSrcObject = stream;
        } else {
          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 onclick="getStream()">Grab video</button></p>
    <p><video autoplay style="height: 180px; width: 240px;"></video></p>
    <p><button 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" rel="noopener">Miguel Casas-Sanchez</a>.</small></p>

Resources

Get in touch