Source: ui/vr_manager.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  8. goog.provide('shaka.ui.VRManager');
  10. goog.require('shaka.log');
  11. goog.require('shaka.ui.VRWebgl');
  12. goog.require('shaka.util.EventManager');
  13. goog.require('shaka.util.FakeEvent');
  14. goog.require('shaka.util.FakeEventTarget');
  15. goog.require('shaka.util.IReleasable');
  16. goog.require('shaka.util.Platform');
  18. goog.requireType('shaka.Player');
  21. /**
  22.  * @implements {shaka.util.IReleasable}
  23.  */
  24. shaka.ui.VRManager = class extends shaka.util.FakeEventTarget {
  25.   /**
  26.    * @param {!HTMLElement} container
  27.    * @param {?HTMLCanvasElement} canvas
  28.    * @param {!HTMLMediaElement} video
  29.    * @param {!shaka.Player} player
  30.    * @param {shaka.extern.UIConfiguration} config
  31.    */
  32.   constructor(container, canvas, video, player, config) {
  33.     super();
  35.     /** @private {!HTMLElement} */
  36.     this.container_ = container;
  38.     /** @private {?HTMLCanvasElement} */
  39.     this.canvas_ = canvas;
  41.     /** @private {!HTMLMediaElement} */
  42.     this.video_ = video;
  44.     /** @private {!shaka.Player} */
  45.     this.player_ = player;
  47.     /** @private {shaka.extern.UIConfiguration} */
  48.     this.config_ = config;
  50.     /** @private {shaka.util.EventManager} */
  51.     this.loadEventManager_ = new shaka.util.EventManager();
  53.     /** @private {shaka.util.EventManager} */
  54.     this.eventManager_ = new shaka.util.EventManager();
  56.     /** @private {?WebGLRenderingContext} */
  57.     this.gl_ = this.getGL_();
  59.     /** @private {?shaka.ui.VRWebgl} */
  60.     this.vrWebgl_ = null;
  62.     /** @private {boolean} */
  63.     this.onGesture_ = false;
  65.     /** @private {number} */
  66.     this.prevX_ = 0;
  68.     /** @private {number} */
  69.     this.prevY_ = 0;
  71.     /** @private {number} */
  72.     this.prevAlpha_ = 0;
  74.     /** @private {number} */
  75.     this.prevBeta_ = 0;
  77.     /** @private {number} */
  78.     this.prevGamma_ = 0;
  80.     /** @private {?string} */
  81.     this.vrAsset_ = null;
  83.     this.loadEventManager_.listen(player, 'loading', () => {
  84.       if (this.vrWebgl_) {
  85.         this.vrWebgl_.reset();
  86.       }
  87.       this.checkVrStatus_();
  88.     });
  90.     this.loadEventManager_.listen(player, 'spatialvideoinfo', (event) => {
  91.       /** @type {shaka.extern.SpatialVideoInfo} */
  92.       const spatialInfo = event['detail'];
  93.       let unsupported = false;
  94.       switch (spatialInfo.projection) {
  95.         case 'hequ':
  96.           unsupported = spatialInfo.hfov != 360;
  97.           this.vrAsset_ = 'equirectangular';
  98.           break;
  99.         case 'fish':
  100.           this.vrAsset_ = 'equirectangular';
  101.           unsupported = true;
  102.           break;
  103.         default:
  104.           this.vrAsset_ = null;
  105.           break;
  106.       }
  107.       if (unsupported) {
  108.         shaka.log.warning('Unsupported VR projection or hfov', spatialInfo);
  109.       }
  110.       this.checkVrStatus_();
  111.     });
  113.     this.loadEventManager_.listen(player, 'nospatialvideoinfo', () => {
  114.       this.vrAsset_ = null;
  115.       this.checkVrStatus_();
  116.     });
  118.     this.loadEventManager_.listen(player, 'unloading', () => {
  119.       this.vrAsset_ = null;
  120.       this.checkVrStatus_();
  121.     });
  123.     this.checkVrStatus_();
  124.   }
  126.   /**
  127.    * @override
  128.    */
  129.   release() {
  130.     if (this.loadEventManager_) {
  131.       this.loadEventManager_.release();
  132.       this.loadEventManager_ = null;
  133.     }
  134.     if (this.eventManager_) {
  135.       this.eventManager_.release();
  136.       this.eventManager_ = null;
  137.     }
  138.     if (this.vrWebgl_) {
  139.       this.vrWebgl_.release();
  140.       this.vrWebgl_ = null;
  141.     }
  143.     // FakeEventTarget implements IReleasable
  144.     super.release();
  145.   }
  147.   /**
  148.    * @param {!shaka.extern.UIConfiguration} config
  149.    */
  150.   configure(config) {
  151.     this.config_ = config;
  152.     this.checkVrStatus_();
  153.   }
  155.   /**
  156.    * Returns if a VR is capable.
  157.    *
  158.    * @return {boolean}
  159.    */
  160.   canPlayVR() {
  161.     return !!this.gl_;
  162.   }
  164.   /**
  165.    * Returns if a VR is supported.
  166.    *
  167.    * @return {boolean}
  168.    */
  169.   isPlayingVR() {
  170.     return !!this.vrWebgl_;
  171.   }
  173.   /**
  174.    * Reset VR view.
  175.    */
  176.   reset() {
  177.     if (!this.vrWebgl_) {
  178.       shaka.log.alwaysWarn('Not playing VR content');
  179.       return;
  180.     }
  181.     this.vrWebgl_.reset();
  182.   }
  184.   /**
  185.    * Get the angle of the north.
  186.    *
  187.    * @return {?number}
  188.    */
  189.   getNorth() {
  190.     if (!this.vrWebgl_) {
  191.       shaka.log.alwaysWarn('Not playing VR content');
  192.       return null;
  193.     }
  194.     return this.vrWebgl_.getNorth();
  195.   }
  197.   /**
  198.    * Returns the field of view.
  199.    *
  200.    * @return {?number}
  201.    */
  202.   getFieldOfView() {
  203.     if (!this.vrWebgl_) {
  204.       shaka.log.alwaysWarn('Not playing VR content');
  205.       return null;
  206.     }
  207.     return this.vrWebgl_.getFieldOfView();
  208.   }
  210.   /**
  211.    * Set the field of view.
  212.    *
  213.    * @param {number} fieldOfView
  214.    */
  215.   setFieldOfView(fieldOfView) {
  216.     if (!this.vrWebgl_) {
  217.       shaka.log.alwaysWarn('Not playing VR content');
  218.       return;
  219.     }
  220.     if (fieldOfView < 0) {
  221.       shaka.log.alwaysWarn('Field of view should be greater than 0');
  222.       fieldOfView = 0;
  223.     } else if (fieldOfView > 100) {
  224.       shaka.log.alwaysWarn('Field of view should be less than 100');
  225.       fieldOfView = 100;
  226.     }
  227.     this.vrWebgl_.setFieldOfView(fieldOfView);
  228.   }
  230.   /**
  231.    * Toggle stereoscopic mode.
  232.    */
  233.   toggleStereoscopicMode() {
  234.     if (!this.vrWebgl_) {
  235.       shaka.log.alwaysWarn('Not playing VR content');
  236.       return;
  237.     }
  238.     this.vrWebgl_.toggleStereoscopicMode();
  239.   }
  241.   /**
  242.    * Returns true if stereoscopic mode is enabled.
  243.    *
  244.    * @return {boolean}
  245.    */
  246.   isStereoscopicModeEnabled() {
  247.     if (!this.vrWebgl_) {
  248.       shaka.log.alwaysWarn('Not playing VR content');
  249.       return false;
  250.     }
  251.     return this.vrWebgl_.isStereoscopicModeEnabled();
  252.   }
  254.   /**
  255.    * Increment the yaw in X angle in degrees.
  256.    *
  257.    * @param {number} angle
  258.    */
  259.   incrementYaw(angle) {
  260.     if (!this.vrWebgl_) {
  261.       shaka.log.alwaysWarn('Not playing VR content');
  262.       return;
  263.     }
  264.     this.vrWebgl_.rotateViewGlobal(
  265.         angle * shaka.ui.VRManager.TO_RADIANS_, 0, 0);
  266.   }
  268.   /**
  269.    * Increment the pitch in X angle in degrees.
  270.    *
  271.    * @param {number} angle
  272.    */
  273.   incrementPitch(angle) {
  274.     if (!this.vrWebgl_) {
  275.       shaka.log.alwaysWarn('Not playing VR content');
  276.       return;
  277.     }
  278.     this.vrWebgl_.rotateViewGlobal(
  279.         0, angle * shaka.ui.VRManager.TO_RADIANS_, 0);
  280.   }
  282.   /**
  283.    * Increment the roll in X angle in degrees.
  284.    *
  285.    * @param {number} angle
  286.    */
  287.   incrementRoll(angle) {
  288.     if (!this.vrWebgl_) {
  289.       shaka.log.alwaysWarn('Not playing VR content');
  290.       return;
  291.     }
  292.     this.vrWebgl_.rotateViewGlobal(
  293.         0, 0, angle * shaka.ui.VRManager.TO_RADIANS_);
  294.   }
  296.   /**
  297.    * @private
  298.    */
  299.   checkVrStatus_() {
  300.     if (!this.canvas_) {
  301.       return;
  302.     }
  303.     if ((this.config_.displayInVrMode || this.vrAsset_)) {
  304.       const newProjectionMode =
  305.           this.vrAsset_ || this.config_.defaultVrProjectionMode;
  306.       if (!this.vrWebgl_) {
  307.         this.canvas_.style.display = '';
  308.         this.init_(newProjectionMode);
  309.         this.dispatchEvent(new shaka.util.FakeEvent(
  310.             'vrstatuschanged',
  311.             (new Map()).set('newStatus', this.isPlayingVR())));
  312.       } else {
  313.         const currentProjectionMode = this.vrWebgl_.getProjectionMode();
  314.         if (currentProjectionMode != newProjectionMode) {
  315.           this.eventManager_.removeAll();
  316.           this.vrWebgl_.release();
  317.           this.init_(newProjectionMode);
  318.           // Re-initialization the status does not change.
  319.         }
  320.       }
  321.     } else if (!this.config_.displayInVrMode && !this.vrAsset_ &&
  322.         this.vrWebgl_) {
  323.       this.canvas_.style.display = 'none';
  324.       this.eventManager_.removeAll();
  325.       this.vrWebgl_.release();
  326.       this.vrWebgl_ = null;
  327.       this.dispatchEvent(new shaka.util.FakeEvent(
  328.           'vrstatuschanged',
  329.           (new Map()).set('newStatus', this.isPlayingVR())));
  330.     }
  331.   }
  333.   /**
  334.    * @param {string} projectionMode
  335.    * @private
  336.    */
  337.   init_(projectionMode) {
  338.     if (this.gl_ && this.canvas_) {
  339.       this.vrWebgl_ = new shaka.ui.VRWebgl(
  340.           this.video_, this.player_, this.canvas_, this.gl_, projectionMode);
  341.       this.setupVRListerners_();
  342.     }
  343.   }
  345.   /**
  346.    * @return {?WebGLRenderingContext}
  347.    * @private
  348.    */
  349.   getGL_() {
  350.     if (!this.canvas_) {
  351.       return null;
  352.     }
  353.     // The user interface is not intended for devices that are controlled with
  354.     // a remote control, and WebGL may run slowly on these devices.
  355.     if (shaka.util.Platform.isSmartTV()) {
  356.       return null;
  357.     }
  358.     const webglContexts = [
  359.       'webgl2',
  360.       'webgl',
  361.     ];
  362.     for (const webgl of webglContexts) {
  363.       const gl = this.canvas_.getContext(webgl);
  364.       if (gl) {
  365.         return /** @type {!WebGLRenderingContext} */(gl);
  366.       }
  367.     }
  368.     return null;
  369.   }
  371.   /**
  372.    * @private
  373.    */
  374.   setupVRListerners_() {
  375.     // Start
  376.     this.eventManager_.listen(this.container_, 'mousedown', (event) => {
  377.       if (!this.onGesture_) {
  378.         this.gestureStart_(event.clientX, event.clientY);
  379.       }
  380.     });
  381.     if (navigator.maxTouchPoints > 0) {
  382.       this.eventManager_.listen(this.container_, 'touchstart', (e) => {
  383.         if (!this.onGesture_) {
  384.           const event = /** @type {!TouchEvent} */(e);
  385.           this.gestureStart_(
  386.               event.touches[0].clientX, event.touches[0].clientY);
  387.         }
  388.       });
  389.     }
  391.     // Zoom
  392.     this.eventManager_.listen(this.container_, 'wheel', (e) => {
  393.       if (!this.onGesture_) {
  394.         const event = /** @type {!WheelEvent} */(e);
  395.         this.vrWebgl_.zoom(event.deltaY);
  396.         event.preventDefault();
  397.         event.stopPropagation();
  398.       }
  399.     });
  401.     // Move
  402.     this.eventManager_.listen(this.container_, 'mousemove', (event) => {
  403.       if (this.onGesture_) {
  404.         this.gestureMove_(event.clientX, event.clientY);
  405.       }
  406.     });
  407.     if (navigator.maxTouchPoints > 0) {
  408.       this.eventManager_.listen(this.container_, 'touchmove', (e) => {
  409.         if (this.onGesture_) {
  410.           const event = /** @type {!TouchEvent} */(e);
  411.           this.gestureMove_(
  412.               event.touches[0].clientX, event.touches[0].clientY);
  413.         }
  414.         e.preventDefault();
  415.       });
  416.     }
  418.     // End
  419.     this.eventManager_.listen(this.container_, 'mouseleave', () => {
  420.       this.onGesture_ = false;
  421.     });
  422.     this.eventManager_.listen(this.container_, 'mouseup', () => {
  423.       this.onGesture_ = false;
  424.     });
  425.     if (navigator.maxTouchPoints > 0) {
  426.       this.eventManager_.listen(this.container_, 'touchend', () => {
  427.         this.onGesture_ = false;
  428.       });
  429.     }
  431.     // Detect device movement
  432.     let deviceOrientationListener = false;
  433.     if (window.DeviceOrientationEvent) {
  434.       // See: https://dev.to/li/how-to-requestpermission-for-devicemotion-and-deviceorientation-events-in-ios-13-46g2
  435.       if (typeof DeviceMotionEvent.requestPermission == 'function') {
  436.         const userGestureListener = () => {
  437.           DeviceMotionEvent.requestPermission().then((newPermissionState) => {
  438.             if (newPermissionState !== 'granted' ||
  439.                 deviceOrientationListener) {
  440.               return;
  441.             }
  442.             deviceOrientationListener = true;
  443.             this.setupDeviceOrientationListener_();
  444.           });
  445.         };
  446.         DeviceMotionEvent.requestPermission().then((permissionState) => {
  447.           this.eventManager_.unlisten(
  448.               this.container_, 'click', userGestureListener);
  449.           this.eventManager_.unlisten(
  450.               this.container_, 'mouseup', userGestureListener);
  451.           if (navigator.maxTouchPoints > 0) {
  452.             this.eventManager_.unlisten(
  453.                 this.container_, 'touchend', userGestureListener);
  454.           }
  455.           if (permissionState !== 'granted') {
  456.             this.eventManager_.listenOnce(
  457.                 this.container_, 'click', userGestureListener);
  458.             this.eventManager_.listenOnce(
  459.                 this.container_, 'mouseup', userGestureListener);
  460.             if (navigator.maxTouchPoints > 0) {
  461.               this.eventManager_.listenOnce(
  462.                   this.container_, 'touchend', userGestureListener);
  463.             }
  464.             return;
  465.           }
  466.           deviceOrientationListener = true;
  467.           this.setupDeviceOrientationListener_();
  468.         }).catch(() => {
  469.           this.eventManager_.unlisten(
  470.               this.container_, 'click', userGestureListener);
  471.           this.eventManager_.unlisten(
  472.               this.container_, 'mouseup', userGestureListener);
  473.           if (navigator.maxTouchPoints > 0) {
  474.             this.eventManager_.unlisten(
  475.                 this.container_, 'touchend', userGestureListener);
  476.           }
  477.           this.eventManager_.listenOnce(
  478.               this.container_, 'click', userGestureListener);
  479.           this.eventManager_.listenOnce(
  480.               this.container_, 'mouseup', userGestureListener);
  481.           if (navigator.maxTouchPoints > 0) {
  482.             this.eventManager_.listenOnce(
  483.                 this.container_, 'touchend', userGestureListener);
  484.           }
  485.         });
  486.       } else {
  487.         deviceOrientationListener = true;
  488.         this.setupDeviceOrientationListener_();
  489.       }
  490.     }
  491.   }
  493.   /**
  494.    * @private
  495.    */
  496.   setupDeviceOrientationListener_() {
  497.     this.eventManager_.listen(window, 'deviceorientation', (e) => {
  498.       const event = /** @type {!DeviceOrientationEvent} */(e);
  499.       let alphaDif = (event.alpha || 0) - this.prevAlpha_;
  500.       let betaDif = (event.beta || 0) - this.prevBeta_;
  501.       let gammaDif = (event.gamma || 0) - this.prevGamma_;
  503.       if (Math.abs(alphaDif) > 10 || Math.abs(betaDif) > 10 ||
  504.           Math.abs(gammaDif) > 5) {
  505.         alphaDif = 0;
  506.         gammaDif = 0;
  507.         betaDif = 0;
  508.       }
  510.       this.prevAlpha_ = event.alpha || 0;
  511.       this.prevBeta_ = event.beta || 0;
  512.       this.prevGamma_ = event.gamma || 0;
  514.       const toRadians = shaka.ui.VRManager.TO_RADIANS_;
  516.       const orientation = screen.orientation.angle;
  517.       if (orientation == 90 || orientation == -90) {
  518.         this.vrWebgl_.rotateViewGlobal(
  519.             alphaDif * toRadians * -1, gammaDif * toRadians * -1, 0);
  520.       } else {
  521.         this.vrWebgl_.rotateViewGlobal(
  522.             alphaDif * toRadians * -1, betaDif * toRadians, 0);
  523.       }
  524.     });
  525.   }
  527.   /**
  528.    * @param {number} x
  529.    * @param {number} y
  530.    * @private
  531.    */
  532.   gestureStart_(x, y) {
  533.     this.onGesture_ = true;
  534.     this.prevX_ = x;
  535.     this.prevY_ = y;
  536.   }
  538.   /**
  539.    * @param {number} x
  540.    * @param {number} y
  541.    * @private
  542.    */
  543.   gestureMove_(x, y) {
  544.     const touchScaleFactor = -0.60 * Math.PI / 180;
  545.     this.vrWebgl_.rotateViewGlobal((x - this.prevX_) * touchScaleFactor,
  546.         (y - this.prevY_) * -1 * touchScaleFactor, 0);
  548.     this.prevX_ = x;
  549.     this.prevY_ = y;
  550.   }
  551. };
  553. /**
  554.  * @constant {number}
  555.  * @private
  556.  */
  557. shaka.ui.VRManager.TO_RADIANS_ = Math.PI / 180;