barcode-detector-api-polyfill 1.0.1 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -8
- package/browser/barcode-detector-polyfill.min.js +10 -10
- package/browser/barcode-detector-polyfill.min.js.map +4 -4
- package/cjs/BarcodeDetector.d.ts +1 -3
- package/cjs/BarcodeDetector.js +18 -43
- package/cjs/BarcodeDetector.js.map +1 -1
- package/cjs/constants.d.ts +3 -0
- package/cjs/constants.js +40 -0
- package/cjs/constants.js.map +1 -0
- package/es2022/BarcodeDetector.d.ts +1 -3
- package/es2022/BarcodeDetector.js +19 -44
- package/es2022/BarcodeDetector.js.map +1 -1
- package/es2022/constants.d.ts +3 -0
- package/es2022/constants.js +37 -0
- package/es2022/constants.js.map +1 -0
- package/package.json +13 -6
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
## The problem
|
|
4
4
|
|
|
5
|
-
The web [BarcodeDetector API](https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector) is amazing because it's very easy to use and it works
|
|
5
|
+
The web [BarcodeDetector API](https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector) is amazing because it's very easy to use and it works surprisingly well even with detecting multiple barcodes in a single image. However there is a problem with this API - [its current browser support](https://caniuse.com/mdn-api_barcodedetector) (or the lack of such, to be more precise). The current browser support can be summarized like this:
|
|
6
6
|
|
|
7
7
|
- Mobile
|
|
8
8
|
- Android - only Chromium-based browsers
|
|
@@ -25,17 +25,17 @@ This project implements a polyfill for the BarcodeDetector API that follows the
|
|
|
25
25
|
Download the latest build and use it as a regular JS file in a `<script>` tag. This build takes care of adding the missing BarcodeDetector object to the global scope and you are able to use it the same way as the real BarcodeDetector API.
|
|
26
26
|
|
|
27
27
|
```html
|
|
28
|
-
<script src="
|
|
28
|
+
<script src="barcode-detector-polyfill.min.js"></script>
|
|
29
29
|
```
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
### NPM module
|
|
33
33
|
|
|
34
|
-
```
|
|
34
|
+
```shell
|
|
35
35
|
npm install barcode-detector-api-polyfill
|
|
36
36
|
```
|
|
37
37
|
|
|
38
|
-
Include `node_modules/barcode-detector-api-polyfill/browser/barcode-detector-polyfill.min.js` to your script imports if you use a bundler
|
|
38
|
+
Include `node_modules/barcode-detector-api-polyfill/browser/barcode-detector-polyfill.min.js` to your script imports if you use a bundler.
|
|
39
39
|
|
|
40
40
|
If you just want to have the detector and handle the polyfilling by yourself you can simply import the `BarcodeDetector` class in your code.
|
|
41
41
|
|
|
@@ -47,7 +47,7 @@ if (!('BarcodeDetector' in window)) {
|
|
|
47
47
|
}
|
|
48
48
|
```
|
|
49
49
|
|
|
50
|
-
A valid use case for this could be if you use a bundler and you want to lazy load the polyfill only when
|
|
50
|
+
A valid use case for this could be if you use a bundler and you want to lazy load the polyfill only when it's needed.
|
|
51
51
|
|
|
52
52
|
## Important notes and known drawbacks
|
|
53
53
|
|
|
@@ -55,7 +55,7 @@ A valid use case for this could be if you use a bundler and you want to lazy loa
|
|
|
55
55
|
|
|
56
56
|
The ZXing reader detects only a single barcode from the image source. Because of that, you can never have more than 1 barcode result.
|
|
57
57
|
|
|
58
|
-
Barcode results from ZXing don't always include 4 corner points. For example, for 1-dimensional barcodes it returns only 2 points so you end up with coordinates for a line rather than a quadrangle. This might be an issue if you want to use these coordinates in your app to draw an outline of the detected barcode on a canvas.
|
|
58
|
+
Barcode results from ZXing don't always include 4 corner points. For example, for 1-dimensional barcodes it returns only 2 points, so you end up with coordinates for a line rather than a quadrangle. This might be an issue if you want to use these coordinates in your app to draw an outline of the detected barcode on a canvas.
|
|
59
59
|
|
|
60
60
|
### Reliability
|
|
61
61
|
|
|
@@ -69,14 +69,16 @@ Although for the most part ZXing works well, it's not as reliable as the native
|
|
|
69
69
|
|
|
70
70
|
Although it might be obvious, the image recognition logic is now handled entirely in the JavaScript code, therefore you can't expect performance as good as the native API. If you are going to use the detector with static images, you don't need to worry about that, but if you want to use the detector continuously on a streaming video, you can potentially expect performance issues.
|
|
71
71
|
|
|
72
|
+
*NOTE: I'm open for duscussions on weather we should use a web worker implementation to make detection process smoother!*
|
|
73
|
+
|
|
72
74
|
### Bundle size
|
|
73
75
|
|
|
74
76
|
Due to the presence of all ZXing decoders, the minified JS build of the polyfill is ~430 kb (before gzip compression). This could be a deal breaker for low bandwidth connections and Core Web Vitals scores. You can potentially work your way around this by lazy loading the polyfill which involves additional effort.
|
|
75
77
|
|
|
76
78
|
## How it's done?
|
|
77
79
|
|
|
78
|
-
This section here is for the curious ones who are interested in the development itself (and maybe want to contribute too). The polyfill is basically a class that implements the specified BarcodeDetector interface, and [the MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector) has been very helpful during the development. The class uses a ZXing multi-format reader internally and initializes it with a specific list of formats (if such are passed to the constructor). The class has the public static method `getSupportedFormats()` and the instance method `detect()`, both of can be used the same way as the native API.
|
|
80
|
+
This section here is for the curious ones who are interested in the development itself (and maybe want to contribute too). The polyfill is basically a class that implements the specified BarcodeDetector interface, and [the MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector) has been very helpful during the development. The class uses a ZXing multi-format reader internally and initializes it with a specific list of formats (if such are passed to the constructor). The class has the public static method `getSupportedFormats()` and the instance method `detect()`, both of which can be used the same way as the native API.
|
|
79
81
|
|
|
80
82
|
The implementation of the `detect()` method was a challenge because unlike the BarcodeDetector API, ZXing doesn't have this silver bullet detection method that accepts all kinds of image sources but rather has different methods that decode from different sources (canvas, video, image, stream, etc.). Because of this, the polyfill implementation conditionally calls different methods for one-time detection based on the type of the image source.
|
|
81
83
|
|
|
82
|
-
Another
|
|
84
|
+
Another challenge was to align the differences between the barcode formats of ZXing and the BarcodeDetector API. The barcode formats in ZXing are presented as a numeric `enum` while the BarcodeDetector API accepts (and returns) strings. To make the methods of the polyfill work as expected, two special map-like objects had to be created to make it possible to map barcode formats back and forth.
|