From 55a07fc841172d0f3dcc0bd0d26566854aa048cf Mon Sep 17 00:00:00 2001 From: Grzegorz Blaszczyk Date: Tue, 18 Jun 2019 14:58:25 +0200 Subject: [PATCH 01/15] fix: VR switches to low res. after 1 chunk on HLS --- src/plugin.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/plugin.js b/src/plugin.js index 77622a20..05d08c3b 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -483,8 +483,11 @@ class VR extends Plugin { this.renderedCanvas = this.renderer.domElement; this.renderedCanvas.setAttribute('style', 'width: 100%; height: 100%; position: absolute; top:0;'); - this.player_.el().insertBefore(this.renderedCanvas, this.player_.el().firstChild); - this.getVideoEl_().style.display = 'none'; + + const videoEl = this.getVideoEl_(); + + this.player_.el().insertBefore(this.renderedCanvas, videoEl.nextSibling); + videoEl.style.opacity = '0'; if (window.navigator.getVRDisplays) { this.log('is supported, getting vr displays'); @@ -594,7 +597,7 @@ class VR extends Plugin { } // reset the video element style so that it will be displayed - this.getVideoEl_().style.display = ''; + this.getVideoEl_().style.opacity = ''; // set the current projection to the default this.currentProjection_ = this.defaultProjection_; From c56e24cc3fad9b47fa30b06ef44123c4d95b130a Mon Sep 17 00:00:00 2001 From: Grzegorz Blaszczyk Date: Mon, 22 Jul 2019 15:51:03 +0200 Subject: [PATCH 02/15] Adds support for Spatial audio via Omnitone. --- README.md | 16 ++++++++++ package.json | 1 + src/omnitone-controller.js | 61 ++++++++++++++++++++++++++++++++++++++ src/plugin.js | 29 ++++++++++++++++-- 4 files changed, 105 insertions(+), 2 deletions(-) create mode 100644 src/omnitone-controller.js diff --git a/README.md b/README.md index 7e50ff03..3aaa5df9 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,8 @@ Maintenance Status: Stable - [`'360_TB'`](#360_tb) - [`player.mediainfo.projection`](#playermediainfoprojection) - [`debug`](#debug) + - [`enableOmnitone`](#enableomnitone) + - [`omnitone`](#omnitone) - [Credits](#credits) - [Support](#support) @@ -227,6 +229,19 @@ See [`projection`](#projection) above for information of values. Note that `AUTO Enable debug logging for this plugin +### `enableOmnitone` + +> type: `boolean`, default: `false` + +Enable Omnitone library for Spatial audio rendering + +### `omnitone` + +> type: `object`, default: `{}` + +Default options for omnitone library. Please check available options on https://github.com/GoogleChrome/omnitone + + ## Credits ## This project is a conglomeration of a few amazing open source libraries. @@ -234,6 +249,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) +* [Omnitone] (https://googlechrome.github.io/omnitone) ## Support ## This work is sponsored by [Brightcove](https://www.brightcove.com), [HapYak](http://corp.hapyak.com/) and [StreamShark](https://streamshark.io) diff --git a/package.json b/package.json index 5e3c12cf..100cb9f1 100644 --- a/package.json +++ b/package.json @@ -82,6 +82,7 @@ }, "dependencies": { "global": "^4.3.2", + "omnitone": "^1.3.0", "three": "0.93.0", "video.js": "^6 || ^7", "webvr-polyfill": "0.10.6" diff --git a/src/omnitone-controller.js b/src/omnitone-controller.js new file mode 100644 index 00000000..8ace3563 --- /dev/null +++ b/src/omnitone-controller.js @@ -0,0 +1,61 @@ +import Omnitone from '../node_modules/omnitone/build/omnitone.esm'; +import videojs from 'video.js'; + +/** + * This class manages ambisonic decoding and binaural rendering via Omnitone library. + */ +class OmnitoneController extends videojs.EventTarget { + /** + * Omnitone controller class. + * + * @class + * @param {AudioContext} audioContext - associated AudioContext. + * @param {HTMLVideoElement} video - vidoe tag element. + * @param {Object} options - omnitone options. + */ + constructor(audioContext, video, options) { + super(); + + const settings = videojs.mergeOptions({ + // Safari uses the different AAC decoder than FFMPEG. The channel order is + // The default 4ch AAC channel layout for FFMPEG AAC channel ordering. + channelMap: videojs.browser.IS_SAFARI ? [2, 0, 1, 3] : [0, 1, 2, 3], + ambisonicOrder: 1 + }, options); + + this.videoElementSource = audioContext.createMediaElementSource(video); + this.foaRenderer = Omnitone.createFOARenderer(audioContext, settings); + + this.foaRenderer.initialize().then(() => { + this.videoElementSource.connect(this.foaRenderer.input); + this.foaRenderer.output.connect(audioContext.destination); + this.initialized = true; + this.trigger({type: 'omnitone-ready'}); + }, (error) => { + this.trigger({type: 'omnitone-error', error}); + }); + } + + /** + * Updates the rotation of the Omnitone decoder based on three.js camera matrix. + * + * @param {Camera} camera Three.js camera object + */ + update(camera) { + if (!this.initialized) { + return; + } + this.foaRenderer.setRotationMatrixFromCamera(camera.matrix); + } + + /** + * Destroys the controller and does any necessary cleanup. + */ + dispose() { + this.initialized = false; + this.foaRenderer.setRenderingMode('bypass'); + this.foaRenderer = null; + } +} + +export default OmnitoneController; diff --git a/src/plugin.js b/src/plugin.js index 05d08c3b..9a480a68 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -9,6 +9,7 @@ import VREffect from 'three/examples/js/effects/VREffect.js'; import OrbitOrientationContols from './orbit-orientation-controls.js'; import * as utils from './utils'; import CanvasPlayerControls from './canvas-player-controls'; +import OmnitoneController from './omnitone-controller'; // import controls so they get regisetered with videojs import './cardboard-button'; @@ -16,9 +17,11 @@ import './big-vr-play-button'; // Default options for the plugin. const defaults = { - projection: 'AUTO', + debug: false, + enableOmnitone: false, forceCardboard: false, - debug: false + omnitone: {}, + projection: 'AUTO' }; const errors = { @@ -36,6 +39,11 @@ const errors = { headline: '360 HLS video not supported on this device', type: '360_NOT_SUPPORTED', message: "Your browser/device does not support HLS 360 video. See http://webvr.info for assistance." + }, + 'web-vr-omnitone-init-error': { + headline: 'Omnitone initilization error', + type: 'OMNITONE_INIT_ERROR', + message: 'Omnitone initialization error. Open browser console to check the details.' } }; @@ -355,6 +363,9 @@ class VR extends Plugin { } this.controls3d.update(); + if (this.omniController) { + this.omniController.update(this.camera); + } this.effect.render(this.scene, this.camera); if (window.navigator.getGamepads) { @@ -533,6 +544,14 @@ class VR extends Plugin { this.triggerError_({code: 'web-vr-not-supported', dismiss: false}); } + if (this.options_.enableOmnitone) { + this.omniController = new OmnitoneController(THREE.AudioContext.getContext(), this.getVideoEl_(), this.options_.omnitone); + this.omniController.on('omnitone-error', (event) => { + videojs.log.error('videojs-vr: omnitone init error: ' + event.error); + this.triggerError_({code: 'web-vr-omnitone-init-error', dismiss: false}); + }); + } + this.on(this.player_, 'fullscreenchange', this.handleResize_); window.addEventListener('vrdisplaypresentchange', this.handleResize_, true); window.addEventListener('resize', this.handleResize_, true); @@ -557,6 +576,12 @@ class VR extends Plugin { return; } + if (this.omniController) { + this.omniController.off('omnitone-error'); + this.omniController.dispose(); + this.omniController = undefined; + } + if (this.controls3d) { this.controls3d.dispose(); this.controls3d = null; From 7d6fd7b912bb15c29db5718e215f0ccfb407608f Mon Sep 17 00:00:00 2001 From: Grzegorz Blaszczyk Date: Mon, 22 Jul 2019 19:00:13 +0200 Subject: [PATCH 03/15] adds demo example for spatial media --- examples/spatial.html | 29 +++++++++++++++++++++++++++++ index.html | 1 + 2 files changed, 30 insertions(+) create mode 100644 examples/spatial.html diff --git a/examples/spatial.html b/examples/spatial.html new file mode 100644 index 00000000..5b56837d --- /dev/null +++ b/examples/spatial.html @@ -0,0 +1,29 @@ + + + + + videojs-vr Demo + + + + + + + + + + + diff --git a/index.html b/index.html index 7de71c04..1b2c2aa8 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@
  • Cube Video example
  • "Fluid" video size example
  • Iframe example
    • +
  • Spatial audio example
    • From db9fea42c9f231a0cd3f5225611f166dd4518100 Mon Sep 17 00:00:00 2001 From: Grzegorz Blaszczyk Date: Mon, 22 Jul 2019 19:00:53 +0200 Subject: [PATCH 04/15] updates package-lock.json file --- package-lock.json | 153 ++++++++++++++++++++++++++-------------------- 1 file changed, 88 insertions(+), 65 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3d5084a0..76e1a76a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1396,12 +1396,6 @@ } } }, - "babylon": { - "version": "7.0.0-beta.19", - "resolved": "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.19.tgz", - "integrity": "sha512-Vg0C9s/REX6/WIXN37UKpv5ZhRi6A4pjHlpkE34+8/a6c2W1Q692n3hmc+SZG5lKRnaExLUbxtJ1SVT+KaCQ/A==", - "dev": true - }, "backo2": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz", @@ -4090,7 +4084,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -4111,12 +4106,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -4131,17 +4128,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -4258,7 +4258,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -4270,6 +4271,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -4284,6 +4286,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -4291,12 +4294,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -4315,6 +4320,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -4395,7 +4401,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -4407,6 +4414,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -4492,7 +4500,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -4528,6 +4537,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -4547,6 +4557,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -4590,12 +4601,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -6076,20 +6089,62 @@ "from": "git+https://github.com/BrandonOCasey/jsdoc.git#feat/plugin-from-cli", "dev": true, "requires": { - "babylon": "7.0.0-beta.19", + "@babel/parser": "~7.2.3", "bluebird": "~3.5.0", "catharsis": "~0.8.9", "escape-string-regexp": "~1.0.5", "js2xmlparser": "~3.0.0", - "klaw": "~2.0.0", - "markdown-it": "~8.3.1", - "markdown-it-named-headers": "~0.0.4", - "marked": "~0.3.6", + "klaw": "~3.0.0", + "markdown-it": "~8.4.2", + "markdown-it-anchor": "~5.0.2", + "marked": "~0.6.0", "mkdirp": "~0.5.1", "requizzle": "~0.2.1", "strip-json-comments": "~2.0.1", "taffydb": "2.6.2", - "underscore": "~1.8.3" + "underscore": "~1.9.1" + }, + "dependencies": { + "@babel/parser": { + "version": "7.2.3", + "resolved": "http://devnpm.sr4.screen9.com:80/@babel%2fparser/-/parser-7.2.3.tgz", + "integrity": "sha512-0LyEcVlfCoFmci8mXx8A5oIkpkOgyo8dRHtxBnK9RRBwxO2+JZPNsqtVEZQ7mJFPxnXF9lfmU24mHOPI0qnlkA==", + "dev": true + }, + "klaw": { + "version": "3.0.0", + "resolved": "http://devnpm.sr4.screen9.com:80/klaw/-/klaw-3.0.0.tgz", + "integrity": "sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g==", + "dev": true, + "requires": { + "graceful-fs": "^4.1.9" + } + }, + "markdown-it": { + "version": "8.4.2", + "resolved": "http://devnpm.sr4.screen9.com:80/markdown-it/-/markdown-it-8.4.2.tgz", + "integrity": "sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==", + "dev": true, + "requires": { + "argparse": "^1.0.7", + "entities": "~1.1.1", + "linkify-it": "^2.0.0", + "mdurl": "^1.0.1", + "uc.micro": "^1.0.5" + } + }, + "marked": { + "version": "0.6.2", + "resolved": "http://devnpm.sr4.screen9.com:80/marked/-/marked-0.6.2.tgz", + "integrity": "sha512-LqxwVH3P/rqKX4EKGz7+c2G9r98WeM/SW34ybhgNGhUQNKtf1GmmSkJ6cDGJ/t6tiyae49qRkpyTw2B9HOrgUA==", + "dev": true + }, + "underscore": { + "version": "1.9.1", + "resolved": "http://devnpm.sr4.screen9.com:80/underscore/-/underscore-1.9.1.tgz", + "integrity": "sha512-5/4etnCkd9c8gwgowi5/om/mYO5ajCaOgdzj/oW+0eQV9WxKBDZw5+ycmKmeaTXjInS/W0BzpGLo2xR2aBwZdg==", + "dev": true + } } }, "jsdoctypeparser": { @@ -6413,15 +6468,6 @@ "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", "dev": true }, - "klaw": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/klaw/-/klaw-2.0.0.tgz", - "integrity": "sha1-WcEo4Nxc5BAgEVEZTuucv4WGUPY=", - "dev": true, - "requires": { - "graceful-fs": "^4.1.9" - } - }, "lazy-cache": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-2.0.2.tgz", @@ -6906,27 +6952,11 @@ "integrity": "sha512-lbRZ2mE3Q9RtLjxZBZ9+IMl68DKIXaVAhwvwn9pmjnPLS0h/6kyBMgNhqi1xFJ/2yv6cSyv0jbiZavZv93JkkA==", "dev": true }, - "markdown-it": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.3.2.tgz", - "integrity": "sha512-4J92IhJq1kGoyXddwzzfjr9cEKGexBfFsZooKYMhMLLlWa4+dlSPDUUP7y+xQOCebIj61aLmKlowg//YcdPP1w==", - "dev": true, - "requires": { - "argparse": "^1.0.7", - "entities": "~1.1.1", - "linkify-it": "^2.0.0", - "mdurl": "^1.0.1", - "uc.micro": "^1.0.3" - } - }, - "markdown-it-named-headers": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/markdown-it-named-headers/-/markdown-it-named-headers-0.0.4.tgz", - "integrity": "sha1-gu/CgyQkCmsed7mq5QF3HV81HB8=", - "dev": true, - "requires": { - "string": "^3.0.1" - } + "markdown-it-anchor": { + "version": "5.0.2", + "resolved": "http://devnpm.sr4.screen9.com:80/markdown-it-anchor/-/markdown-it-anchor-5.0.2.tgz", + "integrity": "sha512-AFM/woBI8QDJMS/9+MmsBMT5/AR+ImfOsunQZTZhzcTmna3rIzAzbOh5E0l6mlFM/i9666BpUtkqQ9bS7WApCg==", + "dev": true }, "markdown-table": { "version": "0.4.0", @@ -6946,12 +6976,6 @@ "traverse": "^0.6.6" } }, - "marked": { - "version": "0.3.19", - "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.19.tgz", - "integrity": "sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg==", - "dev": true - }, "match-stream": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/match-stream/-/match-stream-0.0.2.tgz", @@ -8245,6 +8269,11 @@ "isobject": "^3.0.1" } }, + "omnitone": { + "version": "1.3.0", + "resolved": "http://devnpm.sr4.screen9.com:80/omnitone/-/omnitone-1.3.0.tgz", + "integrity": "sha512-iYmS66kHMw5K3E4cXaiBjjBg3hzinUhD9NrvkGZc33QcYSZVclytcD84Du2aL1Wdp7ulAfxfNMHlC8TXxuhgew==" + }, "on-finished": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", @@ -10993,12 +11022,6 @@ } } }, - "string": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/string/-/string-3.3.3.tgz", - "integrity": "sha1-XqIRzZLSKOGEKUmQpsyXs2anfLA=", - "dev": true - }, "string-argv": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.0.2.tgz", From b5140543b5101bff8f7d238ef9d0579e6733b8e0 Mon Sep 17 00:00:00 2001 From: Grzegorz Blaszczyk Date: Fri, 2 Aug 2019 00:34:35 +0200 Subject: [PATCH 05/15] changes projection from 360_CUBE to 360 --- examples/spatial.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/spatial.html b/examples/spatial.html index 5b56837d..0d31766a 100644 --- a/examples/spatial.html +++ b/examples/spatial.html @@ -19,7 +19,7 @@ (function(window, videojs) { var player = window.player = videojs('videojs-vr-player'); player.mediainfo = player.mediainfo || {}; - player.mediainfo.projection = '360_CUBE'; + player.mediainfo.projection = '360'; // AUTO is the default and looks at mediainfo var vr = window.vr = player.vr({projection: 'AUTO', debug: true, forceCardboard: false, enableOmnitone: true, omnitone: {}}); From f8dbbf3298dafca131c6330fc43d7c6189a6c854 Mon Sep 17 00:00:00 2001 From: Grzegorz Blaszczyk Date: Fri, 2 Aug 2019 00:36:01 +0200 Subject: [PATCH 06/15] Fixes problem with audiocontext suspended --- src/omnitone-controller.js | 3 +++ src/plugin.js | 13 +++++++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/omnitone-controller.js b/src/omnitone-controller.js index 8ace3563..89e2fcfd 100644 --- a/src/omnitone-controller.js +++ b/src/omnitone-controller.js @@ -27,6 +27,9 @@ class OmnitoneController extends videojs.EventTarget { this.foaRenderer = Omnitone.createFOARenderer(audioContext, settings); this.foaRenderer.initialize().then(() => { + if (audioContext.state === 'suspended') { + this.trigger({type: 'audiocontext-suspended'}); + } this.videoElementSource.connect(this.foaRenderer.input); this.foaRenderer.output.connect(audioContext.destination); this.initialized = true; diff --git a/src/plugin.js b/src/plugin.js index 9a480a68..06c0f15e 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -545,9 +545,17 @@ class VR extends Plugin { } if (this.options_.enableOmnitone) { - this.omniController = new OmnitoneController(THREE.AudioContext.getContext(), this.getVideoEl_(), this.options_.omnitone); + const audiocontext = THREE.AudioContext.getContext(); + + this.omniController = new OmnitoneController(audiocontext, this.getVideoEl_(), this.options_.omnitone); + this.omniController.one('audiocontext-suspended', () => { + this.player.pause(); + this.player.one('playing', () => { + audiocontext.resume(); + }); + }); this.omniController.on('omnitone-error', (event) => { - videojs.log.error('videojs-vr: omnitone init error: ' + event.error); + videojs.log.error('videojs-vr: ' + event.error); this.triggerError_({code: 'web-vr-omnitone-init-error', dismiss: false}); }); } @@ -578,6 +586,7 @@ class VR extends Plugin { if (this.omniController) { this.omniController.off('omnitone-error'); + this.omniController.off('audiocontext-suspended'); this.omniController.dispose(); this.omniController = undefined; } From d6c803df0c73b233c57bf2e104b37618f99ec65c Mon Sep 17 00:00:00 2001 From: Grzegorz Blaszczyk Date: Tue, 20 Aug 2019 22:50:22 +0200 Subject: [PATCH 07/15] adds z-index: -1 to the video tag element. --- src/plugin.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/plugin.js b/src/plugin.js index 05d08c3b..5076e22c 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -484,10 +484,11 @@ class VR extends Plugin { this.renderedCanvas = this.renderer.domElement; this.renderedCanvas.setAttribute('style', 'width: 100%; height: 100%; position: absolute; top:0;'); - const videoEl = this.getVideoEl_(); + const videoElStyle = this.getVideoEl_().style; - this.player_.el().insertBefore(this.renderedCanvas, videoEl.nextSibling); - videoEl.style.opacity = '0'; + this.player_.el().insertBefore(this.renderedCanvas, this.player_.el().firstChild); + videoElStyle.zIndex = '-1'; + videoElStyle.opacity = '0'; if (window.navigator.getVRDisplays) { this.log('is supported, getting vr displays'); @@ -597,7 +598,10 @@ class VR extends Plugin { } // reset the video element style so that it will be displayed - this.getVideoEl_().style.opacity = ''; + const videoElStyle = this.getVideoEl_().style; + + videoElStyle.zIndex = ''; + videoElStyle.opacity = ''; // set the current projection to the default this.currentProjection_ = this.defaultProjection_; From f0e1ed7edffceb5243c6118939240c9e975b2b73 Mon Sep 17 00:00:00 2001 From: Grzegorz Blaszczyk Date: Fri, 30 Aug 2019 23:59:51 +0200 Subject: [PATCH 08/15] renames `enableOmnitone` to `omnitone` --- src/plugin.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/plugin.js b/src/plugin.js index 8ec84345..061b33c6 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -18,9 +18,9 @@ import './big-vr-play-button'; // Default options for the plugin. const defaults = { debug: false, - enableOmnitone: false, + omnitone: false, forceCardboard: false, - omnitone: {}, + omnitoneOptions: {}, projection: 'AUTO' }; @@ -722,10 +722,10 @@ void main() { this.triggerError_({code: 'web-vr-not-supported', dismiss: false}); } - if (this.options_.enableOmnitone) { + if (this.options_.omnitone) { const audiocontext = THREE.AudioContext.getContext(); - this.omniController = new OmnitoneController(audiocontext, this.getVideoEl_(), this.options_.omnitone); + this.omniController = new OmnitoneController(audiocontext, this.getVideoEl_(), this.options_.omnitoneOptions); this.omniController.one('audiocontext-suspended', () => { this.player.pause(); this.player.one('playing', () => { From 43fa8f11c0f00a45a5e6e5267c35e7eafae16227 Mon Sep 17 00:00:00 2001 From: Grzegorz Blaszczyk Date: Sat, 31 Aug 2019 00:14:55 +0200 Subject: [PATCH 09/15] makes omnitone external and doesn't include it to the build files. --- examples/spatial.html | 3 ++- scripts/karma.conf.js | 8 +++++++- scripts/rollup.config.js | 7 +++++++ src/omnitone-controller.js | 2 +- 4 files changed, 17 insertions(+), 3 deletions(-) diff --git a/examples/spatial.html b/examples/spatial.html index 0d31766a..4813dcc9 100644 --- a/examples/spatial.html +++ b/examples/spatial.html @@ -14,6 +14,7 @@
  • return to main example
    • + diff --git a/scripts/karma.conf.js b/scripts/karma.conf.js index 751e0cd2..7dca7099 100644 --- a/scripts/karma.conf.js +++ b/scripts/karma.conf.js @@ -4,7 +4,13 @@ module.exports = function(config) { // see https://github.com/videojs/videojs-generate-karma-config // for options - const options = {}; + const options = { + files(defaults) { + return [ + 'node_modules/omnitone/build/omnitone.js' + ]; + } + }; config = generate(config, options); diff --git a/scripts/rollup.config.js b/scripts/rollup.config.js index b7b93118..56bcbc11 100644 --- a/scripts/rollup.config.js +++ b/scripts/rollup.config.js @@ -4,6 +4,13 @@ const replace = require('./rollup-replace'); // see https://github.com/videojs/videojs-generate-rollup-config // for options const options = { + globals(defaults) { + Object.keys(defaults).forEach(function(type) { + defaults[type].omnitone = 'Omnitone'; + }); + + return defaults; + }, primedPlugins(defaults) { return Object.assign(defaults, {replace}); }, diff --git a/src/omnitone-controller.js b/src/omnitone-controller.js index 89e2fcfd..c6952fed 100644 --- a/src/omnitone-controller.js +++ b/src/omnitone-controller.js @@ -1,4 +1,4 @@ -import Omnitone from '../node_modules/omnitone/build/omnitone.esm'; +import * as Omnitone from 'omnitone'; import videojs from 'video.js'; /** From 1cb517414a2ac5e15429ff48ba02659e8af0a6d2 Mon Sep 17 00:00:00 2001 From: Grzegorz Blaszczyk Date: Sat, 31 Aug 2019 00:26:57 +0200 Subject: [PATCH 10/15] updates readme file --- README.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index bf287117..07017d17 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,7 @@ Maintenance Status: Stable - [Installation](#installation) - [Browser Support](#browser-support) - [Projection support](#projection-support) +- [Usage](#usage) - [` From 5411e591f2c5398fbccfda8e54435e3444e70457 Mon Sep 17 00:00:00 2001 From: Grzegorz Blaszczyk Date: Mon, 9 Sep 2019 18:13:41 +0200 Subject: [PATCH 15/15] updates description for omnitone option --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 07017d17..d3778ea8 100644 --- a/README.md +++ b/README.md @@ -247,9 +247,10 @@ Enable debug logging for this plugin ### `omnitone` -> type: `boolean`, default: `false` +> type: `Omnitone library object` -Enable Omnitone library for Spatial audio rendering +Use this property to pass the Omnitone library object to the plugin. +Please be aware of, the Omnitone library is not included in the build files. ### `omnitoneOptions`