diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 00000000..28ddea2a --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +node_modules/.bin/lint-staged diff --git a/.project b/.project new file mode 100644 index 00000000..886586b9 --- /dev/null +++ b/.project @@ -0,0 +1,11 @@ + + + videojs-vr + + + + + + + + diff --git a/CHANGELOG.md b/CHANGELOG.md index f7ddcf76..a1180555 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,37 @@ + +# [2.1.2](https://github.com/videojs/videojs-vr/compare/v1.10.1...v2.1.2) (2024-08-18) + +### Chores + +* Android can use built in cardaboard faetaure, else use the gyro if avaiable and permmision allow it + + +# [2.1.1](https://github.com/videojs/videojs-vr/compare/v1.10.1...v2.1.1) (2024-08-17) + +### Chores + +* rollback THREE.js as this introduced a noticable gamma/brightness increase, adding gyro support, moved +* immersive controller images into base64 + + +# [2.1.0](https://github.com/videojs/videojs-vr/compare/v1.10.1...v2.1.0) (2024-07-22) + +### Chores + +* revisting clean exit immersive and 180 projection + + +# [2.0.0](https://github.com/videojs/videojs-vr/compare/v1.10.1...v2.0.0) (2023-02-15) + +### Chores + +* update build tooling to drop older browser support ([#276](https://github.com/videojs/videojs-vr/issues/276)) ([0947a0f](https://github.com/videojs/videojs-vr/commit/0947a0f)) + + +### BREAKING CHANGES + +* This drops support for older browsers such as IE + ## [1.10.1](https://github.com/videojs/videojs-vr/compare/v1.10.0...v1.10.1) (2022-08-16) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7840f8ca..a5ec1c86 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -21,7 +21,6 @@ When you've made your changes, push your commit(s) to your fork and issue a pull Testing is a crucial part of any software project. For all but the most trivial changes (typos, etc) test cases are expected. Tests are run in actual browsers using [Karma][karma]. - In all available and supported browsers: `npm test` -- In a specific browser: `npm run test:chrome`, `npm run test:firefox`, etc. - While development server is running (`npm start`), navigate to [`http://localhost:9999/test/`][local] diff --git a/README.md b/README.md index 59ae8309..6fbf7dce 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ https://videojs-vr.netlify.com [![NPM](https://nodei.co/npm/videojs-vr.png?downloads=true&downloadRank=true)](https://nodei.co/npm/videojs-vr/) -A video.js plugin that turns a video element into a HTML5 Panoramic 360 video player. Project video onto different shapes. Optionally supports Oculus Rift, HTC Vive and the GearVR. +A video.js plugin that turns a video element into a HTML5 Panoramic VR/XR immersive capable video player. Project video onto different shapes depending on the underlying format. Optionally supports Meta Quest and other VR/XR capable HMDs. Lead Maintainer: Brandon Casey [@brandonocasey](https://github.com/brandonocasey) @@ -29,7 +29,7 @@ Maintenance Status: Stable - [Optional integration with videojs-errors](#optional-integration-with-videojs-errors) - [Setting a global projection](#setting-a-global-projection) - [Passing a projection on a source by source basis](#passing-a-projection-on-a-source-by-source-basis) -- [Oculus Rift and HTC Vive Support](#oculus-rift-and-htc-vive-support) +- [Meta Quest and other HMD support](#meta-quest-and-other-hmd-support) - [Accessing the Camera Position](#accessing-the-camera-position) - [Accessing THREE.js objects](#accessing-threejs-objects) - [Options](#options) @@ -38,6 +38,7 @@ Maintenance Status: Stable - [`projection`](#projection) - [`'180'`](#180) - [`'180_LR'`](#180_lr) + - [`'180_TB'`](#180_tb) - [`'180_MONO'`](#180_mono) - [`'360'`, `'Sphere'`, or `'equirectangular'`](#360-sphere-or-equirectangular) - [`'Cube'` or `'360_CUBE'`](#cube-or-360_cube) @@ -67,20 +68,24 @@ npm i videojs-vr ## Browser Support The most recent versions of: * Desktop - * Chrome + * Chrome (recommended for HMD support) * Firefox * Safari * Mobile * Chrome on Android * Safari on iOS - +* Headsets + * Meta Quest Browser + * Rift (via Chrome browser) + * WebXR plug-in (Chrome/Firefox) + ## Caveats * HLS captions on safari will not be visible as they are located inside of the shadowRoot in the video element and we cannot get access to them. ## Projection support Currently we only support: * Projections - * Spherical Videos, via the 360/equirectangular projection + * Spherical Videos, via the 180/360/equirectangular projection * 360 cube videos * Mappings * Monoscopic (single video pane) @@ -168,12 +173,12 @@ player.vr({projection: 'AUTO'}); // or player.vr(); since 'AUTO' is the default ``` -## Oculus Rift and HTC Vive Support -This project leverages the [webvr-polyfill](https://github.com/borismus/webvr-polyfill) and [three.js](https://github.com/mrdoob/three.js) libraries to create a 'responsive VR' experience across multiple devices. +## Meta Quest and other HMD support +This project leverages the [webxr-polyfill](https://github.com/immersive-web/webxr-polyfill), [webvr-polyfill](https://github.com/borismus/webvr-polyfill) and [three.js](https://github.com/mrdoob/three.js) libraries to create a 'responsive XR/VR' experience across multiple devices. -Oculus Rift and HTC Vive playback requires Firefox >= 55, experimental WebVR-enabled builds of Chromium, or via Chrome by enabling webvr in `chrome://flags`. Go to [WebVR.info](http://www.webvr.info) for more info. +Rift, Meta Quest (with Quest Link cable) and other compatible HMDs on desktop require a Chrome build of 79 or higher. We recommend the latest stable Chrome. Go to [immersiveweb.dev](https://immersiveweb.dev/) for more info. -GearVR playback requires the latest Samsung Internet for Gear VR with WebVR support enabled. Go [here](https://webvr.rocks/samsung_internet) for more info. +Meta Quest/Pro users running in standalone mode should use the Meta Quest browser to access the immersive modes. It is downloadable from the Meta Quest Store. We recommend using the latest available version. ## Accessing the Camera Position The Three.js rotation values are exposed under the property `cameraVector` on the `vr` plugin namespace. @@ -218,6 +223,10 @@ The video is half sphere and the user should not be able to look behind themselv Used for side-by-side 180 videos The video is half sphere and the user should not be able to look behind themselves +#### `'180_TB'` +Used for top/bottom 180 videos +The video is half sphere and the user should not be able to look behind themselves + #### `'180_MONO'` Used for monoscopic 180 videos The video is half sphere and the user should not be able to look behind themselves @@ -294,7 +303,7 @@ This project is a conglomeration of a few amazing open source libraries. * [VideoJS](http://www.videojs.com) * [Three.js](http://threejs.org) -* [webvr-polyfill](https://github.com/borismus/webvr-polyfill) +* [webxr-polyfill](https://github.com/immersive-web/webxr-polyfill) * [Omnitone](https://googlechrome.github.io/omnitone) ## Support ## diff --git a/examples/180-hls.html b/examples/180-hls.html new file mode 100644 index 00000000..6518d140 --- /dev/null +++ b/examples/180-hls.html @@ -0,0 +1,31 @@ + + + + + videojs-vr Demo + + + + + + + + + + + + + + diff --git a/examples/180-mono.html b/examples/180-mono.html index 10980907..a5a0eaac 100644 --- a/examples/180-mono.html +++ b/examples/180-mono.html @@ -24,5 +24,8 @@ var vr = window.vr = player.vr({projection: '180_MONO', debug: true, forceCardboard: false}); }(window, window.videojs)); + + + diff --git a/examples/180-tb.html b/examples/180-tb.html new file mode 100644 index 00000000..3375120d --- /dev/null +++ b/examples/180-tb.html @@ -0,0 +1,31 @@ + + + + + videojs-vr Demo + + + + + + + + + + + + + + diff --git a/examples/180.html b/examples/180.html index 41c88ed2..f2f34d1d 100644 --- a/examples/180.html +++ b/examples/180.html @@ -24,5 +24,8 @@ var vr = window.vr = player.vr({projection: '180', debug: true, forceCardboard: false}); }(window, window.videojs)); + + + diff --git a/examples/360-cube.html b/examples/360-cube.html index 29d54e2d..6f8ae3cc 100644 --- a/examples/360-cube.html +++ b/examples/360-cube.html @@ -25,5 +25,8 @@ var vr = window.vr = player.vr({projection: 'AUTO', debug: true, forceCardboard: false}); }(window, window.videojs)); + + + diff --git a/examples/360-sphere-detail.html b/examples/360-sphere-detail.html index aeeeec8c..d5e6fec8 100644 --- a/examples/360-sphere-detail.html +++ b/examples/360-sphere-detail.html @@ -30,5 +30,8 @@ }); }(window, window.videojs)); + + + diff --git a/examples/360-tb-2.html b/examples/360-tb-2.html new file mode 100644 index 00000000..98ee4f57 --- /dev/null +++ b/examples/360-tb-2.html @@ -0,0 +1,30 @@ + + + + + + videojs-vr Demo + + + + + + + + + + + diff --git a/examples/360-two.html b/examples/360-two.html index 1b64a2f1..07dc64df 100644 --- a/examples/360-two.html +++ b/examples/360-two.html @@ -25,5 +25,8 @@ var vr = window.vr = player.vr({projection: 'AUTO', debug: true, forceCardboard: false}); }(window, window.videojs)); + + + diff --git a/examples/360.html b/examples/360.html index 9b7a9cdb..5543c94e 100644 --- a/examples/360.html +++ b/examples/360.html @@ -25,5 +25,8 @@ var vr = window.vr = player.vr({projection: 'AUTO', debug: true, forceCardboard: false}); }(window, window.videojs)); + + + diff --git a/examples/eac.html b/examples/eac.html index e4f46196..28c02fd8 100644 --- a/examples/eac.html +++ b/examples/eac.html @@ -2,13 +2,12 @@ - videojs-vr Demo + videojs-vr Demo - Equi-Angular Cubemap -

EAC video

-