Claudio Ortolina
59 lines
1.9 KiB
JavaScript
59 lines
1.9 KiB
JavaScript
import { BarcodeDetector } from "barcode-detector/ponyfill";
|
|
|
|
const barcodeReaderSetup = async function () {
|
|
const supportedFormats = await BarcodeDetector.getSupportedFormats();
|
|
|
|
return new BarcodeDetector({
|
|
// make sure the formats are supported
|
|
formats: supportedFormats,
|
|
});
|
|
}
|
|
|
|
export default {
|
|
async mounted() {
|
|
const detectedBarcodes = new Set([]);
|
|
const barcodeDetector = await barcodeReaderSetup();
|
|
this.cameraPreview = this.el.querySelector("#camera-preview");
|
|
const constraints = {
|
|
audio: false,
|
|
video: {
|
|
width: 800, height: 600, facingMode: {
|
|
ideal: "environment"
|
|
}
|
|
},
|
|
};
|
|
this.el.addEventListener("camera_request", () => {
|
|
navigator.mediaDevices
|
|
.getUserMedia(constraints)
|
|
.then((mediaStream) => {
|
|
console.debug("Camera access allowed")
|
|
this.pushEventTo(this.cameraPreview, "camera_allowed", {});
|
|
this.cameraPreview.srcObject = mediaStream;
|
|
this.cameraPreview.onloadedmetadata = () => {
|
|
this.cameraPreview.play();
|
|
this.scanInterval = window.setInterval(async () => {
|
|
const barcodes = await barcodeDetector.detect(this.cameraPreview);
|
|
if (barcodes.length <= 0) return;
|
|
|
|
barcodes.forEach(barcode => {
|
|
if (!detectedBarcodes.has(barcode.rawValue)) {
|
|
this.pushEventTo(this.cameraPreview, "barcode_scanned", { number: barcode.rawValue });
|
|
detectedBarcodes.add(barcode.rawValue);
|
|
};
|
|
});
|
|
}, 500)
|
|
};
|
|
})
|
|
.catch((err) => {
|
|
console.error(`${err.name}: ${err.message}`);
|
|
this.pushEventTo(this.cameraPreview, "camera_denied", {});
|
|
});
|
|
})
|
|
|
|
},
|
|
destroyed() {
|
|
this.cameraPreview.srcObject.getTracks().forEach(track => track.stop());
|
|
window.clearInterval(this.scanInterval);
|
|
}
|
|
}
|