Over the past year or so I’ve been branching out from traditional web development and have become more and more interested in working with newer forms of digital media like Virtual Reality (VR), Augmented Reality (AR), and 360° video + photos which I want to focus on here.
360 video was huge at SXSW last year (March 2016) and myself and a couple of my colleagues came back excited and ready to jump in with both feet. We’d already purchased a Ricoh Theta S camera–a $300 consumer-grade 360 camera–and had big plans for what we would do with it.
The image quality wasn’t what I would hope for, but nevertheless we produced a 360 video for Commencement, continued experimenting and learning, and last fall the three of us presented “We Live in the Future: 360 Video & Higher Ed” at HighEdWeb 2016. Next up for us on that front, starting to shoot with a higher-quality 6-camera GoPro rig:
— Mark Lee (@thatmarklee) March 21, 2017
Embedding 360 Photos
With 360 video, it’s pretty easy to publish your videos to YouTube and/or Facebook and call it a day. They generally work pretty well, and YouTube 360 videos can be embedded into web pages just as easily as any other video. Surprisingly the situation is a little more complicated if you want to embed 360 photos in your webpages.
Flickr is one option–if you don’t mind your account getting brutally owned every year or two. But at least they make it easy to upload 360 pics and embed them into your pages (codepen of Flickr embed code). Theta360 is another simple 3rd-party option, especially if you have a Ricoh Theta 360 camera.
What if you want to have more control over the player, and maybe integrate it into your CMS so that you don’t have to upload your photos to a 3rd-party?
That’s where something like A-frame can come in handy. A-frame is a framework that makes it very easy to build WebVR experiences, including the ability to display 360 images and even to embed them into existing html pages. (I’ll be writing more about A-frame and WebVR soon)
Where it gets tricky though, is if you want to include multiple 360 photos into the same page. Currently, only one A-frame “scene” (<a-scene>) can exist on a page, so if you need multiple 360 photos to be embedded in a page, you’d need to create a new html page for each photo and embed each one of those new pages in an iframe. Who wants to build a whole new web page for each individual photo?
Check out embed360 on github, and let me know if you have any suggestions or ideas for improvement!