15

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?

1
  • 3
    Update (Oct 2012) this feature is now available in ios6 & android 3+ Oct 12, 2012 at 23:17

5 Answers 5

9

try the following:

<html>
<body>
<form>
<input type="file" accept="image/*;capture=camera"/>
<input type="submit"/>
</form>
</body>
</html>
2
  • 3
    Please write at least a small explanation of your code.Thanks. Oct 26, 2012 at 11:43
  • Works with Android default browser. Thanks. Sep 4, 2013 at 13:21
7

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>

3
  • Unfortunately, I just realized that doesn't work on Android... It shows "low memory" to complete... =/ Sep 16, 2013 at 12:32
  • To work with Android you have to decrease photo quality, so it loads on browser... Sep 18, 2013 at 13:06
  • thanks alot @CarinaPilar but i am trying to save the selected image to local disk on a button click. so how can we do it?? Mar 23, 2016 at 15:31
5

This is the w3c draft

After reading it the input tag should be

<input type="file" accept="image/*" capture="camera" id="capture"> 
4

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.

3
  • 2
    Chrome and Firefox support getUserMedia with vendor prefixes. Support: caniuse.com/#feat=stream
    – eikes
    Dec 5, 2012 at 16:54
  • I'm trying to use a similar guide... but I cannot get the img#show-picture to update and replace the blank image with the image captured by the input field. See here: robnyman.github.io/camera-api
    – ATSiem
    May 18, 2013 at 20:44
  • I forgot to load jQuery with the example above!
    – ATSiem
    May 18, 2013 at 21:48
-1

This is possible. You can access camera through your browser application. If you are developing through Phone Gap then look for http://docs.phonegap.com/phonegap_camera_camera.md.html

This is the camera API in PhoneGap to access camera.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.