Lokales Hosting

Um WebAR-Projekte auf Ihren eigenen Webservern zu hosten, benötigen Sie einen Pro- oder Enterprise-Plan.

Um einen Pro-Plan zu erwerben, besuchen Sie bitte https://www.8thwall.com/docs/guides/account-settings/#purchase-plan.

Erste Schritte

Folgen Sie der Anleitung für die ersten Schritte, indem Sie selbst gehostete Beispielprojekte aus dem 8th Wall Github Repository klonen.

Um lokal zu entwickeln, müssen Sie Node.js und npm installieren. Falls 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 (für Anfänger wird aframe 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. Genehmigen 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. Erstellen Sie über HTTPS mit http-server ein Projektverzeichnis in Ihrem lokalen Netzwerk. Siehe Projekte über HTTPS bereitstellen.
5. Stellen Sie von Ihrem Gerät aus eine Verbindung zu Ihrem Server her und akzeptieren Sie Zertifikatswarnungen und Kamerazugriffsrechte. Siehe Projekt auf iOS anzeigen oder Projekt auf Android anzeigen.

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 die Dateien key.pem und cert.pem angezeigt werden. Diese 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 Ihnen einige Fragen gestellt. 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

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 wird eine Meldung über die SSL-Zertifikate anzeigen, Sie können aber problemlos auf „Weiter“ klicken.

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

Beispiel: https://10.0.0.99:8080

2. Klicken Sie auf „Diese Website besuchen“:

3. Klicken Sie auf „Details anzeigen“:

4. Klicken Sie auf„Website besuchen“:

5. Klicken Sie abschließend auf „“Zulassen“, um die Kamerazulassung zu erteilen und das AR-Beispiel anzuzeigen:

Projekt auf Android anzeigen

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

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

Beispiel: https://10.0.0.99:8080

2. Beispiel für Chrome: Der Browser meldet, dass das Zertifikat ungültig ist. Klicken Sie zum Fortfahren einfach auf „ERWEITERT“:

3. Klicken Sie auf „WEITER ZU ... (UNSICHER)“: