Mit Google VR-View 360-Grad-Fotos in eigene Webseite einbinden
Google Cardboard ist eine günstige Möglichkeit um aus einem Smartphone und einem Pappkasten mit Linsen eine Virtual-Reality Brille zu erstellen. Wer will kann sich die Brille sogar mit folgender Anleitung selbst bauen.
Allerdings muss man die Displaygröße des Geräts beachten. Mein Galaxy Note 3 ist z.B. zu groß. Auch die Linsen selbst sind nicht allzu leicht zu bekommen. Aber zurück zum Thema: Wir wollen ein 360-Grad 3D-Bild aufnehmen und dann auf unserer Webseite für Cardboardbesitzer anbieten. Google stellt mit VR-View eine einfache Möglichkeit bereit. Das Vorgehen ist bei Google Developers recht gut beschrieben. Allerdings fehlen ein paar Details. Die ich nun nennen will.
Wie nehme ich das Bild auf und in welchem Format muss es vorliegen?
Google nennt hier zwei Möglichkeiten: Cardboard Camera App und Ricoh Theta. Ich habe mittels Kommentar im Google Developers Blog darauf hingewiesen, dass das Format, in dem Google Cardboard Camera aufnimmt, nicht passend ist für VR-View. Der Kommentar ist seit einiger Zeit gelöscht worden. Wahrscheinlich wegen der bevorstehenden IO16 Konferenz. Hierzu hat Google nun auch ein Tool angeboten, mit dem man Bilder der Cardboard Camera in das passende Equirect-pano-Format umrechnen kann (das Tool funktioniert nur in Chrome). Allerdings nicht besonders schön, da einfach das Bild verschwommen nach oben durchgezogen wird.
Meine Lösung war die Samsung Kamera mit dem „Modus 360° Aufnahme“. Mehr zur Aufnahmetechnik hier. Offiziell nennt sich das Feature Surround Shoot. Leider ist das nicht bei allen Samsung Modellen verfügbar. Ich weiß vom Galaxy Note 3 und vom Galaxy S5. Leider gibt es diese Funktion bei anderen Modellen nicht. Eine Alternative ist die Google Streetview App. Um ein 360 Panorama aufzunehmen benötigt man ein Gyroskop im Handy (Eine Überprüfungsmöglichkeit habe ich in einem anderen Beitrag beschrieben). Dann tippt man auf + und auf Kamera. Danach läuft das Prozedere in beiden Apps ähnlich ab: Man muss mehrere Punkte im Raum anvisieren und sich dabei möglichst wenig bewegen. Google Streetview bietet in der App keine Exportfunktion an. Aber man findet das Bild in der Galerie unter Panoramas.
Um ein 3d_Bild (Stereo) zu erhalten, muss man das Bild nach der Aufnahme noch mit einem Grafikprogramm duplizieren, übereinander legen und dann als jpg abspeichern. Am besten mit der Endung *.vr.jpg. VR-View erkennt das dann automatisch als 3D-Bild wenn man es über den Parameter is_stereo=true aufruft. Wie die Anzeige des 3D-Bildes funktioniert folgt jetzt:
360-Grad-Bild auf eigener Webseite für Cardboard anbieten
Nachdem das Bild bearbeitet wurde speichert man es auf dem eigene Server ab. Der „Viewer“ besteht lediglich aus einem iFrame. Die Technik dahinter kann man von Google einbinden oder selbst hosten. Selbst hosten (in diesem Fall über GitHub Pages) wird hier beschrieben. Auf dem eigenen Server lädt man sich das GitHub Repository runter (man braucht nicht alles z.B. bei Apache den Ordner Node-Modules nicht), extrahiert es, lädt es in ein Verzeichnis (vr_selfhosting_ordner), legt dort die Bilder ab und kann dann auf der eigenen Seite das Bild über einen iFrame einbinden:
<iframe src="https://www.EIGENEDOMAIN.de/vr_selfhosting_ordner/?image=bilddateiname.vr.jpg&is_stereo=true" width="100%" height="300px" frameborder="0" allowfullscreen="allowfullscreen"></iframe>Zum ausprobieren geht es schneller über die Einbindung über Google. Hierzu muss das Bild über CORS erreichbar sein. Das geht über eine .htaccess Datei im Ordner in dem das Bild liegt:
<FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
SetEnvIf Origin ":" IS_CORS
Header set Access-Control-Allow-Origin "*" env=IS_CORS
</FilesMatch>Danach kann man eine HTML Seite erstellen in der man folgenden Code zur Einbindung des Viewers einfügt:
<iframe src="//storage.googleapis.com/vrview/index.html?image=/PFADZURBILDDATEI/bilddateiname.vr.jpg&is_stereo=true" width="100%" height="300px" frameborder="0" allowfullscreen="allowfullscreen"></iframe>Das war‘s schon. Es gibt noch einige optionale Parameter für die URL und den iFrame die man nutzen kann.
VR-view nur für passende Geräte anzeigen
An einem Desktoprechner kann man mit der Maus das Bild hin und herziehen, allerdings sieht alles wegen der Aufnahmemethode etwas seltsam aus. Für die Nutzung benötigt man in seinem Gerät wiederum ein Gyroskop – andernfalls kann man die Cardboard App gar nicht erst installieren. Es bietet sich daher an, auf der Seite zunächst zu prüfen, ob das Gerät ein Gyroskop besitzt. Das Vorgehen zum Test habe ich bereits beschrieben. Man kann einen Schritt weitergehen und bei erfolgreichem Test über Jquery den iFrame dynamisch hinzuladen:
See the Pen Emdedd VR-View when gyroscope by uli schaeffler (@ulrischa) on CodePen.
Da iOS Probleme macht könnte man zusätzlich noch den User-Agent abfragen und die Anzeige auf Nicht-iOS Geräte beschränken.
Und wie kann man sicherstellen, dass nur die eigenen Bilder gezeigt werden? Und nicht die von anderen Nutzern?
Hallo Anton. Man legt die Bilder auf dem eigenen Server ab. Dadurch können eigentlich keine Bilder von anderen dargestellt werden. Für die Cross-origin iframe Einbindung kann man die zugelassenen Domains wie hier beschrieben (https://www.ulrischa.de/allow-origin-header-fuer-mehrere-domains-setzen/) begrenzen.