@txtony/tx-vue-scanner v0.1.4
tx-scanner
Project setup
npm install @txtony/tx-vue-scanner
Additionnal Informations
Access to your camera device must be granted. To access to your camera your page must be served by https or could be in localhost ( great for testing ). This vue component use https://github.com/zxing-js/library
accepted format
barcode 1d (UPC-A,UPC-E,EAN-8,EAN-13,Code 39, Code 128, ITF, RSS-14) barcode 2d (QRCODE,Data matrix, Aztec)
Basic exemple
<template>
<tx-vue-scanner @scan-success="handleScanSuccess"> </tx-vue-scanner>
</template>
<script>
import * as TxScanner from "@txtony/tx-vue-scanner";
export default {
name: 'your-component',
components: {
TxScanner
},
methods:{
/**
* @param {string} code
*/
handleScanSuccess:function(code){
}
}
}
</script>
Limitations
On iOS-Devices with iOS < 14.3 camera access works only in native Safari and not in other Browsers (Chrome,...) or Apps that use an UIWebView or WKWebView. This is not a restriction of this library but of the limited WebRTC support by Apple. The behavior might change in iOS 11.3 (Apr 2018?, not tested) as stated here
iOS 14.3 (released in december 2020) now supports WebRTC in 3rd party browsers as well 🎉
Browser Support
The browser layer is using the MediaDevices web API which is not supported by older browsers. You can use external polyfills like WebRTC adapter to increase browser compatibility. Also, note that the library is using the TypedArray (Int32Array, Uint8ClampedArray, etc.) which are not available in older browsers (e.g. Android 4 default browser). You can use core-js to add support to these browsers.