(testing aliasing)

MetaCDN · Aug 15, 2024 · d341f83 · d341f83
1 parent 8f32f19
commit d341f83
Show file tree

Hide file tree

Showing 14 changed files with 54 additions and 18 deletions.
diff --git a/examples/180-hls.html b/examples/180-hls.html
@@ -7,7 +7,7 @@
    <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>
+  <video width="3840" height="3840" 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>

diff --git a/examples/180-mono.html b/examples/180-mono.html
@@ -7,7 +7,7 @@
    <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>
+  <video width="3840" height="3840" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
     <source src="../samples/video_180_lefteyeonly.mp4" type="video/mp4">
   </video>
   <ul>

diff --git a/examples/180-tb.html b/examples/180-tb.html
@@ -7,7 +7,7 @@
    <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>
+  <video width="3840" height="3840" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
     <source src="../samples/video_180_TB.mp4" type="video/mp4">
   </video>
   <ul>

diff --git a/examples/180.html b/examples/180.html
@@ -7,7 +7,7 @@
    <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>
+  <video width="3840" height="3840" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
     <source src="../samples/video_180.mp4" type="video/mp4">
   </video>
   <ul>

diff --git a/examples/360-cube.html b/examples/360-cube.html
@@ -7,7 +7,7 @@
    <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>
+  <video width="3840" height="3840" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
     <source src="../samples/doisethup_cubemap.mp4" type="video/mp4">
   </video>
   <ul>

diff --git a/examples/360-sphere-detail.html b/examples/360-sphere-detail.html
@@ -7,7 +7,7 @@
    <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>
+  <video width="3840" height="3840" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
     <source src="../samples/eagle-360.mp4" type="video/mp4">
   </video>
   <ul>

diff --git a/examples/360-tb-2.html b/examples/360-tb-2.html
@@ -8,7 +8,7 @@
    <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>
+  <video width="3840" height="3840" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
     <source src="../samples/cc_oceanside_beach.mp4" type="video/mp4">
   </video>
   <ul>

diff --git a/examples/360-tb.html b/examples/360-tb.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <p>TB Equirectangular video</p>
-  <video width="640" height="300" id="videojs-vr-player-rect2" class="video-js vjs-default-skin" controls playsinline>
+  <video width="3840" height="3840" id="videojs-vr-player-rect2" class="video-js vjs-default-skin" controls playsinline>
     <source src="../samples/coriolis_rect.webm" type="video/webm">
   </video>
   <p>Credits: Animations for Physics and Astronomy, CC-BY-3.0</p>

diff --git a/examples/360-two.html b/examples/360-two.html
@@ -7,7 +7,7 @@
    <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>
+  <video width="3840" height="3840" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
     <source src="../samples/lcs15_rect.webm" type="video/mp4">
   </video>
   <ul>

diff --git a/examples/360.html b/examples/360.html
@@ -7,7 +7,7 @@
    <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>
+  <video width="3840" height="3840" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
     <source src="../samples/eagle-360.mp4" type="video/mp4">
   </video>
   <ul>

diff --git a/examples/disable-togglePlay.html b/examples/disable-togglePlay.html
@@ -7,7 +7,7 @@
    <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" crossorigin="anonymous" controls playsinline>
+  <video width="3840" height="3840" id="videojs-vr-player" class="video-js vjs-default-skin" crossorigin="anonymous" controls playsinline>
     <source src="https://storage.googleapis.com/omnitone-demo.google.com.a.appspot.com/fuerza-imprevista-1080p-h264-aac.mp4" type="video/mp4">
   </video>
   <ul>

diff --git a/examples/eac-lr.html b/examples/eac-lr.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <p>LR EAC video</p>
-  <video width="640" height="300" id="videojs-vr-player-eac-lr" class="video-js vjs-default-skin" controls playsinline>
+  <video width="3840" height="3840" id="videojs-vr-player-eac-lr" class="video-js vjs-default-skin" controls playsinline>
     <source src="../samples/coriolis_eac.webm" type="video/webm">
   </video>
   <p>Credits: Animations for Physics and Astronomy, CC-BY-3.0</p>

diff --git a/examples/spatial.html b/examples/spatial.html
@@ -7,7 +7,7 @@
    <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" crossorigin="anonymous" controls playsinline>
+  <video width="3840" height="3840" id="videojs-vr-player" class="video-js vjs-default-skin" crossorigin="anonymous" controls playsinline>
     <source src="https://storage.googleapis.com/omnitone-demo.google.com.a.appspot.com/fuerza-imprevista-1080p-h264-aac.mp4" type="video/mp4">
   </video>
   <ul>

diff --git a/src/big-vr-play-button.js b/src/big-vr-play-button.js
@@ -1,6 +1,8 @@
 import videojs from 'video.js';
 import window from 'global/window';
 
+let xrMediaFactory = null;
+
 const BigPlayButton = videojs.getComponent('BigPlayButton');
 
 class BigVrPlayButton extends BigPlayButton {
@@ -10,28 +12,62 @@ class BigVrPlayButton extends BigPlayButton {
 
   async onSessionStarted(session) {
     await window.navigator.xr.setSession(session);
+
+    xrMediaFactory = new global.XRMediaBinding(session);
+    session.requestReferenceSpace('local').then((refSpace) => {
+      const player = videojs.getAllPlayers()[0];
+
+      if (player) {
+        const video = player.tech({IWillNotUseThisInPlugins: true}).el();
+
+        if (player.mediainfo && player.mediainfo.projection) {
+          const is360 = player.mediainfo.projection.indexOf('360') !== -1;
+
+          if (player.mediainfo.projection.indexOf('MONO') !== -1) {
+            const layer = xrMediaFactory.createEquirectLayer(video, {
+              space: refSpace,
+              centralHorizontalAngle: (is360) ? Math.PI * 2 : Math.PI,
+              layout: 'mono'
+            });
+
+            session.updateRenderState({layers: [layer]});
+            player.isUsingLayers = true;
+          } else {
+            const isTopBottom = player.mediainfo.projection.indexOf('TB') !== -1;
+
+            const layer = xrMediaFactory.createEquirectLayer(video, {
+              space: refSpace,
+              centralHorizontalAngle: (is360) ? Math.PI * 2 : Math.PI,
+              layout: (isTopBottom) ? 'stereo-top-bottom' : 'stereo-left-right'
+            });
+
+            session.updateRenderState({layers: [layer]});
+            player.isUsingLayers = true;
+          }
+        }
+      }
+    });
   }
 
   handleClick(event) {
     // For iOS we need permission for the device orientation data, this will pop up an 'Allow' if not already set
     // eslint-disable-next-line
     if (typeof window.DeviceMotionEvent === 'function' &&
-        typeof window.DeviceMotionEvent.requestPermission === 'function') {
+      typeof window.DeviceMotionEvent.requestPermission === 'function') {
       window.DeviceMotionEvent.requestPermission().then(response => {
         if (response !== 'granted') {
           this.log('DeviceMotionEvent permissions not set');
         }
       });
     }
 
-    if (window.navigator.xr && window.navigator.xr.requestSession) {
+    if (window.navigator.xr) {
       const sessionInit = {optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking']};
       const self = this;
 
-      window.navigator.xr.requestSession('immersive-vr', sessionInit).then(self.onSessionStarted).catch(_ => {
-        // immersive-vr not supported
-      });
+      window.navigator.xr.requestSession('immersive-vr', sessionInit).then(self.onSessionStarted).catch();
     }
+
     super.handleClick(event);
   }
 }