Modifique MindAR para tener cámara HD y grabación de video

ingcarlosreina con una imagen mostrando las adiciones y mejorar para la libreria MindAR de realidad aumentada — Modifique MindAR para tener cámara HD, grabación de video, autofocus, señal de marcador y mas.

Llevando la Realidad Aumentada Web al Siguiente Nivel

La librería MindAR es una herramienta fantástica para llevar la Realidad Aumentada a la web, pero su configuración por defecto prioriza la compatibilidad con dispositivos antiguos, sacrificando calidad visual y funcionalidades modernas.

Hemos realizado ingeniería inversa al núcleo de la librería para crear MindAR Ultimate: una versión vitaminada que desbloquea todo el potencial de los navegadores móviles modernos.

¿Qué hay de nuevo en esta versión?

A diferencia de la versión estándar, esta modificación incluye mejoras que no se pueden lograr simplemente inyectando scripts externos.

Calidad Visual Cinematográfica (HD)

Olvídate de la cámara borrosa. Hemos reescrito el controlador de video para negociar resoluciones de 1280×720 (HD) o superiores directamente con el hardware del dispositivo.

Antes: Video pixelado (VGA) y dificultad para leer marcadores pequeños.

Ahora: Imagen nítida, enfoque continuo y mejor balance de blancos.

Motor de Grabación de Video Híbrido

La característica más solicitada. Hemos implementado un sistema de grabación nativo que sincroniza el ciclo de renderizado (tock) para capturar tanto la cámara como el modelo 3D sin errores de sincronización.

Antes: Se debía crear un script dentro del HTML que permitiera crear toda la funcion de grabar en tiempo real la app sin necesidad de utilizar el grabar pantalla del movil.

Ahora: Permite agregar con una sola línea de código en el HTML el botón de grabar la app (uiRecording: true;).

Optimizado: Grabación a 20 FPS para no sobrecalentar el móvil.

Interfaz de Usuario «Zero Config»

Ya no necesitas diseñar botones ni estilos CSS para cada proyecto. La librería ahora detecta tus intenciones e inyecta una interfaz profesional automáticamente:

Botón de Foto: Genera capturas de alta calidad instantáneas.

Botón de Video: Grabación con indicador de estado (Rec/Stop).

Scanner: Barras de señal visuales que indican la calidad del rastreo del marcador .mind.

Control de Hardware (Bridge API)

Hemos abierto un puente (window.mindARControl) que te permite controlar características físicas del teléfono que antes estaban bloqueadas:

Linterna (Torch): Vital para experiencias en museos o lugares oscuros donde el reconocimiento del marcador .mind se dificulte.

Zoom Digital: Permite al usuario acercar la imagen sin moverse físicamente. Cuando el marcador es reconocido el zoom con dos dedos se bloquea, cuando no está apuntando al marcador puedes hacer zoom con dos dedos.

¿Por qué usar esta versión modificada de MindAR para tus proyectos o para el desarrollo de Apps de realidad aumentada?

Para el desarrollador, esta versión significa menos código. No necesitas scripts externos para manejar la cámara, ni trucos CSS para los botones, ni librerías pesadas para grabar video.

Simplemente importas mindar-image-aframe.prod.js, agregas uiRecording: true a tu escena, y tienes una experiencia de Realidad Aumentada lista para producción, compatible con redes sociales y con una calidad visual que tus usuarios agradecerán.

Esta versión es el resultado de optimizar el código fuente original para las demandas actuales de la web móvil.

veamos un ejemplo completo:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="./mindar-image-aframe.prod.js"></script>
</head>
<body>

<a-scene
mindar-image="imageTargetSrc: ./targets.mind; uiPhoto: true; uiScanner: true; uiRecording: true; uiTorch:true; filterMinCF:1; filterBeta:10000; warmupTolerance:0.5; missTolerance:0.5;"
color-space="sRGB"
renderer="colorManagement: true, physicallyCorrectLights"
vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false">

<a-assets>
<a-asset-item id="modelo" src="./gf13-017njii_god_gundam.glb"></a-asset-item>
</a-assets>

<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

<a-entity mindar-image-target="targetIndex: 0">
<a-gltf-model src="#modelo" rotation="0 0 0" position="0 0 0" scale="1 1 1"></a-gltf-model>
</a-entity>
</a-scene>

</body>
</html>

Este es uno de los ejemplos más simples que podemos hacer para una WebAR, la cual muestra un modelo 3D en formato glb. Por cierto, el modelo lo pueden descargar desde: Sketchfab

¿Como accedemos a los nuevos elementos de esta librería de MindAR modificada?

uiPhoto: true; – De esta manera activamos el botón de tomar fotografía.
uiScanner: true; – Si utilizamos uiScanner en true y no en false activamos la barra que nos indica si el marcador está siendo reconocido o no.
uiRecording: true; – Botón para grabar tu aplicación de realidad aumentada.
uiTorch:true; – Activa la linterna para que puedas desarrollar aplicaciones con poca iluminación.

DESCARGA AQUI el archivo fuente.

Te invito a ver otro post que son muy interesantes para el desarrollo de aplicaciones de realidad aumentada.