Add Virtual Reality To Your Website For Free!

Thanks to Google’s free tools and open source code, the barrier to entry for virtual reality website integration has been eliminated! If you have a smartphone, you have all the tools you need to get a VR experience up and running on your website within 15 minutes. Here’s how.

Don’t I need a special camera?

360 degree camera
No, you don’t. Expensive VR cameras will capture high quality 360 degree images, but they are not necessary for entry-level folks. Your smartphone is fully capable of capturing a 360 degree image via Google’s Street View application, so don’t bother paying for an app either. You probably already have Street View installed, but if not, its free to download.

I have “Street View” installed. Now what?

Street View App Icon

Launch the Street View app and look for the orange “add a photo” button. When prompted to choose how you want to add your photo, select “camera.” Now, follow the onscreen prompts to take your 360 degree photo. The process requires that you point your camera in many different directions to capture small photo tiles that will be “stitched” together by Google’s application. The photo capture process is time consuming, and it may take you a few tries to get it right, but the results can be astonishing.

TIP: try to keep your phone stationary at the same point in space for each and every photo tile you capture. Patience, care, and a steady hand will yield the best results, while a haphazard effort will lead to an image that looks like a messy collage.

Ok, I captured the 360 degree photo. How do I get this on my website?

Again, this is much easier than you think. First of all, you need to find the source file for the image you just captured. When you capture a 360 degree photo using the Google Street View app, the image will automatically be stretched into a flat JPEG file, and saved locally to your device wherever photos are normally stored. The flat image will look extremely distorted, much like this:
360 degree panorama stretched into a flat image
Now you need to host this image online so that you can reference its URL in an embed code. The process varies depending on the platform you are using, but typically, this step can be described as “adding the photo to your website’s file manager.” Once you have successfully done so, identify the image’s URL. It may look something like this:

https://storage.googleapis.com/code-gs.ihouseprd.com/mws_blog/2016/10/tossademar.jpg

Now, copy and paste the following snippet (Google’s FREE Open Source VR embed code) into the HTML source of your webpage to insert a VR window:

<iframe src=”//storage.googleapis.com/vrview/index.html?image=https://storage.googleapis.com/code-gs.ihouseprd.com/mws_blog/2016/10/tossademar.jpg” width=”100%” height=”300px” frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

Substitute the red portion for your own image URL. And the result is this: View this on a mobile device to get the full effect of VR. Expand to fullscreen for a more immersive experience, and optionally enable “Google Cardboard” mode to view the photo with a VR headset. Congratulations! You are now offering a cutting-edge VR experience on your website! In time, you may want to upgrade to a full-fledged 360 degree camera to take higher quality photos, or even 360 degree videos. But for an entry level VR experience, you can’t beat this free solution. I hope this article encourages website owners to embrace the exciting and growing trend of VR in the real estate industry. If you have any questions, feel free to post a comment below, or visit Google’s developer guide for more detailed instructions: https://developers.google.com/vr/concepts/vrview-web