Como cambiar la resolución de la cámara con MindAR

ingcarlosreina mostrando un modelo 3D en realidad aumentada enseñando como cambir la resolucion de la camara web con la libreria MindAR — Como cambiar la resolución de la cámara con MindAR

Por defecto, la librería MindAR prioriza el rendimiento sobre la calidad, configurando la cámara en resoluciones bajas (generalmente 640×480). Esto provoca que el fondo de tus experiencias de Realidad Aumentada se vea borroso o pixelado en dispositivos modernos.

En este tutorial, aprenderás a descargar el código fuente, modificar los parámetros internos de la cámara y compilar tu propia versión de la librería para lograr una experiencia HD (1280×720) nítida.

El modelo 3D utilizado para las imágenes de este articulo tutorial, lo descargue desde: Sketchfab

¿Estas cansado de ver tus aplicaciones de realidad aumentada con baja calidad en la camara incluso con telefonos de gama alta? Pues vamos a mejorar eso.

Comencemos a crear tu propia versión de la librería de realidad aumentada MindAR para mejorar la resolución de la cámara.

Requisitos Previos

El sistema de construcción (build system) de MindAR utiliza herramientas antiguas que no son compatibles con las versiones recientes de Node.js (v18, v20+).

Necesitaremos:

Terminal o línea de comandos (PowerShell).
Editor de código (VS Code). – Este es el que utilizo por defecto.
NVM (Node Version Manager) para gestionar la versión de Node. – En mi caso tenía una versión actualizada de Node.js entonces tuve que instalar el NVM para administrar con que version queria trabajar en mi equipo.

Paso 1: Preparar el Entorno (Node.js 16)

Para evitar errores durante la instalación de dependencias, debemos usar una versión específica de Node. Usaremos la versión 16.15.0. No importa si ya tienes Node.js instalado en tu equipo.

Si ya tienes una versión más actualizada de Node.js descarga NVM de la siguiente web: Releases · coreybutler/nvm-windows

y busca en la parte de abajo el archivo llamado nvm-setup.exe

Si tienes NVM instalado, abre tu terminal y ejecuta:

nvm install 16.15.0
nvm use 16.15.0

Cada uno de los anteriores comandos es un comando a la vez. Copia y pega el primero y das enter y esperas y luego haces lo mismo con el segundo comando.

Verifica que el cambio fue exitoso con node -v. Debería devolver v16.15.0.

Paso 2: Obtener el Código Fuente

Clona el repositorio oficial de MindAR en tu carpeta de trabajo:

Antes de escribir los siguientes comandos en el PowerShell te recomiendo crear una carpeta en el escritorio, llámala como tú quieras por ejemplo (MindAR-ingcarlos) y luego utilizando el comando (cd) ingresa a la carpeta que creaste por ejemplo C:\Users\USER\Desktop\MindAR-ingcarlos

Ahora si pasemos a los comandos:

git clone [https://github.com/hiukim/mind-ar-js.git](https://github.com/hiukim/mind-ar-js.git)
cd mind-ar-js

El primer comando hace una copia de la libreria de MindAR en la carpeta que creaste.

El segundo comando inicia con (cd) queriendo decir que dentro de la carpeta (MindAR-ingcarlos) hay una carpeta llamada (mind-ar-js) y que debe de ingresar y posicionarse dentro de ella.

Luego comenzara la instalacion de las dependencias necesarias.

Nota: Es posible que veas advertencias (warnings) de «Unsupported engine» en amarillo. Puedes ignorarlas siempre que el proceso finalice.

luego escribe el comando:

npm install

Paso 3: Modificar la Resolución de la Cámara

Ahora inyectaremos el código para forzar la alta definición.

Abre el proyecto en tu editor de código (Visual Studio Code) y agrega el folder a tu workspace de trabajo.

Localiza el archivo que controla la cámara en A-Frame: Esta ubicado en src/image-target/aframe.js

Busca la línea (aprox. línea 90) que contiene navigator.mediaDevices.getUserMedia.

el código que tiene Mindar Es o puede ser similar a este:

navigator.mediaDevices.getUserMedia({audio: false, video: {
facingMode: 'environment',
}}).then((stream) => {

Ahora reemplaza ese código por este:

navigator.mediaDevices.getUserMedia({audio: false, video: {
facingMode: 'environment',
width: { ideal: 1280 }, // Resolución HD (Usa 1920 para Full HD)
height: { ideal: 720 },
focusMode: { ideal: "continuous" } // Intenta forzar enfoque continuo
}}).then((stream) => {

Usamos ideal para evitar errores en dispositivos antiguos que no soporten HD, permitiendo que el navegador elija la mejor resolución disponible.

Paso 4: Compilar la Librería (Build)

Con el cambio guardado, regresamos a la terminal para generar el archivo final .js:

escribimos este comando en el PowerShell:

npm run build

Si todo sale bien, se creará una carpeta llamada dist en la raíz del proyecto.

Paso 5: Implementación en tu Web

Dentro de la carpeta dist, encontrarás el archivo mindar-image-aframe.prod.js.

Copia este archivo y pégalo en la carpeta de tu proyecto web.

En tu archivo HTML, cambia la importación del CDN por tu archivo local:

Normalmente en nuestros proyectos de MindAR lo encontramos así:

<script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js">

pero ahora ya podemos utilizar nuestra propia versión y haremos un llamado al script de la siguiente manera:

<script src="./mindar-image-aframe.prod.js"></script>

Notas Importantes

HTTPS: Para que el navegador permita acceso a la cámara HD, tu web debe estar alojada en un servidor seguro (HTTPS) o en localhost.
Batería: Usar resoluciones altas (720p/1080p) consume más batería y puede calentar más el dispositivo que la configuración estándar.
Caché: Si no ves los cambios en tu móvil, asegúrate de borrar la caché del navegador, ya que los archivos .js suelen quedarse guardados en memoria.