Showing camera view inside html in android and then snap a picture

Question

Is there a view of showing the live camera view inside html ( e.g. embedded in a div ) before we snap a picture using JavaScript? I have tried PhoneGap but it totally starts

Answer 1

I did it for one of my projects. Check out navigator.getUserMedia(). There are a tonne of things you can do with your webcam and browser, including AR games! Here's just a basic example:

HTML:

findit.js

    var onFailSoHard = function(e)
    {
            console.log('failed',e);
    }

    window.URL = window.URL || window.webkitURL ;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;

    var video = document.querySelector('video');

    if(navigator.getUserMedia)
    {
        navigator.getUserMedia({video: true},function(stream) {
        video.src = window.URL.createObjectURL(stream);
        },onFailSoHard);
    }

    document.getElementById('snapshot').onclick = function() { 
        var canvas = document.getElementById('canvas'); 
        var ctx = canvas.getContext('2d'); 
        ctx.drawImage(video,0,0); 
    } 

Live Demo:

A personal project

More Resources, this is what I used:

Webcam Access

Update:

This solution is valid only for front camera if our device has one. It's basically a "webcam" solution. Not sure if it'll work for your case. Just in case, check out the resources.