how can i use zxing in html5?

Question

I currently have the zxing lib running on my silver-light project.

It's not lightning fast but it works fine and accurate.

However... the limitations are that some people use Linux and silver-light don't run very well (If at all) on some Linux platforms even with mono (moonlight)

So I'm trying to develop something that will decode bar-codes directly from an html5 page then send this information to my server by calling a service.

I am using c# at present.

I have the zxing jar files but have very little to no idea how to utilize them in an html5 page.

I have the webcam up and running using the html5 getUserMedia and can grab a frame from the stream and put it into a canvas, but can not work out how to integrate it with the zxing library.

Any and all help will be well appreciated.

Answer 1

There are a few native JS barcode scanning libraries out there that you could use:

• http://badassjs.com/post/654334959/barcode-scanning-in-javascript
• https://github.com/manuels/unix-toolbox.js-exact-image/
• https://github.com/LazarSoft/jsqrcode

The last one is apparently a port of zxing, though it looks like it is tailored to QR code scanning.

Answer 2

I'm working on something similar. Trouble is, I've not gotten it to completely work either. But maybe this can help:

Like you, I've gotten an HTML5 webcam with a canvas to capture stills of the barcode. To use the ZXING stuff, you'll need to either compile the java files from source yourself, or get a pre-compiled .war file and find some way to host the servlets. I'm hosting mine using tomcat with the pre-compiled war pulled down from the maven repository ( http://repo1.maven.org/maven2/com/google/zxing/zxingorg/2.2/ ) .

Once that's set, the ZXING decoding servlet is expecting either a URL or a file from an html form that has its action set to the url of your decode servlet. So you could take captured barcode on the canvas, save it to a file, and then have the user manually submit the file via the html page(exactly like the zxing.org web version) and that would work. However, if you wanted to seamlessly take the captured still and send it to the ZXING decoder, it's a bit more difficult and that's where I'm stuck as well.

I used javascript to convert the canvas's image to a blob first (and mind you, this only works in Firefox, since Chrome doesn't support canvas blobs yet. no idea about IE). Then I created a new FormData object, giving it the existing id of a form on the webpage, and appended the blob to that form. Then I used a submit button on the webpage to do the actual submitting of the form, which sends it via post to the decode servlet. I then get a nice white page with a console error about the character encoding of a plain text document not being declared.

I've also tried creating a new XMLHttpRequest in the javascript file, appending the canvas blob to that rather than an existing html form, and submitting via that. According to the console, that seems to get a bit farther (the console will show whether it redirected to a "results not found" page or to the results page), but I can't actually see/manipulate the output data.

Sorry I can't be of more assistance. I'd love to see someone get a completely web based version of this working since ZXING seems to be really good at the decoding process.