Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nielsleenheer/webserialbarcodescanner
Scan barcodes or QR codes using a barcode scanners in serial mode using WebSerial
https://github.com/nielsleenheer/webserialbarcodescanner
barcode fugu scanner webserial
Last synced: 3 months ago
JSON representation
Scan barcodes or QR codes using a barcode scanners in serial mode using WebSerial
- Host: GitHub
- URL: https://github.com/nielsleenheer/webserialbarcodescanner
- Owner: NielsLeenheer
- License: mit
- Created: 2023-04-21T11:08:34.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-04T16:17:21.000Z (4 months ago)
- Last Synced: 2024-11-05T22:16:32.262Z (3 months ago)
- Topics: barcode, fugu, scanner, webserial
- Language: JavaScript
- Homepage:
- Size: 43 KB
- Stars: 8
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WebSerialBarcodeScanner
This is an library that allows you to use barcode scanners in serial com port mode using WebSerial.
[](https://www.npmjs.com/@point-of-sale/webserial-barcode-scanner)
> This library is part of [@point-of-sale](https://point-of-sale.dev), a collection of libraries for interfacing browsers and Node with Point of Sale devices such as receipt printers, barcode scanners and customer facing displays.
### What does this library do?
By default most barcode scanners emulate a keyboard meaning all numbers and letters of a barcode will be individually 'typed' by the barscanner. This means you either have to focus an input field before scanning, or you have to use global keyboard events and build some algorithm that can seperate out digits from barcodes from other digits that are being typed on the keyboard. This is error-prone and slow, but most barcode scanners can also be used in serial mode.
Depending on the model and manufacturer you might first need to scan a special configuration barcode to enable this mode. See the documentation of your barcode scanner for more information.
This library uses WebSerial to connect to the scanner and receive the barcodes in one event.
### How to use it?
Load the `webserial-barcode-scanner.umd.js` file from the `dist` directory in the browser and instantiate a `WebSerialBarcodeScanner` object.
```html
const barcodeScanner = new WebSerialBarcodeScanner();
```
Or import the `webserial-barcode-scanner.esm.js` module:
```js
import WebSerialBarcodeScanner from 'webserial-barcode-scanner.esm.js';
const barcodeScanner = new WebSerialBarcodeScanner();
```
## Configuration
When you create the `WebSerialBarcodeScanner` object you can specify a number of options to help with the library with connecting to the device.
### Serial port settings
Many devices that use serial ports can be configured to use different speeds and settings like databits, stopbits and parity and flow control. Sometimes these settings are hardcoded, sometimes they can be configured by DIP switches or other means. See the manual of your device for more information about how your device is configured and match the settings of your device with the properties below:
- `baudRate`
Number that indicates the speed, defaults to `9600`.
- `bufferSize`
Size of the read and write buffers, defaults to `255`.
- `dataBits`
Number of data bits per frame, either `7` or `8`, defaults to `8`.
- `flowControl`:
The flow control type, either `none`, or `hardware`, defaults to `none`.
- `parity`
The parity mode, either `none`, `even` or `odd`. The default value is `none`.
- `stopBits`
The number of stop bits at the end of the frame. Can be either `1` or `2` and defaults to `1`.
For example, to set a baud rate of `9600`:
```js
const barcodeScanner = new WebSerialBarcodeScanner({
baudRate: 9600
});
```
### Symbology
Usually the barcode scanner does not transmit any information about the symbology of the barcode, just the value of the barcode itself.
However the library can make an educated guess based on the content. For example, if it starts with `http` it usually is a QR code. If it is 13 digits and the last digit is a check digit, it is usually an EAN13 code and similarly with 12 digits is usually a UPC-A.
By default this behaviour is turned off. If you want this library to guess the symbology you can turn it on:
```js
const barcodeScanner = new WebSerialBarcodeScanner({
guessSymbology: true
});
```
On some scanners it may actually be possible to add an AIM Code ID as a prefix to the barcode. This is a 3 character identifier for the symbology of the barcode. To enable this for your barcode scanner you may need to scan a configuration barcode. For more information look at the documentation of your barcode scanner. If this AIM Code ID is detected, it will be used to determine the symbology of the barcode.
By default this library will return barcodes of every symbology. However if you want to use this library in a specific environment, such as retail, you can limit this library to only allow symbologies that are used in retail, for example:
```js
const barcodeScanner = new WebSerialBarcodeScanner({
allowedSymbologies: [ 'ean13', 'ean8', 'upca', 'upce', 'qr-code' ]
});
```
This will allow all EAN and UPC barcodes. But also QR-codes because the retail industry is moving to the QR code based GS Digital Links in the coming years. These digital links contain an URL and can be used by consumers to read more about the product they are buying or have bought. But it also includes the Global Trade Identification Number (GTIN) that is also used by EAN and UPC barcodes.
If we find GS1 data such as the GTIN in the scanned barcode we will automatically decode it and place it in the data property:
```js
barcodeScanner.addEventListener('barcode', e => {
if (e.data?.gtin) {
console.log(`Found barcode with GTIN ${e.data.gtin}`);
}
});
```
## Connect to a scanner
The first time you have to manually connect to the barcode scanner by calling the `connect()` function. This function must be called as the result of an user action, for example clicking a button. You cannot call this function on page load.
```js
function handleConnectButtonClick() {
barcodeScanner.connect();
}
```
Subsequent times you can simply call the `reconnect()` function. You have to provide an object with vendor id and product id of the previously connected barcode scanner in order to find the correct barcode scanner and connect to it again. If there is more than one device with the same vendor id and product id it won't be able to determine which of the two devices was previously used. So it will not reconnect. You can get the vendor id and product id by listening to the `connected` event and store it for later use. Unfortunately this is only available for USB connected devices. It is recommended to call this button on page load to prevent having to manually connect to a previously connected device.
```js
barcodeScanner.reconnect(lastUsedDevice);
```
If there are no barcode scanners connected that have been previously connected, this function will do nothing.
However, this library will actively look for new devices being connected. So if you connect a previously connected barcode scanner, it will immediately become available.
To find out when a barcode scanner is connected you can listen for the `connected` event using the `addEventListener()` function.
```js
barcodeScanner.addEventListener('connected', device => {
console.log(`Connected to a device with vendorId: ${device.vendorId} and productId: ${device.productId}`);
/* Store device for reconnecting */
lastUsedDevice = device;
});
```
The callback of the `connected` event is passed an object with the following properties:
- `type`
Type of the connection that is used, in this case it is always `serial`.
- `vendorId`
In case of a USB barcode scanner, the USB vendor ID.
- `productId`
In case of a USB barcode scanner, the USB product ID.
To find out when a barcode scanner is disconnected you can listen for the `disconnected` event using the `addEventListener()` function.
```js
barcodeScanner.addEventListener('disconnected', () => {
console.log(`Disconnected`);
});
```
You can force the scanner to disconnect by calling the `disconnect()` function:
```js
barcodeScanner.disconnect();
```
## Events
Once connected you can use listen for the following events to receive data from the barcode scanner.
### Scanning barcodes
Whenever the libary detects a barcode, it will send out a `barcode` event that you can listen for.
```js
barcodeScanner.addEventListener('barcode', e => {
console.log(`Found barcode ${e.value}`);
});
```
The callback is passed an object with the following properties:
- `value`
The value of the barcode as a string
- `data`
If the barcode contains GS1 data, such as the Global Trade Identification Number (GTIN) the data will be parsed into elements.
- `aim`
Optionally, the AIM Code ID, which is a 3 character ISO/IEC identifier and gives information about the symbology of the barcode which was scanned.
- `symbology`
Optionally a library specific identifier of the symbology.
- `guess`
If the symbology of this barcode is a guess, then `true`. If we are quite certain of the symbology, then `false`.
- `bytes`
The raw bytes we've received from the scanner. This propery is an array containing one or more `Uint8Array`'s.
#### Parsed GS1 data
The `data` property is optional, but if GS1 data is detected, it will contain an object with the following properties:
- `gtin`
Optionally, if the GS1 elements define a GTIN, it will be listed here for quick reference.
- `elements`
An array of all the GS1 elements that the barcode contains. Each element is an object with the folowing properties; `ai`: the appication identifier, `label`: a human readable label and `value`: the value of the element.
#### Symbologies
The `symbology` property can be any of the following common values for 1D barcodes:
`ean8`, `ean13`, `upca`, `upce`, `code39`, `code93`, `code128`, `codabar`, `interleaved-2-of-5`, `gs1-databar-omni`, `gs1-databar-expanded`
Or these 2D barcodes:
`qr-code`, `data-matrix`, `aztec-code`, `pdf417`
#### Example
A typical EAN 13 barcode would look like:
```js
{
value: "3046920029759",
symbology: "ean13",
guess: false,
data: {
gtin: "03046920029759",
elements: [{
ai: "01",
label: "GTIN",
value: "03046920029759"
}]
},
bytes: [[
0x30, 0x33, 0x30, 0x34, 0x36, 0x39, 0x32, 0x30,
0x30, 0x32, 0x1D, 0x37, 0x35, 0x39
]]
}
```
-----
This library has been created by Niels Leenheer under the [MIT license](LICENSE). Feel free to use it in your products. The development of this library is sponsored by Salonhub.
