Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
May 14, 2018
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
73d9a63
add browser support section
brandonocasey May 14, 2018
bd7c477
only use canvas hack on ios < 11, fix log
brandonocasey May 14, 2018
f63f14f
user playsinline in demo
brandonocasey May 14, 2018
2ae47f0
remove work-around
brandonocasey May 14, 2018
df68121
update README
brandonocasey May 14, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
59 changes: 8 additions & 51 deletions src/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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_() {
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;
}

Expand Down