How to access mobile device camera with javascript?

Question

I want to write a web app (html+css+javaScript), which, when running on a device with a camera (like a mobile phone), should be able to use this camera as barcode scanner. I know that there are barcode reader libraries, but I want to try to write my own scanner. (Because I want to learn how this works in detail.)

After loading the web app, the user should allow that the app uses the cam. But then everything else should work without the users interaction, i.e. there must be no need to tap on any button after allowing the use of the camera. The users next job ist to hold the camera onto barcodes until he presses the finished-button or until he closes the browser. But while scanning, no tapping should be necessary.

My app should frequently make sapshots from the cameras video stream. Such a snapshot is not meant to be displayed (the user can directly watch the video-stream from the cam) and it is not meant to be stored anywhere. It has to be available in javaScript as a bitmap, i.e. a two-dimensional array, where each item in this array holds the RGB values of a single pixel.

When the script receives such an array, it analyses it and tries to identify a barcode. If a code was identified successfully, this code is sent to a server. Then the next snapshot should be taken. Also if no code could be found a new snapshot should be taken. This repeats endless until the user quits scanning.

Nice to have:
I do not need the full screen-area that the camera is able to see. I only need a small rectangular clipping (for example 640x320 pixel).

I know that you can use this html-snippet to upload a video to a server

<form action="server.cgi" method="post" enctype="multipart/form-data">
  <input type="file" name="video" accept="video/*" capture>
  <input type="submit" value="Upload">
</form>

But I have no idea how this can help me to solve my problem. Can you help me?

(I don't know if this makes a difference, but I use jQuery.)

Answer 1

Take a look at the getUserMedia API, it allows you to prompt users for permission to use their device's camera on the web purely through JS. You can then manipulate the input as a stream.

Note that iOS still does not have support for this, and the only real alternative is to ask the user to snap a picture using a fileupload/blob and then searching that image for a barcode.

edit: link to none deprecated method