Zum Hauptinhalt springen

Lokales Hosting

Wenn Sie einen kostenpflichtigen Pro- oder Enterprise-Plan haben, können Sie WebAR-Projekte auf Ihren eigenen Webservern hosten.

Wenn Sie eine kostenlose Testversion nutzen, müssen Sie [auf einen kostenpflichtigen Pro Plan upgraden] (https://www.8thwall.com/docs/guides/account-settings/#change-plan).

Erste Schritte​

Folgen Sie der Anleitung für die ersten Schritte, indem Sie selbst gehostete Beispielprojekte aus dem [8th Wall Github Repository] (https://github.com/8thwall/web) klonen.

Um lokal zu entwickeln, müssen Sie Node.js und npm installieren. Wenn Sie Node.js und npm noch nicht installiert haben, können Sie es hier herunterladen (https://www.npmjs.com/get-npm).

  1. Laden Sie den Quellcode aus dem 8th Wall Github Repository herunter und cd in ein Beispiel Ihrer Wahl (aframe wird für Anfänger empfohlen).
  2. Ersetzen Sie den App-Schlüssel in index.html durch Ihren App-Schlüssel von der Projekteinstellungsseite in der 8th Wall Konsole.
  3. Autorisieren Sie den Zugriff auf Ihren App-Schlüssel auf Ihrem Gerät durch Autorisierung des Geräts oder Whitelisting der Domain (localhost / IP-Adresse).
  4. Stellen Sie ein Projektverzeichnis in Ihrem lokalen Netzwerk über HTTPS mit http-server bereit. Siehe [Projekte über HTTPS bereitstellen] (https://www.8thwall.com/docs/guides/advanced-topics/local-hosting/#serve-projects-over-https).
  5. Stellen Sie von Ihrem Gerät aus eine Verbindung zu Ihrem Server her, akzeptieren Sie Zertifikatswarnungen und Kamerarechte. Siehe [Projekt auf iOS anzeigen] (https://www.8thwall.com/docs/guides/advanced-topics/local-hosting/#view-project-on-ios) oder [Projekt auf Android anzeigen] (https://www.8thwall.com/docs/guides/advanced-topics/local-hosting/#view-project-on-android).

Projekte über HTTPS bereitstellen​

Browser benötigen HTTPS-Zertifikate für den Zugriff auf die Kamera. Verwenden Sie http-server, um Projektverzeichnisse mit HTTPS bereitzustellen.

Zunächst müssen Sie sicherstellen, dass openssl installiert ist und Sie über die Dateien key.pem und cert.pem verfügen. Sie können sie mit diesem Befehl erzeugen:

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

Nach der Eingabe des Befehls werden Sie zu einigen Fragen aufgefordert. Verwenden Sie 127.0.0.1 als Wert für Common name, wenn Sie das Zertifikat im Stammzertifikatspeicher Ihres Betriebssystems oder Browsers installieren möchten, damit es als vertrauenswürdig gilt.

Dadurch wird ein Schlüsselpaar erzeugt, das 3650 Tage (etwa 10 Jahre) lang gültig ist.

Dann können Sie http-server mit -S für die Aktivierung von SSL und -C für Ihre Zertifikatsdatei ausführen:

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

Beispiel:

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

ServeLocally

HINWEIS: Die erste aufgeführte IP-Adresse ist 127.0.0.1:8080 (das ist das Loopback-Gerät alias "localhost"), und Ihr Mobiltelefon kann sich nicht direkt mit dieser IP-Adresse verbinden. Bitte verwenden Sie eine der anderen IP-Adressen.

WINDOWS-BENUTZER: Führen Sie den Befehl http-server in einem Standard-Eingabeaufforderungsfenster (cmd.exe) aus. Das Skript kann Fehler erzeugen, wenn es über PowerShell ausgeführt wird.

Weitere Informationen finden Sie in der http-server documentation.

Projekt auf iOS anzeigen​

  1. Öffnen Sie Safari auf iOS 11+, und stellen Sie eine Verbindung zu einer der URLs "Verfügbar auf" her. Hinweis: Safari beschwert sich über der SSL-Zertifikate, aber Sie können gefahrlos fortfahren.

WICHTIG: Stellen Sie sicher, dass Sie die gesamte "Available on"-URL in Ihren Browser kopieren, einschließlich der beiden , der "https://" am Anfang und der Port-Nummer am Ende.

Example: https://10.0.0.99:8080

  1. Klicken Sie auf "Diese Website besuchen":

iOSConnect1

  1. Klicken Sie auf "Details anzeigen":

iOSConnect2

  1. Klicken Sie auf "Website besuchen":

iOSConnect3

  1. Klicken Sie abschließend auf "Zulassen", um die Kamerazulassung zu erteilen und das AR-Beispiel zu sehen:

iOSConnect4

Projekt auf Android anzeigen​

  1. Öffnen Sie Chrome, eine Chrome-Variante (z.B. Samsung Browser) oder Firefox.

WICHTIG: Stellen Sie sicher, dass Sie die gesamte "Available on"-URL in Ihren Browser kopieren, einschließlich der beiden , der "https://" am Anfang und der Port-Nummer am Ende.

Example: https://10.0.0.99:8080

  1. Beispiel für Chrome: Der Browser meldet, dass das Zertifikat ungültig ist. Klicken Sie einfach auf "ERWEITERT", um fortzufahren:
AndroidConnect1
  1. Klicken Sie auf "WEITER ZU ... (UNSAFE)":
AndroidConnect2