Barcode Detector Api Polyfill using zbar.wasm
How to use
This is a very simple polyfill using zbar.wasm under the hood written in plain ES6.
You can install the polyfill with BarcodeDetectorPolyfill.setupPolyfill().
<script type="module">
import BarcodeDetectorPolyfill from "./BarcodeDetectorPolyfill.min.js";
console.log("Native api support", BarcodeDetectorPolyfill.checkBarcodeDetectorSupport());
BarcodeDetectorPolyfill.setupPolyfill();
</script>Simply use like the regular api (check https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API).
zbar.wasm
This polyfill uses zbar.wasm and therefore needs to load a ~200kb bin file in order to work. The polyfill itself is 9.5kb.
Checking secure context
Webcam is only available in a secure context. Here is some sample code to help you (using Swal to show an error message).
if (!BarcodeDetectorPolyfill.checkWebcamSupport()) {
if (!BarcodeDetectorPolyfill.checkSecureContext()) {
Swal.fire("You need a secure context!");
} else {
Swal.fire("No webcam connected!");
}
}You can try the demo
Running npm run start and see demo.html or https://codepen.io/lekoalabe/pen/abyrqaL (currently not working due to CORS issue loading the wasm file)
Also check out
Other
Api ref
- https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API
- https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
Scanner app
Zbar
Zxing
Other libs
- https://www.npmjs.com/package/qr-scanner (worker support)
- https://serratus.github.io/quaggaJS/ (nice rotation algo)
- https://github.com/ericblade/quagga2
Other polyfills