VR360 Video Configuration
Here is a list of the configuration options:
| Property | Description | Default |
|---|---|---|
| forcevr | Force VR headsets support for desktop browsers or else the feature will only be enabled for mobile devices for now. | false |
| polyfill | Optional. Enable the WebXR polyfill to provide Cardboard mode support for non WebVR enabled browsers. This will be loaded on demand within the same path as the script within a "resource" directory. | false |
| fov | The field of view setting. This sets how far or close the camera needs to be for the video. | 90 |
| camerafront | The camera starts at the "front" of the video, this can be set to be flipped around to start initially from the back. | false |
| projection | Support for different video projection types. | |
| 360_MONO: Standard equirectangular 360 videos. | ||
| 180_LR: Left Right Stereo 180 degrees videos | ||
| 360_TB: Top and Bottom Stereo 360 degrees videos | ||
| 360_CUBE: 360 Cubemap videos. Converted from equirectangular videos. | ||
| 2D: 2D VR Cinema projection in VR mode | 360_MONO | |
| mouseDamping | The sensitivity of the mouse controls. A value between 0.05 and 1. | 0.25 |
| keyDamping | The sensitivity of the key controls. A lower value means more smoother. | 0.10 |
| keys | The key character codes used for the keyboard rotation controls. The arrow keys are taken over for Flowplayer's seeking controls. | { left: 65, up: 87, right: 68, bottom: 88 } |
| pointerlock | Enable mouse pointer lock toggle controls. | false |
| antialias | Add anti aliasing to the rendering. | false |
| ambisonicOrder | The ambisonics order of the Ambisonics audio track. Either 1, 2 or 3. | 1 |
| channelMap | The channel mapping for Ambisonics audio channel ordering. If ACN ordering is not used byt FuMa use [0,3,1,2] | [0,1,2,3] |
| postGain | Add post gain to the Ambisonics decoding and rotation gains. Only required if the loudness of the audio is not accurate. | 1 |
| previewVrPresentation | enable preview of WebVR stereo display while presenting to a headset. Or else a splash status will be displayed. | true |
| enablePip | Enable picture in picture toggling for VR rendering. | true |
| xrTiltOffset | Enable X rotation offset to headsets in a WebXR session to match the camera. This will change the default position in the WebXR headset to match the default camera view. Useful for lying in a chair. | false |
| progressBgcolor | Color of VR controlbar progress background | 0xcccccc |
| progressColor | Color of VR controlbar progress bar | 0xffffff |
| buttonColor | Color of VR controlbar button icons | 0xffffff |
| buttonHoverColor | Hover Color of VR controlbar button icons | 0x000000 |
| buttonOpacity | Opacity of VR controlbat button backgrounds | 0.2 |
| autoVRSession | Automatic start an XR headset session when clicking to play | false |
| nativeIOSFullscreen | Use native video fullscreen VR hacks for Iphone which fills the screen or disable for Html "fullscreen" | true |
| autoIOSFullscreen | Automatically go fullscreen for Iphone on player click | false |
| frameBufferScale | The texture upscale amount for Questheadets to prevent aliasing | 1.5 |
| questFoveation | Enable foveation for Quest headsets. Edges render at lower resolution | true |
| questAutoVRSession | Enable auto XR sessions for Quest headsets. | false |
| forceWebGPU | Force webGPU rendering. This will disable webXR on devices until webGPU WebXR support is added | false |
| useWebGL | Use WebGL for WebXR support on devices that support WebXR when forceWebGPU is enabled | false |
| mobileWebGPU | Use webGPU on mobile devices that do not support WebXR like Iphone. Or if forceWebGPU is set WebGPU will be used | false |
| multiview | Enable multiview rendering support for Quest headsets. | true |
| useMediaLayers | Enable native video layer rendering support for Quest headsets. | true |
| xRFramerate | Set the specified framerate for webXR if supported. ie 60, 90 or 120. If a value is not in the supported framerate list it will choose 60 which is the first in the list. | false |
| controlsHideTimeout | The timeout to hide the XR controlbar | 12 |
| nativeXRRequest | Enable the native XR request button for Quest browsers. | false |
| useLights | Enable backlights for the XR controller | true |
| enableHover | Enable hover color effects for the XR control buttons and progress bar on an XR intersection with the controller. | true |
| useXRButtons | Enable the XR controller buttons to control video playback, exiting XR and joystick for seeking. | false |
| useXRTeleport | When useXRButtons is false the joystick will be used for rotating teleporting the camera view. | true |
| moveChangeThreshold | When useXRButtons is true, the threshold to detect joystick move changes for seeking. | 0.95 |
| vrControlsDistanc | The distance position of the XR controls | 5, |
| vrControlsHeight | The height position of the XR controls | 1 |
Player API Methods
| Mathod | Description | Arguments |
|---|---|---|
| moveLeft | Rotate left given by an angle or automatic angle of 3 degrees. | angle in degrees |
| moveRight | Rotate right given by an angle or automatic angle of 3 degrees. | angle in degrees |
| moveUp | Rotate up given by an angle or automatic angle of 3 degrees. | angle in degrees |
| moveDown | Rotate down given by an angle or automatic angle of 3 degrees. | angle in degrees |
| zoomIn | Zoom camera in | |
| zoomOut | Zoom camera out | |
| toggleVR | Launch WebXR headset session | |
| getOrientationAngles | Returns the current camera angle positions | |
| xrTiltOffset | Change the tilt offset config with an api method. |
Browser Support
| OS | Browser | Description |
|---|---|---|
| OSX | Google Chrome, Firefox, Safari. | macOS have the CORS bugs fixed. CORS problems might still be an issue with Mpeg Dash streams in Safari. |
| Windows | Google Chrome, Firefox, Edge, Chrome Edge | |
| WebXR/WebVR Enabled browsers | Chrome WebXR supported, Firefox WebVR supported with WebXR polyfill, Microsoft Edge for Windows Mixed Reality. | Windows Mixed Reality |
| IOS | Support for fullscreen VR with a hack. Orientation controls. Picture in picture supported on Ipad with a hack. | |
| Android | Chrome, Samsung Internet, Chrome Dev, Firefox, Occulus Carmel. WebView Cordova apps. | Android fully supports WebXR and new orientation sensor apis. |
| visionOS | WebXR supported in visionOS after first enabling WebXR. |
CORS Rules Requirements
For this feature to work successfully the video hosting server requires Cross Origin Resource Sharing rules to be enabled in the headers of the request.
This is required to enable WebGL rendering of cross origin video content in browsers that support it.
WebXR Support
WebXR For Windows Chrome and Firefox
Desktop based WebXR is supported in Windows Chrome and Firefox.
Steps to setup WebXR for Desktop:
- Download and install the Meta Quest Link Software.
- Once installed set the Meta Quest Link the default OpenXR runtime.
- Calibrate headset and sensors.
Apple Vision
visionOS is supported by first enabling WebXR in Safari.
- Open Settings.
- Select Apps.
- Select Safari.
- Scroll to the bottom of the window and select Advanced.
- Scroll to the bottom of the window and select Feature Flags.
- Enable WebXR Device API.
- Enable WebXR Hand Input Module.
Then a headset icon should be displayed. WebXR in visionOS is still experimental with bugs. Workarounds has been implemented for video playback in an immersive WebXR session.
Apple Vision uses a new transient pointer input source for controls. Meaning the controller will disconnect when pinching is released. Support has been added for controls requiring one pinch to toggle the virtual player controls, and another pinch to make a selection.
XR Controller
In WebXR headset immersion. The trigger of the controller grip toggles the video control bar. Moving the laser pointer to a button and selecting with the trigger toggles selections.
In hand tracking controller mode in Quest and Apple Vision. Pinching will toggle the video control bar. A cursor can be hovered over buttons and pinching again will toggle selections.
