Saltar al contenido principal

Hospedaje local

Si tienes un plan Pro o Enterprise de pago, podrás alojar proyectos WebAR en tus propios servidores web.

Si tiene una versión de prueba gratuita, debe pasar a un Plan Pro de pago.

Cómo empezar

Siga la guía de inicio clonando proyectos de ejemplo autoalojados del Repositorio Github de 8th Wall.

Para desarrollar localmente necesitas tener instalado Node.js y npm. Si aún no tienes instalado Node.js y npm, consíguelo aquí.

  1. Descarga el código fuente del Repositorio Github de 8th Wall y cd en un ejemplo de tu elección (aframe se recomienda para principiantes).
  2. Sustituya la clave de aplicación en index.html por su clave de aplicación de la página de configuración del proyecto en la consola de 8th Wall.
  3. Autorice el acceso a su clave de aplicación en su dispositivo mediante autorización del dispositivo o lista blanca del dominio (localhost / dirección IP).
  4. Sirva un directorio de proyecto en su red local a través de HTTPS con http-server. Véase Servir proyectos sobre HTTPS.
  5. Conéctese a su servidor desde su dispositivo, acepte las advertencias del certificado y los permisos de la cámara. Consulte Ver proyecto en iOS o Ver proyecto en Android.

Servir proyectos a través de HTTPS

Los navegadores requieren certificados HTTPS para acceder a la cámara. Utilice http-server para servir directorios de proyectos con HTTPS.

En primer lugar, debe asegurarse de que openssl está instalado y de que dispone de los archivos key.pem y cert.pem. Puede generarlos utilizando este comando:

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

Tras introducir el comando, se le plantearán algunas preguntas. Utilice 127.0.0.1 como valor para Nombre común si desea poder instalar el certificado en el almacén de certificados raíz de su sistema operativo o navegador para que sea de confianza.

Esto genera un par cert-clave que será válido durante 3650 días (unos 10 años).

A continuación, puede ejecutar http-server con -S para habilitar SSL y -C para su archivo de certificado:

npx http-server [project-path] -S -C cert.pem

Ejemplo:

npx http-server gettingstarted/aframe/ -S -C cert.pem

ServeLocally

NOTA: La primera dirección IP que aparece es 127.0.0.1:8080 (que es el dispositivo loopback también conocido como "localhost") y tu teléfono móvil no podrá conectarse directamente a esa dirección IP. Por favor, utilice una de las otras direcciones IP.

USUARIOS DE WINDOWS: Ejecute el comando http-server utilizando una ventana estándar de símbolo del sistema (cmd.exe). El script puede generar errores si se ejecuta desde PowerShell.

Más información en la documentación del servidor http.

Ver proyecto en iOS

  1. Abre Safari en iOS 11+, y conéctate a una de las URL "Disponible en". Nota: Safari se quejará de los certificados SSL, pero se puede proceder con seguridad.

IMPORTANTE: Asegúrese de copiar toda la URL "Disponible en" en su navegador, incluyendo en el "https://" al principio y el número de puerto al final.

Example: https://10.0.0.99:8080

  1. Haga clic en "visitar este sitio web":

¡iOSConnect1

  1. Haga clic en "Mostrar detalles":

¡iOSConnect2

  1. Haga clic en "Visitar sitio web":

¡iOSConnect3

  1. Por último, haz clic en "Permitir" para conceder permisos a la cámara y empezar a ver la experiencia de RA de muestra:

¡iOSConnect4

Ver proyecto en Android

  1. Abre Chrome, una variante de Chrome (por ejemplo, el navegador de Samsung) o Firefox.

IMPORTANTE: Asegúrese de copiar toda la URL "Disponible en" en su navegador, incluyendo en el "https://" al principio y el número de puerto al final.

Example: https://10.0.0.99:8080

  1. Ejemplo de Chrome: El navegador se quejará de que el cert no es válido, simplemente haga clic en 'AVANZADO' para continuar:
AndroidConnect1
  1. Haga clic en "PASAR A ... (UNSAFE)":
AndroidConnect2