HTML5/ javascript barcode reader on mobile without manually switching resolution

Question

I am trying to do barcode reading in HTML5/ Javascript on mobile so I can extract the barcode and post to a Ruby on Rails web service.

I am using this code for barcode reading: code by manuels which works fine ( You can try out the barcode reader code here ) if camera on mobile is set to a very low resolution, not at high resolution though. This method using HTML Media Capture is not ideal as user would have to switch to low resolution manually. I know one can set resolution using GetUserMedia but it's not compatible with many browser/ versions.

I am trying to resize the captured photo using a canvas, based on the canvas code here (not written by myself) . The resize works as expect. I then combine the barcode reading code mentioned above in the resize function as below but the barcode reading part doesn't work.

... var interface = new Interface('./bardecode-worker.js'); interface.on_stdout = function(x) { document.getElementById('barcode').appendChild(document.createTextNode('result: '+x)); }; ...

interface.addData(tempCanvas.toDataURL('image/jpeg'), '/barcode.jpg').then
(
    function()
    {
        interface.run('/barcode.jpg').then
        (
            function() { console.log(arguments); }
        );
    }
)

This is manuels' original code below, and in the above code, I am trying to feed the resized image from the canvas into the interface.js instead of a FileReader:

document.getElementById('barcode_file').onchange = function(e) {
    var file = e.target.files[0];
    var reader = new FileReader();

    document.getElementById('barcode').appendChild(document.createTextNode('running...'));

    reader.onload = function(ev) {
        interface.addData(ev.target.result, '/barcode.jpg').then(function() {
             interface.run('/barcode.jpg').then(function() { console.log(arguments); });
        })
    };
    reader.readAsBinaryString(file);
};

Sorry, I am quite new to javascript. Any suggestions? Or is there a better solution?

Answer 1

You might be interested in looking at this program which specializes in providing easier access to hardware on mobile phones.

http://bridgeit.mobi/

It installs a native app on the phone and then lets you open the app from your webpage and then passes back the scan or photo or other item.

They use a javascript library they wrote to open the app and then pass the information back to your webpage.

The library will also open the store page of the program if it is not installed the first time it a user tries to use it.