Realidad Aumentada WebAR lee codigos QR y Codigos de barras

Camara web activa escaneando marcador de realidad aumentada y un codigo QR — Realidad Aumentada WebAR lee códigos QR y códigos de barras

La Realidad Aumentada (AR) web ha democratizado el acceso a experiencias inmersivas, eliminando la barrera de «descargar una aplicación». Sin embargo, la AR por sí sola a veces carece de utilidad práctica inmediata en entornos comerciales. Aquí es donde entra la fusión con una tecnología veterana pero indispensable: El Código de Barras y el código QR.

¿Por qué fusionarlos?

Pensemos en este ejemplo: Un usuario en un pasillo de supermercado.

El Problema: El código de barras solo sirve para la caja registradora (precio e inventario). Para el usuario, son solo rayas negras.
La Solución AR: Al apuntar con su celular, ese código de barras no solo se «lee», sino que despliega un modelo 3D un video, una oferta exclusiva o una guía de uso flotando sobre el paquete.

Cómo funciona nuestra integración WebAR lectora de códigos de barras y QR.

La aplicación resuelve un desafío técnico importante: El conflicto de la cámara.
Tanto la Realidad Aumentada (MindAR) como los escáneres de códigos (HTML5-QRCode) intentan apoderarse de la cámara del dispositivo. Si intentas ejecutarlos al mismo tiempo, el navegador colapsará o se bloqueará.

Nuestra solución implementa un Sistema de Estados:

Estado Pasivo (AR): La cámara busca el marcador visual (targets.mind) para proyectar el modelo 3D (Wolf.glb). 3D models by Realidad Aumentada Empezando Desde Cero (@realidad-aumentada) – Sketchfab
Estado Activo (Escáner): Al pulsar un botón, «pausamos» el motor de AR (liberando recursos) y activamos el lector de barras.
Retorno: Una vez leído el código, el sistema se invierte automáticamente, devolviendo al usuario a la experiencia inmersiva.

Esta arquitectura permite crear experiencias donde el producto físico (identificado por su código) es la llave de entrada al mundo digital.

Pasemos al código que es lo que nos interesa.

CSS para los estilos.

/* Reseteamos márgenes y evitamos barras de desplazamiento (scroll) */
body {
margin: 0;
overflow: hidden; /* Importante para que el video no genere scroll */
font-family: 'Arial', sans-serif;
}

/* ESTILOS DEL BOTÓN DE ESCANEAR */
#scan-btn {
position: absolute; /* Posición absoluta para flotar sobre el video AR */
bottom: 20px; /* Pegado abajo */
left: 50%; /* Centrado horizontalmente... */
transform: translateX(-50%); /* ...ajuste fino del centrado */
z-index: 1000; /* Z-index alto para estar POR ENCIMA del video de AR */
background: #333; /* Fondo oscuro */
color: white; /* Texto blanco */
padding: 15px 25px; /* Espaciado interno */
border: 2px solid white; /* Borde blanco para contraste */
border-radius: 30px; /* Bordes muy redondeados */
cursor: pointer; /* Manita al pasar el mouse */
font-weight: bold;
box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* Sombra para dar profundidad */
}

/* CONTENEDOR DEL ESCÁNER (PANTALLA NEGRA) */
#scanner-container {
display: none; /* OCULTO por defecto (empezamos en modo AR) */
position: absolute; /* Cubre toda la pantalla */
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.9); /* Fondo negro semi-transparente */
z-index: 2000; /* Z-index MUY alto, tapa incluso al botón de escanear */
flex-direction: column; /* Organiza elementos en columna */
align-items: center; /* Centra horizontalmente */
justify-content: center;/* Centra verticalmente */
}

/* CAJA DEL LECTOR DE CÁMARA */
#reader {
width: 90%; /* Ocupa casi todo el ancho en móviles */
max-width: 500px; /* Pero no más de 500px en escritorio */
border: 2px solid #00ff00; /* Borde verde "hacker" para indicar zona de lectura */
}

/* BOTÓN PARA CERRAR EL ESCÁNER */
#close-scanner {
margin-top: 20px;
padding: 10px 20px;
background: #ff4444; /* Rojo para indicar acción de cancelar/cerrar */
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

/* OVERLAY DE RESULTADO (Donde sale el texto leído) */
#result-overlay {
position: absolute;
top: 10%; /* Ubicado arriba */
left: 50%;
transform: translateX(-50%);
background: white; /* Fondo blanco para leer bien */
padding: 10px 20px;
border-radius: 8px;
display: none; /* Oculto hasta que leamos algo */
z-index: 999; /* Por encima del AR */
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

Ahora pasemos a la lógica de la aplicación WebAR el famoso JavaScript.

Pero no sin antes recomendarte esta pagina web que permite hacer aplicaciones de realidad aumentada en minutos con tus fotos o con cualquier tipo de marcador: Editor AR Online: Modelos 3D (GLB, GLTF) y Video (MP4)

// Referencias a los elementos del DOM (HTML) que vamos a manipular
const scannerContainer = document.getElementById('scanner-container');
const scanBtn = document.getElementById('scan-btn');
const resultOverlay = document.getElementById('result-overlay');
const resultText = document.getElementById('result-text');

// Variable global para guardar la instancia del escáner
let html5QrcodeScanner = null;

// FUNCIÓN UTILIDAD: Obtener el sistema de MindAR desde la escena de A-Frame
// Nos permite pausar o reanudar el reconocimiento de imagen
function getMindARSystem() {
return document.querySelector('a-scene').systems['mindar-image-system'];
}

// -------------------------------------------------------
// FUNCIÓN 1: INICIAR EL MODO ESCÁNER (Y PAUSAR AR)
// -------------------------------------------------------
function startBarcodeScanner() {
// PASO A: Pausar MindAR.
// Es CRÍTICO pausar esto, si no, dos procesos pelearán por la cámara.
const arSystem = getMindARSystem();
if(arSystem) {
arSystem.pause(); // Detiene el procesamiento de CPU

// Buscamos el elemento <video> que crea MindAR y lo ocultamos
// para que no se vea congelado en el fondo.
const arVideo = document.querySelector('video');
if(arVideo) arVideo.style.display = 'none';
}

// PASO B: Cambiar la Interfaz Gráfica (UI)
scannerContainer.style.display = 'flex'; // Mostramos el overlay negro del escáner
scanBtn.style.display = 'none'; // Ocultamos el botón de entrar al escáner

// PASO C: Inicializar la librería de códigos de barras
html5QrcodeScanner = new Html5Qrcode("reader"); // "reader" es el ID del div en HTML

// Configuración: 10 cuadros por segundo es suficiente para códigos de barras
const config = { fps: 10, qrbox: { width: 250, height: 250 } };

// Iniciamos la cámara.
// "facingMode: environment" fuerza el uso de la cámara trasera.
html5QrcodeScanner.start({ facingMode: "environment" }, config, onScanSuccess)
.catch(err => {
console.error("Error al iniciar cámara de escáner", err);
alert("Error: No se pudo acceder a la cámara para el escáner.");
stopBarcodeScanner(); // Si falla, nos devolvemos al modo AR
});
}

// -------------------------------------------------------
// FUNCIÓN 2: QUÉ HACER CUANDO SE LEE UN CÓDIGO (CALLBACK)
// -------------------------------------------------------
function onScanSuccess(decodedText, decodedResult) {
console.log(`Código detectado: ${decodedText}`);

// 1. Mostrar el texto leído en el cartelito blanco de arriba
resultText.innerText = decodedText;
resultOverlay.style.display = 'block';

// 2. Detener el escáner automáticamente y volver al modo AR
stopBarcodeScanner();
}

// -------------------------------------------------------
// FUNCIÓN 3: DETENER ESCÁNER Y VOLVER A AR
// -------------------------------------------------------
function stopBarcodeScanner() {
if (html5QrcodeScanner) {
// Detenemos el flujo de video del escáner
html5QrcodeScanner.stop().then(() => {
html5QrcodeScanner.clear(); // Limpiamos el canvas del escáner

// Restauramos la Interfaz Gráfica
scannerContainer.style.display = 'none'; // Ocultamos capa negra
scanBtn.style.display = 'block'; // Vuelve el botón

// REACTIVAMOS MINDAR (IMPORTANTE)
const arSystem = getMindARSystem();
const arVideo = document.querySelector('video');

if(arVideo) arVideo.style.display = 'block'; // Volvemos a mostrar el video de fondo
if(arSystem) arSystem.unpause(); // El motor vuelve a buscar "targets.mind"

}).catch(err => {
console.error("Error al detener escáner", err);
});
}
}

Ya viste estos tutoriales de realidad aumentada que te pueden ayudar muchísimo para volverte todo un desarrollado profesional en el mundo de la WebAR (Realidad Aumentada en la web). Aquí te dejo los links para que inicies el camino:

Ahora si pasemos al HTML detallado.

<!-- 1. DECLARACIÓN DEL TIPO DE DOCUMENTO -->
<!-- Indica al navegador que estamos usando HTML5 moderno -->
<!DOCTYPE html>
<!-- Iniciamos el documento HTML y definimos el idioma español -->
<html lang="es">

<!-- 2. CABECERA (HEAD) -->
<!-- Aquí va la información técnica que no se ve en la página pero es vital -->
<head>
<!-- Definimos la codificación de caracteres UTF-8 (para tildes, ñ, etc.) -->
<meta charset="UTF-8">

<!-- CONFIGURACIÓN DE VIEWPORT (CRUCIAL PARA MÓVILES) -->
<!-- width=device-width: El ancho de la página se ajusta al ancho del dispositivo -->
<!-- initial-scale=1.0: El zoom inicial es 1 (tamaño real, sin zoom) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Título que aparece en la pestaña del navegador -->
<title>MindAR + Lector de Barras</title>

<!-- ENLACE A LA HOJA DE ESTILOS -->
<!-- Conectamos con el archivo 'style.css' -->
<link rel="stylesheet" href="style.css">

<!-- --- ZONA DE IMPORTACIÓN DE LIBRERÍAS --- -->

<!-- A-FRAME: El motor gráfico base para crear escenas 3D en la web -->
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>

<!-- MINDAR (VERSIÓN IMAGEN): La librería de Realidad Aumentada -->
<!-- Usamos la versión 'aframe' para que se integre con la librería anterior -->
<script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>

<!-- HTML5-QRCODE: Librería especializada en usar la cámara para leer códigos -->
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>

</head>

<!-- 3. CUERPO (BODY) -->
<!-- Todo lo visible e interactivo va aquí dentro -->
<body>

<!-- --- CAPA DE INTERFAZ DE USUARIO (UI - 2D) --- -->
<!-- Estos elementos flotan sobre la cámara AR gracias al CSS -->

<!-- PANEL DE RESULTADOS -->
<!-- Un cuadro pequeño que muestra el código cuando se detecta -->
<div id="result-overlay">
<!-- Título estático en negrita -->
<strong>Código detectado:</strong><br>
<!-- Espacio vacío (span) donde JavaScript escribirá el número leído -->
<span id="result-text">-</span>
</div>

<!-- BOTÓN DE ACCIÓN PRINCIPAL -->
<!-- Al hacer clic, ejecuta la función 'startBarcodeScanner()' del archivo JS -->
<button id="scan-btn" onclick="startBarcodeScanner()">📷 Escanear Código de Barras</button>

<!-- CONTENEDOR DEL ESCÁNER (PANTALLA NEGRA) -->
<!-- Inicialmente oculto. Contiene la vista de cámara del lector de códigos -->
<div id="scanner-container">
<!-- Texto de instrucción para el usuario -->
<div style="color:white; margin-bottom: 10px;">Apunta al código de barras</div>

<!-- ÁREA DE VIDEO DEL LECTOR -->
<!-- La librería HTML5-QRCode inyectará su video dentro de este div 'reader' -->
<div id="reader"></div>

<!-- BOTÓN DE SALIDA -->
<!-- Permite cerrar el escáner manualmente y volver a la AR -->
<button id="close-scanner" onclick="stopBarcodeScanner()">Cerrar Escáner y Volver a AR</button>
</div>

<!-- --- ESCENA DE REALIDAD AUMENTADA (3D) --- -->
<!-- 'a-scene' es el mundo 3D donde ocurre la magia -->
<!-- mindar-image: Componente principal de configuración AR -->
<!-- imageTargetSrc: Ruta al archivo .mind (tu marcador compilado) -->
<!-- maxTrack: Cuántas imágenes distintas buscar al mismo tiempo-->
<a-scene
mindar-image="imageTargetSrc: ./targets.mind; maxTrack: 2"
color-space="sRGB"
renderer="colorManagement: true, physicallyCorrectLights"
vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false">

<!-- GESTOR DE ACTIVOS (ASSETS) -->
<!-- Precargamos los modelos 3D para mejorar el rendimiento -->
<a-assets>
<!-- Definimos el modelo 'Wolf.glb' y le asignamos el ID 'wolfModel' -->
<a-asset-item id="wolfModel" src="./Wolf.glb"></a-asset-item>
</a-assets>

<!-- CÁMARA VIRTUAL -->
<!-- Es el punto de vista del usuario en el mundo 3D -->
<!-- look-controls=false: Desactivado porque en AR movemos el teléfono, no la vista -->
<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

<!-- ENTIDAD DE RASTREO (TARGET) -->
<!-- targetIndex: 0 se refiere a la primera imagen que subiste a la herramienta de MindAR -->
<!-- Todo lo que esté dentro de esta etiqueta 'a-entity' se pegará a esa imagen -->
<a-entity mindar-image-target="targetIndex: 0">

<!-- EL MODELO 3D (EL LOBO) -->
<!-- src: Referencia al ID del asset cargado arriba -->
<a-gltf-model
src="#wolfModel"
rotation="0 0 0"
position="0 0 0"
scale="0.5 0.5 0.5"
animation="property: position; to: 0 0.1 0; dir: alternate; dur: 2000; loop: true">
<!-- Explicación de la animación: -->
<!-- Mueve el modelo 0.1 metros arriba y abajo en un ciclo infinito -->
</a-gltf-model>
</a-entity></-scene>

<!-- VINCULACIÓN DEL SCRIPT -->
<!-- Conectamos el archivo 'script.js' que contiene la lógica -->
<script src="script.js"></script>

</body>
</html>

La verdadera magia de la WebAR no reside solo en mostrar modelos 3D impresionantes, sino en su capacidad para conectarse con datos reales del mundo físico. Al integrar un lector de códigos de barras con MindAR, transformamos un simple navegador web en una herramienta logística y de marketing completa.

Ya no obligamos al usuario a elegir entre escanear un precio o vivir una experiencia; le damos ambas cosas en una interfaz fluida y sin fricción (sin instalar apps). Este prototipo es solo el comienzo: imagina manuales de instrucciones que aparecen al escanear la caja de un mueble o información nutricional interactiva al leer un paquete de galletas. La tecnología está aquí, y es más accesible que nunca.

Puedes descargar todo el código fuente desde mi patreon ya listo para funcionar desde el siguiente link: Descarga aquí todo en un solo archivo.