add: agregar soporte para múltiples formatos de código de barras en el escáner QR
This commit is contained in:
parent
0fd2d06db4
commit
c6dadb22e8
@ -1,5 +1,5 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
import { QrcodeStream } from 'vue-qrcode-reader';
|
import { QrcodeStream } from 'vue-qrcode-reader';
|
||||||
|
|
||||||
/** Props y Emits */
|
/** Props y Emits */
|
||||||
@ -16,6 +16,36 @@ const emit = defineEmits(['update:modelValue', 'qr-detected']);
|
|||||||
const error = ref('');
|
const error = ref('');
|
||||||
const isScanning = ref(true);
|
const isScanning = ref(true);
|
||||||
|
|
||||||
|
/** Formatos de código de barras soportados */
|
||||||
|
const barcodeFormats = ref({
|
||||||
|
qr_code: true, // QR codes
|
||||||
|
ean_13: true, // Código de barras estándar (13 dígitos)
|
||||||
|
ean_8: true, // Código de barras corto (8 dígitos)
|
||||||
|
code_128: true, // Común en retail y logística
|
||||||
|
code_39: true, // Común en inventario industrial
|
||||||
|
upc_a: true, // Común en productos USA
|
||||||
|
upc_e: true, // Común en productos USA (versión corta)
|
||||||
|
aztec: false,
|
||||||
|
code_93: false,
|
||||||
|
codabar: false,
|
||||||
|
databar: false,
|
||||||
|
databar_expanded: false,
|
||||||
|
data_matrix: false,
|
||||||
|
dx_film_edge: false,
|
||||||
|
itf: false,
|
||||||
|
maxi_code: false,
|
||||||
|
micro_qr_code: false,
|
||||||
|
pdf417: false,
|
||||||
|
rm_qr_code: false,
|
||||||
|
linear_codes: false,
|
||||||
|
matrix_codes: false
|
||||||
|
});
|
||||||
|
|
||||||
|
// Computed para obtener solo los formatos activados
|
||||||
|
const selectedBarcodeFormats = computed(() => {
|
||||||
|
return Object.keys(barcodeFormats.value).filter((format) => barcodeFormats.value[format]);
|
||||||
|
});
|
||||||
|
|
||||||
/** Métodos */
|
/** Métodos */
|
||||||
function paintBoundingBox(detectedCodes, ctx) {
|
function paintBoundingBox(detectedCodes, ctx) {
|
||||||
for (const detectedCode of detectedCodes) {
|
for (const detectedCode of detectedCodes) {
|
||||||
@ -58,7 +88,7 @@ function onError(err) {
|
|||||||
} else if (err.name === 'NotFoundError') {
|
} else if (err.name === 'NotFoundError') {
|
||||||
error.value += 'No se encontró cámara en este dispositivo';
|
error.value += 'No se encontró cámara en este dispositivo';
|
||||||
} else if (err.name === 'NotSupportedError') {
|
} else if (err.name === 'NotSupportedError') {
|
||||||
error.value += 'Se requiere contexto seguro';
|
error.value += 'Se requiere contexto seguro (HTTPS o localhost)';
|
||||||
} else if (err.name === 'NotReadableError') {
|
} else if (err.name === 'NotReadableError') {
|
||||||
error.value += '¿La cámara ya está en uso?';
|
error.value += '¿La cámara ya está en uso?';
|
||||||
} else if (err.name === 'OverconstrainedError') {
|
} else if (err.name === 'OverconstrainedError') {
|
||||||
@ -66,7 +96,7 @@ function onError(err) {
|
|||||||
} else if (err.name === 'StreamApiNotSupportedError') {
|
} else if (err.name === 'StreamApiNotSupportedError') {
|
||||||
error.value += 'No es compatible con este navegador';
|
error.value += 'No es compatible con este navegador';
|
||||||
} else if (err.name === 'InsecureContextError') {
|
} else if (err.name === 'InsecureContextError') {
|
||||||
error.value += 'El acceso a la cámara solo se permite en contexto seguro.';
|
error.value += 'El acceso a la cámara solo se permite en contexto seguro (HTTPS).';
|
||||||
} else {
|
} else {
|
||||||
error.value += err.message;
|
error.value += err.message;
|
||||||
}
|
}
|
||||||
@ -77,12 +107,14 @@ function onError(err) {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="relative w-full h-full">
|
<div class="relative w-full h-full">
|
||||||
<!-- Componente de escaneo QR -->
|
<!-- Componente de escaneo QR y códigos de barras -->
|
||||||
<QrcodeStream
|
<QrcodeStream
|
||||||
v-if="isScanning"
|
v-if="isScanning"
|
||||||
@detect="onDetect"
|
@detect="onDetect"
|
||||||
@error="onError"
|
@error="onError"
|
||||||
:track="paintBoundingBox"
|
:track="paintBoundingBox"
|
||||||
|
:formats="selectedBarcodeFormats"
|
||||||
|
:constraints="{ facingMode: 'environment' }"
|
||||||
class="w-full h-full rounded-lg overflow-hidden"
|
class="w-full h-full rounded-lg overflow-hidden"
|
||||||
>
|
>
|
||||||
</QrcodeStream>
|
</QrcodeStream>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user