360° VR Video

Play panoramic 360, VR and Stereoscopic video within Video.JS

This example displays the basic usage of configuring 360° video sources. WebXR and Cardboard mode support is added with special WebXR events for debugging.

Introduction

360° feature for Flowplayer has been developed and improved over many years keeping up with changing browser apis , requirements and IOS problems introduced.

This feature has been updated to accomodate the new WebXR api with a polyfill for WebVR 1.0 and Cardboard view for Safari. WebXR is now the new standard for WebVR which Chrome currently supports. The new orientation sensor api available in Chrome browsers in Android has been added.

The rendering of the video makes use of WebGL in browsers that support it, utilising the graphics card available. NVidia, Radeon and Integrated GPU's will render better. Any Html5 video will be supported including Mpeg Dash and HLS Native and HLS.JS.

Cubemap Video Support

According to the investigations and work at Facebook https://code.facebook.com/posts/1638767863078802/under-the-hood-building-360-video/. Cubemap encoded videos help reduce wasted pixels and therefore bandwidth. The videos frames are tiled into a 3 x 2 formation.

Due to their discoveries equirectangle videos have wasted pixels around the edges and duplicated pixels where it wraps. Cubemaps have defined edges and therefore no redundant pixels are in the video. These are space and performance saving optimisations. Facebook have an Ffmpeg encoder filter called Transform360. Which will help transform Equirectangle sources to Cubemap video sources. The demo was produced using this filter.

Fisheye Camera Support

There is support for both Ricoh Theta dual 360 Fisheye and single 180 Fisheye support. When using 180 degree videos a skybox texture is supported.

360 Video Controls

Various user controls are supported for controlling the video camera view. Desktop rotation controls include keyboard key codes, mouse drag and pointer lock controls for rotating and panning, mouse wheel for zooming. An external player api is provide to also control rotation using scripting.

Mobile rotation controls include touch for rotation when not in fullscreen mode. In non VR fullscreen mode mobile orientation apis are used for controlling rotation with the deivce.

In VR headsets mode on Mobile and in WebXR enabled browsers on desktop. WebXR apis are used to control rotation using orientation apis of the VR Oculus or Samsung Gear headsets or the mobile device. On mobile in WebXR cardboard mode it will fallback to the device's orientation.

VR Controllers are supported to control a virtual video controlbar. When connected the GearVR and DayDream remote or Oculus and Vive gaming controllers will be enabled as a laser pointer.

Mobile Support

360 video support is possible on Android 4.3 and above with Firefox or Chrome or Safari on IOS 8 and above that supports WebGL.

On Samsung S8 devices with Android 7, the default browser is Samsung Internet and has both WebGL and WebVR support.

With the Safari browser on IOS it will use the Cardboard view in VR mode having no WebVR / WebXR support.

IOS and Android apps can be built around Apache Cordova or IONIC Framework WebView based applications. The Android version of WebView uses Chrome so it's dependant on keeping the Chromium WebView up to date.

"pinned to Home Screen" standalone WebView apps work with VR.

Extensive bug fixes and work arounds are available for bugs in IOS Safari when streaming HLS formats, making live 360 video possible.

WebXR/WebVR Support

VR support for VR headsets like Oculus Rift, Vive, Samsung Gear VR, Google DayDream View, Microsoft Mixed Reality and Google Cardboard is possible with a VR stereo view of the video and autonomous rotating, panning and zooming control using either Cardboard webxr polyfill or native WebXR/WebVR support if enabled in the browser.

VR headset support is possible with WebXR/WebVR browser API's found in Chrome, Firefox and Edge browsers. This relies on the Oculus Runtime for Windows, therefore OSX support has been dropped for now. These API's provide controls and status from the headsets which can then be used for controlling the video camera view.

Microsoft Mixed Reality with the Mixed Reality Simulator and supported headsets. Provides WebVR support with the Microsoft Edge browser.

WebXR/WebVR is available on Android Chrome, Firefox and Samsung Gear VR Browser, this is now enabled by default.

Daydream View requires the Daydream application installed. And Chrome browser with WebVR enabled on Android.

VR Video Controls and subtitles text support is available in WebVR presentation mode.The video controls will display when clicking the VR display. And a reticle can be used for gaze control. Subtitles text will rotate with head tracking.

A flat 2D video Cinema screen mode in VR is supported. When launching from GearVR, Cardoard, or VR headets Occulus, Vive and Windows Mixed Reality. The video will display into a virtual Cinema screen. When subtitles are configured they will also be displayed over the Cinema screen.

WebXR View

Ambisonics Support

Experimental support for 4 channel Ambisonics audio tracks in video is possible through an Ambisonics to Binaural audio decoder. Browsers firstly require mutli channel. The audio requires to be authored according to Google Spatial Media specification.

Amibsonics supports 2nd and 3rd order audio streams. The panning of the camera will pan the audio in headphones.

Producing 360 Videos

360° video can be produced using special surround cameras like ones supplied by https://www.360rize.com/.

The camera sources are required to be stitched together after into a panoromic flat spherical picture using special VR 360° software. Software like http://www.video-stitch.com/.

Live 360 is possible using a device like a Teradeck Sphere. This will publish to Wowza streaming servers which can then be packetised into Mpeg Dash and HLS.

Video Capture Support

Using the Snapshot Plugin, support is available to capture VR Video rendering.

Features

Known Issues:

More Information:

Request a free trial

Try the feature for 30 days. Free support is provided. Provide your website domain(s) it will be used for.

Pricing

Choose a suitable pricing option for one time payment. Contact for feature requests or customisations.

Enter required website domains seperated by spaces or commas.

Not For Profit / Education

$150 AUD

✔ All features

✔ Free Support

Buy Now

For Charity / Personal / Education

Single Domain

$300 AUD

✔ All features

✔ Free Support

Buy Now

Suits Small Sites

Multi Domain

$550 AUD

✔ All features

✔ Priority Support

Buy Now

Suits Larger Sites

Unlimited / SAAS Platform / Source Code

$1000 AUD

✔ All features

✔ Includes Support

✔ Source Code Includes Repository Updates

Buy Now

Integrate into own application and platform