A customer requested a web application which allows to scan QR codes on invitations. It should run on mobile phones. The validity check is performed within a Navision system via a SOAP webservice. The most important requirement was a high-performant interface, because the customer has events with several thousands of guests.

I was first sceptical about the performance of the internal mobile phone cameras and the scan speed, so I recommended a hardware solution, connecting a professional QR code scanner to a mobile phone with an OTG adapter. We experimented a bit and found that the internal camera is completely sufficient if it is used together with a fast QR scan app.

A first approach was to capture the internal camera stream with HTML5 and recognize the QR code with a JavaScript library. I tried jsqrcode (https://github.com/LazarSoft/jsqrcode), but it was way too slow. The problem seems to be the autofocus which cannot be controlled with HTML5 in a quick and reliable way (yet). So we switched to a QR code scan app which implements a keyboard.

I created a form with just one text input for capturing the QR code. The user has to tap on this text input field to trigger the keyboard view. It is not possible on current mobile browsers to reliably show this keyboard on opening a page with JavaScript. On some older browsers there were some hacks that could do that. On the keyboard, the user has to choose the scan function of the keyboard app to start scanning. The text field autosubmits the content via JavaScript if no further key input arrives after 100ms. The webserver connects to the Navision webservice and returns the result back to the user. This solution is quick and robust enough for practical usage according to our tests.

Which apps are good for this application? We tried "Niko Barcode Keyboard" free and premium, and "Keyboard with Barcode/NFC Scanner" from TEC-IT. All three are perfectly usable for this case. The premium Niko Keyboard has a feature of a numeric keyboard on which the QR scan button is very large. This is a nice feature usability-wise. The TEC-IT scanner is a little bit faster though. It is so greedy that it even finds QR codes in the surroundings which were not meant to be scanned.

Why not directly talk to the webservice from the web application via JavaScript? I tried to avoid the round trip to the webserver to the Navision webservice and back. Because of the same origin policy this was not possible. It prevents from making AJAX calls to other domains than the one the script was initially loaded from. This would have been necessary for performing SOAP calls to the webservice. In this case, the web application had to reside on a different domain.