Access from the Browser to Camera

Question

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?

Update (Oct 2012) this feature is now available in ios6 & android 3+ — Michael Mullany, Oct 12 '12 at 23:17

score 10 · Answer 1 · edited Apr 02 '12 at 11:33

10

try the following:

<html>
<body>
<form>
<input type="file" accept="image/*;capture=camera"/>
<input type="submit"/>
</form>
</body>
</html>

edited Apr 02 '12 at 11:33

Stefan

14,826
17
80
143

answered Feb 27 '12 at 11:21

Mahammad

109
1
3

3

Please write at least a small explanation of your code.Thanks. – Anup Cowkur Oct 26 '12 at 11:43
Works with Android default browser. Thanks. – Alexey Petushkov Sep 04 '13 at 13:21

score 7 · Answer 2 · answered Sep 14 '13 at 03:04

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

Unfortunately, I just realized that doesn't work on Android... It shows "low memory" to complete... =/ — CarinaPilar, Sep 16 '13 at 12:32
To work with Android you have to decrease photo quality, so it loads on browser... — CarinaPilar, Sep 18 '13 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?? — bhavikshah28, Mar 23 '16 at 15:31

score 5 · Answer 3 · answered Mar 09 '12 at 08:36

5

This is the w3c draft

After reading it the input tag should be

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

answered Mar 09 '12 at 08:36

verbedr

1,784
1
15
18

score 4 · Answer 4 · edited Dec 05 '12 at 16:52

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.

edited Dec 05 '12 at 16:52

eikes

4,811
2
31
31

answered Apr 13 '12 at 06:15

nim007

2,958
3
16
28

2

Chrome and Firefox support getUserMedia with vendor prefixes. Support: http://caniuse.com/#feat=stream – eikes Dec 05 '12 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: http://robnyman.github.io/camera-api/ – ATSiem May 18 '13 at 20:44
I forgot to load jQuery with the example above! – ATSiem May 18 '13 at 21:48

score -1 · Answer 5 · answered Sep 15 '11 at 04:17

-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.

answered Sep 15 '11 at 04:17

Amit Gupta

39
2

Access from the Browser to Camera

5 Answers5

Linked