DEV Community

Cover image for Connect a Barcode Scanner to an Electron Desktop App
Yoram Kornatzky
Yoram Kornatzky

Posted on • Updated on • Originally published at yoramkornatzky.com

Connect a Barcode Scanner to an Electron Desktop App

Electron is a cross-platform framework for building desktop apps with JavaScript, HTML, and CSS.

In agricultural, industrial, and logistics integrated facilities, such desktop apps often need to read information from barcodes and QR codes printed on real-life physical objects.

Alt Text

Such barcodes and QR codes are scanned with a barcode scanner such as Zebra DS4305 Digital Scanner connected to the computer with a USB connector.

Alt Text

Receiving the code into the Electron app turns up to be very simple. The scanner is viewed as a keyboard.

So if you have in the HTML an input element,

<input id="codeInput"/>
Enter fullscreen mode Exit fullscreen mode

And we focus the program on the input field, using JavaScript,

document.getElementById("codeInput").focus();
Enter fullscreen mode Exit fullscreen mode

The scanner reads the code into the input field like it was typed in by the keyboard.

Top comments (1)

Collapse
 
nickbrady profile image
Nick Brady

Beautiful. I was worried about this.. but that makes so much sense. thank you for the blog!