Camera Capture with Additional Overlay

Question

I have developed a WebApplication, which basically allows User to register and upload Photographs But As its a Mobile Ready web app, User can capture real time photo and upload it. Now I have been asked to check if its possible to provide a Human Like Overlay while capturing the picture, so in other words When User try to capture he can see a SHOULDER WITH HEAD OUTLINE on the screen, so he matches himself into the outline and capture it..

I m using HTML5 and do understand that it will be either through some plugin or else NATIVE APP (which doesnt help me in this case).

So Anyone out there tried such things or do know if we can do it or not ? (see attached to understand more ) enter image description here

Thank you in advance.

Answer 1

That will depend on the devices you need to support.

For the ones that do support getUserMedia API, it's quite simple, you just have to position your overlay over the video stream you get from the camera, and take a snapshot of this video using a canvas.

navigator.mediaDevices.getUserMedia({
  video: true
})
.then(function(stream) {

  vid.onloadedmetadata = function() {
    this.width = overlay.width = this.videoWidth;
    this.height = overlay.height = this.videoHeight;
  }
  vid.srcObject = stream;
  vid.play();
  overlay.onclick = function() {
    var c = document.createElement('canvas');
    c.width = vid.videoWidth;
    c.height = vid.videoHeight;
    c.getContext('2d').drawImage(vid, 0, 0);
    c.toBlob(doWhatYouWantWithTheCapturedImage);
  };
})
.catch(function(err) {
  console.error(err);
  document.body.innerHTML = '<a href="https://jsfiddle.net/3m4gj7dq/">Please try from jsfiddle</a>';
});

function doWhatYouWantWithTheCapturedImage(blob) {
  var url = URL.createObjectURL(blob);
  var img = new Image();
  img.onload = function() {
    URL.revokeObjectURL(url);
  };
  img.src = url;
  URL.revokeObjectURL(vid.src);
  overlay.parentNode.appendChild(img);
  vid.parentNode.removeChild(vid);
  overlay.parentNode.removeChild(overlay);
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
}

<video id="vid"></video>
<img id="overlay" src="data:image/png;base64,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"
/>

But this API is not supported by iOS < 11.

What you seem to be using however, is served directly by the OS, just as a file input dialog, and can't be modified/personalized.