chore: Swap webvr to webxr polyfill packages

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+node_modules/.bin/lint-staged

.project

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>videojs-vr</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+	</buildSpec>
+	<natures>
+	</natures>
+</projectDescription>

CHANGELOG.md

@@ -1,3 +1,37 @@
+<a name="2.1.2"></a>
+# [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
+
+<a name="2.1.1"></a>
+# [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
+
+<a name="2.1.0"></a>
+# [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
+
+<a name="2.0.0"></a>
+# [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
+
 <a name="1.10.1"></a>
 ## [1.10.1](https://github.com/videojs/videojs-vr/compare/v1.10.0...v1.10.1) (2022-08-16)
 

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]
 
 

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 ##

examples/180-hls.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>videojs-vr Demo</title>
+   <link href="../node_modules/video.js/dist/video-js.css" rel="stylesheet">
+   <link href="../dist/videojs-vr.css" rel="stylesheet">
+</head>
+<body>
+  <video width="640" height="300" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
+    <source src="https://kevleyski.github.io/reckless_in_pyrmont/hls_fmp4_byterange/reckless_in_pyrmont.m3u8" type="application/vnd.apple.mpegurl">
+  </video>
+  <ul>
+    <li><a href="../">return to main example</a></li>
+  </ul>
+  <script src="../node_modules/video.js/dist/video.js"></script>
+  <script src="../dist/videojs-vr.js"></script>
+  <script>
+    (function(window, videojs) {
+      var player = window.player = videojs('videojs-vr-player');
+      player.mediainfo = player.mediainfo || {};
+      player.mediainfo.projection = '180_MONO';
+
+      var vr = window.vr = player.vr({projection: '180_MONO', debug: true, forceCardboard: false});
+    }(window, window.videojs));
+  </script>
+
+  <script src="examples.js"></script>
+
+</body>
+</html>

examples/180-mono.html

@@ -24,5 +24,8 @@
       var vr = window.vr = player.vr({projection: '180_MONO', debug: true, forceCardboard: false});
     }(window, window.videojs));
   </script>
+
+  <script src="examples.js"></script>
+
 </body>
 </html>

examples/180-tb.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>videojs-vr Demo</title>
+   <link href="../node_modules/video.js/dist/video-js.css" rel="stylesheet">
+   <link href="../dist/videojs-vr.css" rel="stylesheet">
+</head>
+<body>
+  <video width="640" height="300" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
+    <source src="../samples/video_180_TB.mp4" type="video/mp4">
+  </video>
+  <ul>
+    <li><a href="../">return to main example</a></li>
+  </ul>
+  <script src="../node_modules/video.js/dist/video.js"></script>
+  <script src="../dist/videojs-vr.js"></script>
+  <script>
+    (function(window, videojs) {
+      var player = window.player = videojs('videojs-vr-player');
+      player.mediainfo = player.mediainfo || {};
+      player.mediainfo.projection = '180_TB';
+
+      var vr = window.vr = player.vr({projection: '180_TB', debug: true, forceCardboard: false});
+    }(window, window.videojs));
+  </script>
+
+  <script src="examples.js"></script>
+
+</body>
+</html>

examples/180.html

@@ -24,5 +24,8 @@
       var vr = window.vr = player.vr({projection: '180', debug: true, forceCardboard: false});
     }(window, window.videojs));
   </script>
+
+  <script src="examples.js"></script>
+
 </body>
 </html>

examples/360-cube.html

@@ -25,5 +25,8 @@
       var vr = window.vr = player.vr({projection: 'AUTO', debug: true, forceCardboard: false});
     }(window, window.videojs));
   </script>
+
+  <script src="examples.js"></script>
+
 </body>
 </html>

examples/360-sphere-detail.html

@@ -30,5 +30,8 @@
       });
     }(window, window.videojs));
   </script>
+
+  <script src="examples.js"></script>
+
 </body>
 </html>

examples/360-tb-2.html

@@ -0,0 +1,30 @@
+
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>videojs-vr Demo</title>
+   <link href="../node_modules/video.js/dist/video-js.css" rel="stylesheet">
+   <link href="../dist/videojs-vr.css" rel="stylesheet">
+</head>
+<body>
+  <video width="640" height="300" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
+    <source src="../samples/cc_oceanside_beach.mp4" type="video/mp4">
+  </video>
+  <ul>
+    <li><a href="../">return to main example</a></li>
+  </ul>
+  <script src="../node_modules/video.js/dist/video.js"></script>
+  <script src="../dist/videojs-vr.js"></script>
+  <script>
+    (function(window, videojs) {
+      var player = window.player = videojs('videojs-vr-player');
+      player.mediainfo = player.mediainfo || {};
+      player.mediainfo.projection = '360';
+
+      // AUTO is the default and looks at mediainfo
+      var vr = window.vr = player.vr({projection: '360_TB', debug: true, forceCardboard: false});
+    }(window, window.videojs));
+  </script>
+</body>
+</html>

examples/360-two.html

@@ -25,5 +25,8 @@
       var vr = window.vr = player.vr({projection: 'AUTO', debug: true, forceCardboard: false});
     }(window, window.videojs));
   </script>
+
+  <script src="examples.js"></script>
+
 </body>
 </html>

examples/360.html

@@ -25,5 +25,8 @@
       var vr = window.vr = player.vr({projection: 'AUTO', debug: true, forceCardboard: false});
     }(window, window.videojs));
   </script>
+
+  <script src="examples.js"></script>
+
 </body>
 </html>

examples/eac.html

@@ -2,13 +2,12 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>videojs-vr Demo</title>
+  <title>videojs-vr Demo - Equi-Angular Cubemap</title>
    <link href="../node_modules/video.js/dist/video-js.css" rel="stylesheet">
    <link href="../dist/videojs-vr.css" rel="stylesheet">
 </head>
 <body>
-  <p>EAC video</p>
-  <video width="640" height="300" id="videojs-vr-player-eac" class="video-js vjs-default-skin" controls playsinline>
+  <video width="960" height="960" id="videojs-vr-player-eac" class="video-js vjs-default-skin" controls playsinline>
     <source src="../samples/lcs15_eac.webm" type="video/webm">
   </video>
   <p>Credits: Animations for Physics and Astronomy, CC-BY-3.0</p>

examples/examples.js

@@ -0,0 +1,20 @@
+/* eslint-disable */
+const videoSourceParam = window.location.search.substring(1);
+if (videoSourceParam) {
+  if (videoSourceParam.indexOf(".mpd") !== -1) {
+    player.src({
+      type: 'application/dash+xml',
+      src: videoSourceParam
+    });
+  } else if (videoSourceParam.indexOf(".m3u8") !== -1) {
+    player.src({
+      type: 'application/vnd.apple.mpegurl',
+      src: videoSourceParam
+    });
+  } else {
+    player.src({
+      type: 'video/mp4',
+      src: videoSourceParam
+    });
+  }
+}

index.html

@@ -5,20 +5,22 @@
   <title>videojs-vr Demo</title>
 </head>
 <body>
-  <iframe width="700" height="400" src="examples/360.html" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" allow="gyroscope; accelerometer; xr"></iframe>
+  <iframe height="658" src="examples/360.html" style="width: 97vw; min-height: 658px;" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" allow="gyroscope; accelerometer; xr"></iframe>
   <ul>
     <li><a href="test/debug.html">Run unit tests in browser.</a></li>
-    <li><a href="examples/180.html">180 video example</a></li>
+    <li><a href="examples/180.html">180 video example (left/right)</a></li>
+    <li><a href="examples/180-tb.html">180 video example (top/bottom)</a></li>
     <li><a href="examples/180-mono.html">180 video example (monoscopic input)</a></li>
     <li><a href="examples/360-cube.html">360 Cube Video example</a></li>
     <li><a href="examples/360.html">360 Video example</a></li>
     <li><a href="examples/360-two.html">Another 360 Video example</a></li>
-    <li><a href="examples/360-tb.html">360 TB Video example</a></li>
+    <li><a href="examples/360-tb.html">360 TB (top/bottom) Video example</a></li>
+    <li><a href="examples/360-tb-2.html">Another 360 TB (top/bottom) Video example</a></li>
     <li><a href="examples/eac.html">EAC video example</a></li>
     <li><a href="examples/eac-lr.html">EAC LR video example</a></li>
     <li><a href="examples/fluid.html">"Fluid" video size example</a></li>
     <li><a href="examples/spatial.html">Spatial audio example</a></li>
-    <li><a href="examples/sphere-detail.html">360 with increased sphere detail example</a></li>
+    <li><a href="examples/360-sphere-detail.html">360 with increased sphere detail example</a></li>
   </ul>
 </body>
 </html>