Saltar al contenido principal

Hospedaje local

A Pro or Enterprise plan is required to host WebAR projects on your own web servers.

To purchase a Pro plan, please see https://www.8thwall.com/docs/guides/account-settings/#purchase-plan

Introducción​

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

Para desarrollar localmente, necesita tener instalados Node.js y npm. Si aún no tiene instalados Node.js y npm, obténgalos aquí.

  1. Descargue el código fuente del repositorio de GitHub de 8th Wall y cd en un ejemplo de su elección (se recomienda aframe 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 con la autorizando el dispositivo o agregando el dominio a la lista blanca (localhost/dirección IP).
  4. Entregue un directorio de proyecto en su red local a través de HTTPS con http-server. Consulte Entregar proyectos por 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.

Entregar proyectos por HTTPS​

Los navegadores requieren certificados HTTPS para acceder a la cámara. Utilice http-server para entregar 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

Luego de ingresar el comando, deberá responder 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 (alrededor de 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 su teléfono móvil no podrá conectarse directamente a esa dirección IP. 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 de http-server.

Ver proyecto en iOS​

  1. Abra Safari en iOS 11 o versiones posteriores y conéctese a una de las URL "Disponible en". Nota: Safari mostrará un mensaje sobre los certificados SSL, pero se puede proceder con seguridad.

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

Ejemplo: https://10.0.0.99:8080

  1. Haga clic en "visitar este sitio":

¡iOSConnect1

  1. Haga clic en "Mostrar detalles":

¡iOSConnect2

  1. Haga clic en "Visitar sitio":

¡iOSConnect3

  1. Por último, haga 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. Abra 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 y de incluir "https://" al principio y el número de puerto al final.

Ejemplo: https://10.0.0.99:8080

  1. Ejemplo de Chrome: El navegador mostrará un mensaje sobre que el certificado no es válido. Haga clic en 'CONFIGURACIÓN AVANZADA' para continuar:
AndroidConnect1
  1. Haga clic en "Continuar a... (no seguro)":
AndroidConnect2