Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Access from the Browser to Camera

I have one question about access to the camera from the browser. (Android and iOS browser)

Google and Apple announced 1 year ago, that the access from the browser to the camera should be available soon.

I need this function for a mobile Web Application.

Is this feature available now?

like image 898
alexander-fire Avatar asked Sep 12 '11 12:09

alexander-fire


4 Answers

try the following:

<html>
<body>
<form>
<input type="file" accept="image/*;capture=camera"/>
<input type="submit"/>
</form>
</body>
</html>
like image 143
Mahammad Avatar answered Oct 18 '22 02:10

Mahammad


I did using the input, as they said here, and worked really good on iOs. I could get a picture from camera or photo album and set an img element.

Here is the code: http://jsfiddle.net/2wZgv/

The js:

<script>

    oFReader = new FileReader();

    oFReader.onload = function (oFREvent) {     
        document.getElementById("fotoImg").src = oFREvent.target.result;
        document.getElementById("fotoImg").style.visibility = "visible"; 
        var screenHeight = screen.availHeight;
        screenHeight = screenHeight - 220;
        document.getElementById("fotoImg").style.height = screenHeight;
    };

    $(function() {
        $("input:file").change(function (){
            var input = document.querySelector('input[type=file]');
            var oFile = input.files[0];
            oFReader.readAsDataURL(oFile);  
        });
    });

</script>

picture photo album mobile jquery camera

like image 40
CarinaPilar Avatar answered Oct 18 '22 02:10

CarinaPilar


This is the w3c draft

After reading it the input tag should be

<input type="file" accept="image/*" capture="camera" id="capture"> 
like image 37
verbedr Avatar answered Oct 18 '22 00:10

verbedr


Try this stuff.

<video id="Video" autoplay="autoplay" audio="muted" width="100%" height ="100%"> </video>

<script type="text/javascript">
if (navigator.getUserMedia) {
    var video = document.getElementById('Video');
    video.src = null;
    navigator.getUserMedia('video', successCallback, errorCallback);
    //if everything if good then set the source of the video element to the mediastream
    function successCallback(stream) {
        video.src = stream;
    }
    //If everything isn't ok then say so
    function errorCallback(error) {
        alert("An error occurred: [CODE " + error.code + "]");
    }
}
else {
    //show no support for getUserMedia
    alert("Native camera is not supported in this browser!");
}
</script>

But remember this will work only with Opera Mobile for Android. No other browser right now supporting with camera access. Up to my knowledge iOS won't support this feature now, may be in future.

Thank You.

like image 43
5 revs, 3 users 75% Avatar answered Oct 18 '22 02:10

5 revs, 3 users 75%