fix: remove safari video image canvas work-around (#74)

* update readme * fix debug logging issue
videojs · May 14, 2018 · 4a9d500 · 4a9d500
1 parent 7ae874a
commit 4a9d500
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,8 @@ A video.js plugin that turns a video element into a HTML5 Panoramic 360 video pl
 **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
 
 - [Installation](#installation)
-- [Usage](#usage)
+- [Browser Support](#browser-support)
+- [Projection support](#projection-support)
   - [`<script>` Tag](#script-tag)
   - [Browserify/CommonJS](#browserifycommonjs)
   - [RequireJS/AMD](#requirejsamd)
@@ -41,6 +42,23 @@ A video.js plugin that turns a video element into a HTML5 Panoramic 360 video pl
 npm install --save videojs-vr
 ```
 
+## Browser Support
+The most recent versions of:
+* Desktop
+  * Chrome
+  * Firefox
+  * Safari
+* Mobile
+  * Chrome on Andriod
+  * Safari on iOS
+
+## Projection support
+Currently we only support:
+* Projections
+  * Spherical Videos, via the 360/equirectangular projection
+* Mappings
+  * Monoscopic (single video pane)
+  * Stereoscopic (dual video pane for both eyes) via the cardboard button
 ## Usage
 
 To include videojs-vr on your website or web application, use any of the following methods.

diff --git a/index.html b/index.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>
+  <video width="640" height="300" 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/src/plugin.js b/src/plugin.js
@@ -223,10 +223,14 @@ class VR extends Plugin {
     }
   }
 
-  log(msg) {
-    if (this.options_.debug) {
-      videojs.log(msg);
+  log(...msgs) {
+    if (!this.options_.debug) {
+      return;
     }
+
+    msgs.forEach((msg) => {
+      videojs.log(msg);
+    });
   }
 
   handleVrDisplayActivate_() {
@@ -277,14 +281,6 @@ class VR extends Plugin {
       }
     }
 
-    // This draws the current video data as an image to a canvas every render. That canvas is used
-    // as a texture by webgl. Normally the video is used directly and we don't have to do this, but
-    // HLS video textures on iOS >= 11 is currently broken, so we have to support those browser
-    // in a roundabout way.
-    if (this.videoImageContext_) {
-      this.videoImageContext_.drawImage(this.getVideoEl_(), 0, 0, this.videoImage_.width, this.videoImage_.height);
-    }
-
     this.controls3d.update();
     this.effect.render(this.scene, this.camera);
 
@@ -318,12 +314,6 @@ class VR extends Plugin {
     const width = this.player_.currentWidth();
     const height = this.player_.currentHeight();
 
-    // when dealing with a non video
-    if (this.videoImage_) {
-      this.videoImage_.width = width;
-      this.videoImage_.height = height;
-    }
-
     this.effect.setSize(width, height, false);
     this.camera.aspect = width / height;
     this.camera.updateProjectionMatrix();
@@ -353,32 +343,7 @@ class VR extends Plugin {
     }
 
     this.scene = new THREE.Scene();
-
-    // We opted to stop using a video texture on safari due to
-    // various bugs that exist when using it. This gives us worse performance
-    // but it will actually work on all recent version of safari. See
-    // the following issues for more info on this:
-    //
-    // https://bugs.webkit.org/show_bug.cgi?id=163866#c3
-    // https://bugs.webkit.org/show_bug.cgi?id=179417
-    if (videojs.browser.IS_ANY_SAFARI && utils.isHLS(this.player_.currentSource().type)) {
-      this.log('Video texture is not supported using image canvas hack');
-      this.videoImage_ = document.createElement('canvas');
-      this.videoImage_.width = this.player_.currentWidth();
-      this.videoImage_.height = this.player_.currentHeight();
-
-      this.videoImageContext_ = this.videoImage_.getContext('2d');
-      this.videoImageContext_.fillStyle = '#000000';
-
-      this.videoTexture = new THREE.Texture(this.videoImage_);
-
-      this.videoTexture.wrapS = THREE.ClampToEdgeWrapping;
-      this.videoTexture.wrapT = THREE.ClampToEdgeWrapping;
-      this.videoTexture.flipY = true;
-    } else {
-      this.log('Video texture is supported using that');
-      this.videoTexture = new THREE.VideoTexture(this.getVideoEl_());
-    }
+    this.videoTexture = new THREE.VideoTexture(this.getVideoEl_());
 
     // shared regardless of wether VideoTexture is used or
     // an image canvas is used
@@ -584,14 +549,6 @@ class VR extends Plugin {
       this.cancelAnimationFrame(this.animationFrameId_);
     }
 
-    if (this.videoImage_) {
-      this.videoImage_ = null;
-    }
-
-    if (this.videoImageContext_) {
-      this.videoImageContext_ = null;
-    }
-
     this.initialized_ = false;
   }