Just looking for a copy-paste solution?
See my tutorial for adding a barcode scanner button to an <input> field with Bootstrap and QuaggaJS.
The most important advantage of this approach is that moste modern Browsers support the File API and it works very well. It is also important, that the native camera app is used to take the picture: it is reliable and surely easy to use for every user. On the other hand, the camera takes quite a long time to start (depending on the mobile device) and there are many taps needed for the whole procedure. The taken picture also needs to be sharp and of a good quality. If not, the reader will not be able to read the code and the user will have to take another picture.
Using the getUserMedia API a web application can gain access to the live stream of the built-in cameras. Unfortunately, it is far not that well supported by browsers, as the File API (see compatibility table). But if supported by the browser, it makes it possible to embed the live video stream of the camera into the web page at any place and even to control it: switch front and back camera, adjust the brightness, etc. Thus, the user will not need to leave the app to scan the code - see example with QuaggaJS. The main advantage of QuaggaJS at this point is, that it performes a live search for barcodes on the moving picture, so the user can aim at the code directly seeing the result. Other libraries just use the live stream as a viewfinder to take a picture for later recognition.
I think, using the getUserMedia API is the best approach from the point of view of usability. However, there are some technical difficulties. The main one is the lack of autofocus for video via getUserMedia on a lot of mobile devices. Without autofocus the barcode will always appear blurred because it is much closer, than most objects you would take pictures of normally (and thus out of the default focus). In this case, it is simply impossible to read the barcode through the getUserMedia API. Thus, this method only works well with recent top-level smartphones and tablets. The browser support keeps improving though, so, for example, the autofocus recently started working with my LG G3 on Chrome.
- A custom virtual keyboard app with a built-in scanner (currently on android only)
- A dedicated scanner app with an API based on special URLs (currently on android only)
- A separate bluetooth barcode scanner (see previous post)
My personal oppinion is, that the File API is currently the most stable way to read a barcode with the built-in camera - it is similar to what native apps would do and offers decent user experience. The getUserMedia API, on the other hand, is the most fancy way to do it: thus, I'm looking forward to getUserMedia getting better in the coming years. Finally, if it comes down to speed, there is no other choice, than using a dedicated barcode scanner (for example a small bluetooth device) - all the methods using the built-in camera are not suitable for scanning multiple codes in a row.