fix: separate 180_LR/180_TB, add 180_MONO, fix cropping in 180 views.

videojs · Jun 14, 2021 · 91b7963 · 91b7963
1 parent 153c690
commit 91b7963
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -37,6 +37,8 @@ Maintenance Status: Stable
   - [`motionControls`](#motioncontrols)
   - [`projection`](#projection)
     - [`'180'`](#180)
+    - [`'180_lr'`](#180_lr)
+    - [`'180_mono'`](#180_mono)
     - [`'360'`, `'Sphere'`, or `'equirectangular'`](#360-sphere-or-equirectangular)
     - [`'Cube'` or `'360_CUBE'`](#cube-or-360_cube)
     - [`'NONE'`](#none)
@@ -207,6 +209,14 @@ Can be any of the following:
 #### `'180'`
 The video is half sphere and the user should not be able to look behind themselves
 
+#### `'180_lr'`
+Used for side-by-side 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
+
 #### `'360'`, `'Sphere'`, or `'equirectangular'`
 The video is a sphere
 

diff --git a/examples/180-mono.html b/examples/180-mono.html
@@ -0,0 +1,28 @@
+<!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_lefteyeonly.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_MONO';
+
+      var vr = window.vr = player.vr({projection: '180_MONO', debug: true, forceCardboard: false});
+    }(window, window.videojs));
+  </script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -9,6 +9,7 @@
   <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-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>

diff --git a/samples/video_180_lefteyeonly.mp4 b/samples/video_180_lefteyeonly.mp4
diff --git a/src/plugin.js b/src/plugin.js
@@ -223,16 +223,18 @@ class VR extends Plugin {
       this.movieScreen.rotation.y = -Math.PI;
 
       this.scene.add(this.movieScreen);
-    } else if (projection === '180') {
+    } else if (projection === '180' || projection === '180_LR' || projection === '180_MONO') {
       let geometry = new THREE.SphereGeometry(256, 32, 32, Math.PI, Math.PI);
 
       // Left eye view
       geometry.scale(-1, 1, 1);
       let uvs = geometry.faceVertexUvs[0];
 
-      for (let i = 0; i < uvs.length; i++) {
-        for (let j = 0; j < 3; j++) {
-          uvs[i][j].x *= 0.5;
+      if (projection !== '180_MONO') {
+        for (let i = 0; i < uvs.length; i++) {
+          for (let j = 0; j < 3; j++) {
+            uvs[i][j].x *= 0.5;
+          }
         }
       }
 
@@ -591,7 +593,7 @@ void main() {
     // Store vector representing the direction in which the camera is looking, in world space.
     this.cameraVector = new THREE.Vector3();
 
-    if (this.currentProjection_ === '360_LR' || this.currentProjection_ === '360_TB' || this.currentProjection_ === '180' || this.currentProjection_ === 'EAC_LR') {
+    if (this.currentProjection_ === '360_LR' || this.currentProjection_ === '360_TB' || this.currentProjection_ === '180' || this.currentProjection_ === '180_LR' || this.currentProjection_ === '180_MONO' || this.currentProjection_ === 'EAC_LR') {
       // Render left eye when not in VR mode
       this.camera.layers.enable(1);
     }
@@ -697,7 +699,7 @@ void main() {
             camera: this.camera,
             canvas: this.renderedCanvas,
             // check if its a half sphere view projection
-            halfView: this.currentProjection_ === '180',
+            halfView: this.currentProjection_.indexOf('180') === 0,
             orientation: videojs.browser.IS_IOS || videojs.browser.IS_ANDROID || false
           };
 

diff --git a/src/utils.js b/src/utils.js
@@ -39,7 +39,9 @@ export const validProjections = [
   'Sphere',
   'Cube',
   'equirectangular',
-  '180'
+  '180',
+  '180_LR',
+  '180_MONO'
 ];
 
 export const getInternalProjectionName = function(projection) {