Take picture from webcam or mobile camera in web applications

Question

I'm developing a web application which browse and take pictures from local and also I want to capture images through the camera. Im using the following code and i can capture device camera.

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

Now, I want to get the image and onchangeevent, convert to base64 and want to show in that page itself.

Kindly help me guys!

Possible duplicate of [How to access a mobile's camera from a web app?](http://stackoverflow.com/questions/8581081/how-to-access-a-mobiles-camera-from-a-web-app) — Mosh Feu, Feb 07 '16 at 13:12
Possible duplicate of [How to get base64 encoded data from html image](http://stackoverflow.com/questions/15760764/how-to-get-base64-encoded-data-from-html-image) — Mazzy, Feb 07 '16 at 14:07
This is not a duplicate, as he wants to display the image on page, presumably without having to upload it first. — Relaxing In Cyprus, Sep 11 '16 at 04:26
Possible duplicate of [accessing webcam in web pages](http://stackoverflow.com/questions/9533773/accessing-webcam-in-web-pages) — Sarin Jacob Sunny, Apr 11 '17 at 12:29
Here is an interesting library that does that. [https://github.com/jhuckaby/webcamjs](https://github.com/jhuckaby/webcamjs) — dimshik, Feb 07 '16 at 13:36

score 11 · Answer 1 · answered Jan 14 '18 at 17:06

11

Miles Erickson and Henock Bongi, you need to take reader.readAsDataUrl($data); out of the onload function in order that the onload fire.

If you don't want to use jQuery see below:

function readFile(file) {                                                       
    var reader = new FileReader();
    reader.onload = readSuccess;                                            
    function readSuccess(evt) {     
        document.getElementById("your_img_id").src = evt.target.result                   
    };
    reader.readAsDataURL(file);                                              
} 

document.getElementById('cameraInput').onchange = function(e) {
    readFile(e.srcElement.files[0]);
};

answered Jan 14 '18 at 17:06

Ana Houa

901
1
8
19

1

Whats the point in answering a 2 years old post? either way it's better to use URL.createObjectURL instead of using the FileReader – Endless Jan 14 '18 at 19:49
12

The point is for reference for people like me who take 20 min figuring out why reader.onload is not firring :) – Ana Houa Jan 14 '18 at 21:08
Yes you're right i forgot to take it out of onload function. Thanks! – Henock Bongi Oct 25 '18 at 13:12

score 10 · Accepted Answer · edited Sep 08 '17 at 20:20

10

You can do it like this:

$('#cameraInput').on('change', function(e){
 $data = e.originalEvent.target.files[0];
  $reader = new FileReader();
  reader.onload = function(evt){
  $('#your_img_id').attr('src',evt.target.result);
  reader.readAsDataUrl($data);
}});

edited Sep 08 '17 at 20:20

Miles Erickson

2,574
2
17
18

answered Sep 25 '16 at 09:08

Henock Bongi

255
5
16

4

Any reason you're using the depreciated `bind` vs `on`? – MCB Oct 27 '16 at 02:12
3

Thanks! i was using this before now i'm using `on` instead of `bind`. – Henock Bongi Nov 01 '16 at 14:20
1

reader is $reader – Jay Dubal Aug 22 '23 at 12:45
You're right @Jay Dubal ! Thanks – Henock Bongi Aug 23 '23 at 18:33

score 0 · Answer 3 · answered Dec 09 '22 at 08:07

0

function readFile(file) {                                                       
    var reader = new FileReader();
    reader.onload = readSuccess;                                            
    function readSuccess(evt) {     
        document.getElementById("your_img_id").src = evt.target.result                   
    };
    reader.readAsDataURL(file);                                              
} 

document.getElementById('cameraInput').onchange = function(e) {
    readFile(e.srcElement.files[0]);
};

answered Dec 09 '22 at 08:07

Heri Yan

1
1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 13 '22 at 09:04

Take picture from webcam or mobile camera in web applications

3 Answers3

Linked