Interactieve 360 video en foto op je eigen site (simpel)

embed_vr_eigen_site
Hoe embed je een interactieve, Immersive, Cardboard compatible en werkende 360° video of foto op je eigen website zonder het gebruik van plugins, pano-viewers etc etc? Het antwoord is: met VR Views, een eind maart door Google gepresenteerde Tool die de VR content zo op je site tevoorschijn tovert, dit door eenvoudig weg 1 regel iframe te gebruiken. Het resultaat is een 360° foto of video op je eigen website waar de bezoeker met "vegen" of "mousedrag" in kan rondkijken, bezoekers die je site via een Smartphone bekijken kunnen de telefoon gewoon bewegen om rond te kijken in de foto. Als men het Cardboard icoontje aantikt is de foto of video zelfs in een Cardboard of andere mobiele VR bril te bekijken. Wij doken hier uiteraard gelijk uitgebreid in en testen een en ander. Hieruit komt een stap voor stap handleiding tot stand die we uiteraard graag met je delen

Wie kunnen hier wat mee?

  • Makelaars kunnen nu zelf 360° maken en zo op hun eigen website zetten zonder tussenkomst van dure fotografen, programmeurs of software
  • Bedrijven zetten eenvoudig een 360° virtuele tour op hun website
  • Bloggers bieden hun bezoekers net dat stukje extra, verbaas je bezoekers met de mooiste 360° content op je blog (lees bijv hier hoe je zelf een 360° video kan maken)
  • Evenementen geef je aankomende bezoekers vast een kijkje op het festivalterrein of complex met slechts 1 regeltje code
Afijn, de lijst is onmetelijk lang. Bedenk zelf hoe je dit kan toepassen in jouw tak van sport Met Virtual Reality op je website ben je helemaal klaar voor de toekomst! Lees onder deze foto hoe je dit op je eigen site voor elkaar krijgt.
Aangezien de meeste mensen tegenwoordig wel werken met Wordpress hebben we dit als basis genomen, uiteraard kan je de 360° foto via elk platform op je website embedden.

Compatibiliteit:

Eigen VR content op je eigen site is natuurlijk mooi maar het is goed om eerst te bepalen wie het straks wel of niet kan zien. Internetbrowsers:
  • Up to date versie van Chrome ope: Windows, OSX, Linux, Android, en iOS.
  • Up to date versie van Safari op OSX en iOS.
  • Up to date versie van Firefox op Windows, OSX, and Linux.
  • Up to date versie van IE 11 en Edge op Windows.
Het is duidelijk dat deze techniek op vrijwel alle gangbare internetbrowsers wordt ondersteund mits deze up to date zijn.

Stap 1: Zorg voor een foto of video

De foto of video dient aan een aantal eisen te voldoen. VR Views ondersteunt zowel Mono als Stereo 360° foto's en video's. Foto en video moeten opgeslagen zijn in het "Equirectangular-Pano" formaat. Dit klinkt redelijk ingewikkeld maar dit is de gangbare standaard op de meeste 360° Camera's. Als je die niet bezit is er geen man overboord: de Google Cardboard Camera android-app gebruikt hetzelfde formaat. Voor iPhone gebruikers: De Google Cardboard Camera app zit tegenwoordig verstopt in de Streetview App. (open de app, tik het plusje rechtsonderin en selecteer: camera). Het formaat en type waarin de foto opgeslagen (of geresized) dient te worden Let op; er worden meerdere problemen gemeld bij het gebruik van monofoto's, wij raden dan ook aan om gebruik te maken van het stereoformaat. Dit kan je eenvoudig zelf creeren met behulp van bijvoorbeeld Paint.

Foto:

[caption id="attachment_2595" align="alignright" width="207"]mono Dit is Mono[/caption]
  • VR View foto's kunnen opgeslagen worden in PNG, JPEG of GIF (JPEG wordt aangeraden)
  • Voor maximale compatibiliteit worden foto's van 2048  of 4096 px aangeraden
  • Mono foto's dienen in 2:1 aspect ratio te zijn (bijvoorbeeld: 4096 x 2048) (af te raden formaat)
  • Stereo foto's dienen in 1:1 aspect ratio te zijn (bijvoorbeeld 4096 x 4096) (dit zijn feitelijk 2 x 2048 px foto's op elkaar gestapeld)

Video:

[caption id="attachment_2596" align="alignright" width="202"]stereo Dit is Stereo[/caption]
  • VR View video's dienen opgeslagen te zijn als MP4 met een h264 encoding.Mono videos dienen een 2:1 aspect ratio te hebben.
  • Mono videos dienen een 1:1 aspect ratio te hebben
  • Aangezien sommige oudere apparaten last hebben met het decoden van videomateriaal groter dan 1080P (1920x1080) en je wil het op safe spelen is dit ook het aan te raden formaat

Stap 2: Maak de foto of video online beschikbaar

We hebben Wordpress als basis genomen, om hier een foto te uploaden ga je als volgt te werk: Ga in de linker menubalk naar Media/nieuw bestand en selecteer de gewenste foto/video om te uploaden. LET OP: zorg dat je image-optimalization plugins als WPSmush uitschakelt bij het uploaden, dit kan namelijk op een later moment voor problemen zorgen. Als de foto of video is geüpload klik je deze, in de bibliotheek een keer aan. Kopieer vervolgens de volledige URL van de foto of video en plak deze ergens in een notepad bestandje of iets dergelijks. Je hebt deze URL zo nodig in de volgende stap. url

Stap 3: Gebruik van de VR View iframe code

Tijd om het iframe te bewerken, dit is ook de enige code die je zo hoeft toe te voegen in je pagina of bericht.
<iframe width="100%" allowfullscreen frameborder="0" src="//storage.googleapis.com/vrview/2.0/index.html?image=//www.de_de_volledige_url_van_jouw_bestand.jpg&is_stereo=true"></iframe>
Het rode gedeelte vervang je voor de URL die je in de vorige stap in een notepad bestandje (of ergens anders) hebt geplakt. LET OP: verwijder het HTTP:// gedeelte, deze wordt er over het algemeen automatisch bijgezet als je de URL plakt. Je ziet een paar parameters terug in deze iframe (de code zoals die hier staat is voor gebruik met een mono foto als eerder aangegeven) width="100%" Dit zorgt voor een 100% breedte weergave allowfullscreen : Dit maakt de "volledig scherm" optie beschikbaar. (tip: dit geeft de beste gebruikerservaring)  frameborder="0" :dit verbergt het kader rondom de iframe (gangbaar, dit staat over het algemeen beter dan met kader) image : als het om een video gaat, je raadt het al.. moet daar video staan is_stereo=true: deze staat, omdat we een stereofoto gebruiken op true, wijzig dit in false als je een monofoto gebruikt.

We zijn nu klaar om de code te implementeren.

Open de pagina of het bericht waar je de VR content wilt laten zien. (nieuw of bestaand) Zet vervolgens de selectie in je tekstverwerkings gedeelte op "tekst" tekst Plak nu de volledige code in je pagina of bericht en zet de selectie terug van "tekst" naar "visueel". Als alles goed is zie je nu in ieder geval een grijs vlak verschijnen met een "Play" symbooltje in het midden.

Stap 4: Publiceren en testen

Publiceer je post of pagina en controleer de volgende zaken:
  • Zie je de foto of video?
  • Kan je "rondkijken" in deze foto of video door middel van het slepen van je muis?
  • Open de pagina of bericht vervolgens op je mobiel.
  • De preview die je als eerste ziet zou je moeten kunnen "rondslepen" door middel van "vegen"
  • Tik vervolgens de "Full screen" optie (het vierkantje rechtsonderin), je moet nu een full screen krijgen en je moet kunnen "rondkijken" door je telefoon te bewegen.
  • Als laatste tik je het cardboard symbooltje aan, er moet nu een een scherm "Place your phone into your Cardboard Viewer" verschijnen, draai je telefoon in "landschaps modus" en er verschijnen, als alles goed is gegaan, 2 beelden naast elkaar.
Je hebt nu 360° VR compatible content op je website geïntegreerd!

Troubleshooting

CORS:

Nu zal je altijd zien dat er bij jou iets niet werkt. Een van de voorwaarden om dit te laten functioneren is dat de foto of video beschikbaar is via CORS, (Cross Origin Resource Sharing) Neem niet de moeite om hier alles over te lezen (het houdt kortgezegd in dat er vaak een standaard security-maatregel aanwezig is die voorkomt dat bijv. AJAX (niet de voetbalclub) of webfonts zaken aanroepen die buiten de origine van het domein zelf vallen.) Mocht eea niet werken kan je een aanpassing in je HTACCESS maken. LET OP: maak altijd eerst een backup van je HTACCESS, als hier iets verkeerd mee gaat is je site niet meer te benaderen. Voor Apache servers voeg je de volgende code toe aan je HTACCESS:
Header set Access-Control-Allow-Origin "*"
Voor andere servertypes raadpleeg je deze site.

Render: Unable to load texture from //XXXXX

De foto's die worden gegenereerd in de Google Cardboard App zijn niet in het vereiste formaat. Je kan hier een converter vinden om het gewenste formaat te verkrijgen. SSL: let op dat als je op HTTPS zit je geen inhoud kan ophalen van een HTTP adres, je browser laat dit (om goede redenen) niet toe. Tip: lees ook hoe je zelf 360 video kan maken!