videojs · brandonocasey · Sep 9, 2019 · Jun 18, 2019 · Jul 22, 2019 · Jul 22, 2019
diff --git a/README.md b/README.md
@@ -47,6 +47,8 @@ Maintenance Status: Stable
     - [`'EAC_LR'`](#eac_lr)
   - [`player.mediainfo.projection`](#playermediainfoprojection)
   - [`debug`](#debug)
+  - [`omnitone`](#omnitone)
+  - [`omnitoneOptions`](#omnitoneoptions)
 - [Credits](#credits)
 - [Support](#support)
 
@@ -243,13 +245,27 @@ See [`projection`](#projection) above for information of values. Note that `AUTO
 
 Enable debug logging for this plugin
 
+### `omnitone`
+
+> type: `boolean`, default: `false`
+
+Enable Omnitone library for Spatial audio rendering
+
+### `omnitoneOptions`
+
+> type: `object`, default: `{}`
+
+Default options for the 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.
 
 * [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/examples/spatial.html b/examples/spatial.html
@@ -0,0 +1,30 @@
+<!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="your-spatial-video.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="../node_modules/omnitone/build/omnitone.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 = '360';
+
+      // AUTO is the default and looks at mediainfo
+      var vr = window.vr = player.vr({projection: 'AUTO', debug: true, forceCardboard: false, omnitone: true, omnitoneOptions: {}});
+    }(window, window.videojs));
+  </script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -16,6 +16,7 @@
     <li><a href="examples/eac.html">EAC video example</a></li>
     <li><a href="examples/eac-lr.html">EAC LR video example</a></li>
     <li><a href="examples/fluid.html">"Fluid" video size example</a></li>
+    <li><a href="examples/spatial.html">Spatial audio example</a></li>
   </ul>
 </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -78,6 +78,7 @@
     ]
   },
   "dependencies": {
+    "omnitone": "^1.3.0",
     "@babel/runtime": "^7.5.5",
     "global": "^4.4.0",
     "three": "0.93.0",

diff --git 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
@@ -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
@@ -0,0 +1,64 @@
+import * as Omnitone from 'omnitone';
+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(() => {
+      if (audioContext.state === 'suspended') {
+        this.trigger({type: 'audiocontext-suspended'});
+      }
+      this.videoElementSource.connect(this.foaRenderer.input);
+      this.foaRenderer.output.connect(audioContext.destination);
+      this.initialized = true;
+      this.trigger({type: 'omnitone-ready'});
+    }, (error) => {
+      videojs.log.warn(`videojs-vr: Omnitone initializes failed with the following 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
@@ -9,16 +9,19 @@ 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';
 import './big-vr-play-button';
 
 // Default options for the plugin.
 const defaults = {
-  projection: 'AUTO',
+  debug: false,
+  omnitone: false,
   forceCardboard: false,
-  debug: false
+  omnitoneOptions: {},
+  projection: 'AUTO'
 };
 
 const errors = {
@@ -530,6 +533,9 @@ void main() {
     }
 
     this.controls3d.update();
+    if (this.omniController) {
+      this.omniController.update(this.camera);
+    }
     this.effect.render(this.scene, this.camera);
 
     if (window.navigator.getGamepads) {
@@ -711,6 +717,18 @@ void main() {
       this.triggerError_({code: 'web-vr-not-supported', dismiss: false});
     }
 
+    if (this.options_.omnitone) {
+      const audiocontext = THREE.AudioContext.getContext();
+
+      this.omniController = new OmnitoneController(audiocontext, this.getVideoEl_(), this.options_.omnitoneOptions);
+      this.omniController.one('audiocontext-suspended', () => {
+        this.player.pause();
+        this.player.one('playing', () => {
+          audiocontext.resume();
+        });
+      });
+    }
+
     this.on(this.player_, 'fullscreenchange', this.handleResize_);
     window.addEventListener('vrdisplaypresentchange', this.handleResize_, true);
     window.addEventListener('resize', this.handleResize_, true);
@@ -736,6 +754,12 @@ void main() {
       return;
     }
 
+    if (this.omniController) {
+      this.omniController.off('audiocontext-suspended');
+      this.omniController.dispose();
+      this.omniController = undefined;
+    }
+
     if (this.controls3d) {
       this.controls3d.dispose();
       this.controls3d = null;