Interactive 360 Video Project
The buzz is huge around VR and 360 video. An important part of what Aidan Feay and I do on the Emerging Platforms team is create prototypes that show our internal teams how new technologies work, how to present them to clients, and also how long it would potentially take to execute a similar project.
We set out to create a prototype that:
- Can be easily embedded on all Group Nine sites
- Can be done cheaply in-house
- Has an easy, repeatable process
Our Hypothesis
With A-frame, we can find a sustainable way to create 360 videos with simple interactions that users can explore with Google Cardboard and desktop browsers.
The Project Idea
The first and only topic that we seriously considered for this 360 video was generating some A++ pupper content with one of our office dogs — a Corgi named Dalloway. The idea is that we would shoot a 360 video with Dalloway and there’d be 2 toys visible on the screen near the camera. Then we would shoot a 360 video with each of the dog toys.
After editing and stitching the 360 video, we planned to overlay a hotspot on the dog toys with a webVR code library so that users can choose a toy and see Dalloway play with that toy. This interactive experience would be very similar to a choose-your-own-adventure story.
The Hardware
For this project, our friends at NowThis gave us a choice of the Ricoh 360 camera or the Samsung Gear 360 (2016) camera. We had read some great things about the Samsung Gear 360’s video quality so we chose that for our project.
We were very happy with the quality of the camera. It also came with a little stand, which made it easier to prop up on flat surfaces. It’s really everything else about that camera that gave us a lot of trouble.
Issue #1: The Gear 360 mobile app did not work
Like many tech teams, we have a few devices for QA and a wide range of mobile devices that our coworkers own. We tried it on 2 different iPhones and 2 different Samsung Galaxy phones. In all cases, the app was unable to connect to our 360 Gear camera.
According to their iOS app page, these are the main features of the app:
- Connect to and disconnect from Gear 360
- Remote shooting and preview the recording
- View content and save files to a smartphone
- Share the created content to social media services
- Check Gear 360 status and settings
- Sync Date & Time, GPS data
Since we were unable to preview the recording, we ended up underestimating how wide the bench that we rested the camera on would be in the frame. It also didn’t help that Dalloway the Corgi is so low to the ground. When she was scooting around close to the camera, we were only able to see her ears. By the 3rd time we tried to shoot the video, Dalloway was really over the new toys we had bought her for the video shoot.
We also were not able to easily get the footage off of the camera because of the app. I ended up taking the microSD card out of the camera each time and putting it into a Samsung phone then transferring it with the Android Transfer app (don’t even get me started).
Issue #2: Samsung’s Action Director software
With the Gear 360 and many other 360 cameras, there’s a big seam between where the 2 cameras meet. The footage at the seam looks like it’s slightly distorted and doubled. You need to stitch the video so that it looks smoother. The Gear 360 comes with a code for software called Samsung Action Director. Not having a PC version was a bummer but we can easily use our office PC. HOWEVER, because we borrowed this camera, we did not have a code for the software. The only way we can get another code was to call Samsung’s customer support.
At the end of the day, we decided to use a 30 day trial of Action Director to stitch this video. Once we got it going, it was easy enough to use.
The Code
We had done a few explorations with A-frame, Threes.js, and ReactVR to make sure that we can do what we set out to do with these coding libraries. After comparing these 3 different solutions, we decided A-frame was the best solution for this project. Aidan had done a quick prototype with some hotspots while I was wrestling with the video assets described above.
Once we switched out the file in the prototype for the real video asset, A-frame started giving us a bunch of errors (detailed here in the github issue Aidan filed)
We then explored ReactVR and decided against using it because it would significantly increase the scope of our project. It’d also be like using a cannon to shoot a housefly. So as a last-ditch effort, we looked at some off-the-shelf solutions.
The Tools
Running into issues with beta products and technologies is not a new or unexpected experience for us. I hopped on the good ‘ol Google and started looking for other solutions. I found 2 solutions that would do what we needed with the hotspots:
- Viar360 is a tool that will allow you to put hotspots on a 360 video. It also includes many cool options for what you’d like that hotspot to do. In our case, we’d like our hotspot to play another video. The company was nice enough to provide me with a code for a one project trial so that I can evaluate the tool. The tool works great in their environment but a part of our goal was to find a solution that can work well with our CMS and embed properly in our article pages. To our sadness, it did not satisfy the 2nd half of our goals. You can watch the video and try out the interactivity here on the Viar360 site.
- Sprawly is a tool that’s slightly limited in options but it did what we needed for this project. It is free. I was set on using this tool until I ran into a minor bug and emailed support. They emailed me back and said that this product has been acquired and that it’s no longer in development.
The Main Takeaway
Until mainstream platforms like Youtube, Facebook, and Twitter extend support to 360 videos with interactive hotspots, interactive 360 videos is not ready for prime time due to the barrier of entry when it comes to embedding the product and the lack of equipment on the user’s end.
You can view the 360 video we shot of Dalloway here (not interactive).
Have you tried your own interactive 360 video? Did I miss something in this post? Leave us a note or you can find us at emergingplatforms@groupninemedia.com
Additional note: Sadly, Aidan, the founding engineer on Emerging Platforms recently left for a new and exciting opportunity. We are looking for someone to explore the frontiers of emerging technologies. If you think this could be you, check out the job description and apply here.
