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.           switch (spatialInfo.hfov) {
  97.             case 360:
  98.               this.vrAsset_ = 'equirectangular';
  99.               break;
  100.             case 180:
  101.               this.vrAsset_ = 'halfequirectangular';
  102.               break;
  103.             default:
  104.               unsupported = true;
  105.               break;
  106.           }
  107.           break;
  108.         case 'fish':
  109.           this.vrAsset_ = 'equirectangular';
  110.           unsupported = true;
  111.           break;
  112.         default:
  113.           this.vrAsset_ = null;
  114.           break;
  115.       }
  116.       if (unsupported) {
  117.         shaka.log.warning('Unsupported VR projection or hfov', spatialInfo);
  118.       }
  119.       this.checkVrStatus_();
  120.     });
  122.     this.loadEventManager_.listen(player, 'nospatialvideoinfo', () => {
  123.       this.vrAsset_ = null;
  124.       this.checkVrStatus_();
  125.     });
  127.     this.loadEventManager_.listen(player, 'unloading', () => {
  128.       this.vrAsset_ = null;
  129.       this.checkVrStatus_();
  130.     });
  132.     this.checkVrStatus_();
  133.   }
  135.   /**
  136.    * @override
  137.    */
  138.   release() {
  139.     if (this.loadEventManager_) {
  140.       this.loadEventManager_.release();
  141.       this.loadEventManager_ = null;
  142.     }
  143.     if (this.eventManager_) {
  144.       this.eventManager_.release();
  145.       this.eventManager_ = null;
  146.     }
  147.     if (this.vrWebgl_) {
  148.       this.vrWebgl_.release();
  149.       this.vrWebgl_ = null;
  150.     }
  152.     // FakeEventTarget implements IReleasable
  153.     super.release();
  154.   }
  156.   /**
  157.    * @param {!shaka.extern.UIConfiguration} config
  158.    */
  159.   configure(config) {
  160.     this.config_ = config;
  161.     this.checkVrStatus_();
  162.   }
  164.   /**
  165.    * Returns if a VR is capable.
  166.    *
  167.    * @return {boolean}
  168.    */
  169.   canPlayVR() {
  170.     return !!this.gl_;
  171.   }
  173.   /**
  174.    * Returns if a VR is supported.
  175.    *
  176.    * @return {boolean}
  177.    */
  178.   isPlayingVR() {
  179.     return !!this.vrWebgl_;
  180.   }
  182.   /**
  183.    * Reset VR view.
  184.    */
  185.   reset() {
  186.     if (!this.vrWebgl_) {
  187.       shaka.log.alwaysWarn('Not playing VR content');
  188.       return;
  189.     }
  190.     this.vrWebgl_.reset();
  191.   }
  193.   /**
  194.    * Get the angle of the north.
  195.    *
  196.    * @return {?number}
  197.    */
  198.   getNorth() {
  199.     if (!this.vrWebgl_) {
  200.       shaka.log.alwaysWarn('Not playing VR content');
  201.       return null;
  202.     }
  203.     return this.vrWebgl_.getNorth();
  204.   }
  206.   /**
  207.    * Returns the field of view.
  208.    *
  209.    * @return {?number}
  210.    */
  211.   getFieldOfView() {
  212.     if (!this.vrWebgl_) {
  213.       shaka.log.alwaysWarn('Not playing VR content');
  214.       return null;
  215.     }
  216.     return this.vrWebgl_.getFieldOfView();
  217.   }
  219.   /**
  220.    * Set the field of view.
  221.    *
  222.    * @param {number} fieldOfView
  223.    */
  224.   setFieldOfView(fieldOfView) {
  225.     if (!this.vrWebgl_) {
  226.       shaka.log.alwaysWarn('Not playing VR content');
  227.       return;
  228.     }
  229.     if (fieldOfView < 0) {
  230.       shaka.log.alwaysWarn('Field of view should be greater than 0');
  231.       fieldOfView = 0;
  232.     } else if (fieldOfView > 100) {
  233.       shaka.log.alwaysWarn('Field of view should be less than 100');
  234.       fieldOfView = 100;
  235.     }
  236.     this.vrWebgl_.setFieldOfView(fieldOfView);
  237.   }
  239.   /**
  240.    * Toggle stereoscopic mode.
  241.    */
  242.   toggleStereoscopicMode() {
  243.     if (!this.vrWebgl_) {
  244.       shaka.log.alwaysWarn('Not playing VR content');
  245.       return;
  246.     }
  247.     this.vrWebgl_.toggleStereoscopicMode();
  248.   }
  250.   /**
  251.    * Returns true if stereoscopic mode is enabled.
  252.    *
  253.    * @return {boolean}
  254.    */
  255.   isStereoscopicModeEnabled() {
  256.     if (!this.vrWebgl_) {
  257.       shaka.log.alwaysWarn('Not playing VR content');
  258.       return false;
  259.     }
  260.     return this.vrWebgl_.isStereoscopicModeEnabled();
  261.   }
  263.   /**
  264.    * Increment the yaw in X angle in degrees.
  265.    *
  266.    * @param {number} angle
  267.    */
  268.   incrementYaw(angle) {
  269.     if (!this.vrWebgl_) {
  270.       shaka.log.alwaysWarn('Not playing VR content');
  271.       return;
  272.     }
  273.     this.vrWebgl_.rotateViewGlobal(
  274.         angle * shaka.ui.VRManager.TO_RADIANS_, 0, 0);
  275.   }
  277.   /**
  278.    * Increment the pitch in X angle in degrees.
  279.    *
  280.    * @param {number} angle
  281.    */
  282.   incrementPitch(angle) {
  283.     if (!this.vrWebgl_) {
  284.       shaka.log.alwaysWarn('Not playing VR content');
  285.       return;
  286.     }
  287.     this.vrWebgl_.rotateViewGlobal(
  288.         0, angle * shaka.ui.VRManager.TO_RADIANS_, 0);
  289.   }
  291.   /**
  292.    * Increment the roll in X angle in degrees.
  293.    *
  294.    * @param {number} angle
  295.    */
  296.   incrementRoll(angle) {
  297.     if (!this.vrWebgl_) {
  298.       shaka.log.alwaysWarn('Not playing VR content');
  299.       return;
  300.     }
  301.     this.vrWebgl_.rotateViewGlobal(
  302.         0, 0, angle * shaka.ui.VRManager.TO_RADIANS_);
  303.   }
  305.   /**
  306.    * @private
  307.    */
  308.   checkVrStatus_() {
  309.     if (!this.canvas_) {
  310.       return;
  311.     }
  312.     if ((this.config_.displayInVrMode || this.vrAsset_)) {
  313.       const newProjectionMode =
  314.           this.vrAsset_ || this.config_.defaultVrProjectionMode;
  315.       if (!this.vrWebgl_) {
  316.         this.canvas_.style.display = '';
  317.         this.init_(newProjectionMode);
  318.         this.dispatchEvent(new shaka.util.FakeEvent(
  319.             'vrstatuschanged',
  320.             (new Map()).set('newStatus', this.isPlayingVR())));
  321.       } else {
  322.         const currentProjectionMode = this.vrWebgl_.getProjectionMode();
  323.         if (currentProjectionMode != newProjectionMode) {
  324.           this.eventManager_.removeAll();
  325.           this.vrWebgl_.release();
  326.           this.init_(newProjectionMode);
  327.           // Re-initialization the status does not change.
  328.         }
  329.       }
  330.     } else if (!this.config_.displayInVrMode && !this.vrAsset_ &&
  331.         this.vrWebgl_) {
  332.       this.canvas_.style.display = 'none';
  333.       this.eventManager_.removeAll();
  334.       this.vrWebgl_.release();
  335.       this.vrWebgl_ = null;
  336.       this.dispatchEvent(new shaka.util.FakeEvent(
  337.           'vrstatuschanged',
  338.           (new Map()).set('newStatus', this.isPlayingVR())));
  339.     }
  340.   }
  342.   /**
  343.    * @param {string} projectionMode
  344.    * @private
  345.    */
  346.   init_(projectionMode) {
  347.     if (this.gl_ && this.canvas_) {
  348.       this.vrWebgl_ = new shaka.ui.VRWebgl(
  349.           this.video_, this.player_, this.canvas_, this.gl_, projectionMode);
  350.       this.setupVRListeners_();
  351.     }
  352.   }
  354.   /**
  355.    * @return {?WebGLRenderingContext}
  356.    * @private
  357.    */
  358.   getGL_() {
  359.     if (!this.canvas_) {
  360.       return null;
  361.     }
  362.     // The user interface is not intended for devices that are controlled with
  363.     // a remote control, and WebGL may run slowly on these devices.
  364.     if (shaka.util.Platform.isSmartTV()) {
  365.       return null;
  366.     }
  367.     const webglContexts = [
  368.       'webgl2',
  369.       'webgl',
  370.     ];
  371.     for (const webgl of webglContexts) {
  372.       const gl = this.canvas_.getContext(webgl);
  373.       if (gl) {
  374.         return /** @type {!WebGLRenderingContext} */(gl);
  375.       }
  376.     }
  377.     return null;
  378.   }
  380.   /**
  381.    * @private
  382.    */
  383.   setupVRListeners_() {
  384.     // Start
  385.     this.eventManager_.listen(this.container_, 'mousedown', (event) => {
  386.       if (!this.onGesture_) {
  387.         this.gestureStart_(event.clientX, event.clientY);
  388.       }
  389.     });
  390.     if (navigator.maxTouchPoints > 0) {
  391.       this.eventManager_.listen(this.container_, 'touchstart', (e) => {
  392.         if (!this.onGesture_) {
  393.           const event = /** @type {!TouchEvent} */(e);
  394.           this.gestureStart_(
  395.               event.touches[0].clientX, event.touches[0].clientY);
  396.         }
  397.       });
  398.     }
  400.     // Zoom
  401.     this.eventManager_.listen(this.container_, 'wheel', (e) => {
  402.       if (!this.onGesture_) {
  403.         const event = /** @type {!WheelEvent} */(e);
  404.         this.vrWebgl_.zoom(event.deltaY);
  405.         event.preventDefault();
  406.         event.stopPropagation();
  407.       }
  408.     });
  410.     // Move
  411.     this.eventManager_.listen(this.container_, 'mousemove', (event) => {
  412.       if (this.onGesture_) {
  413.         this.gestureMove_(event.clientX, event.clientY);
  414.       }
  415.     });
  416.     if (navigator.maxTouchPoints > 0) {
  417.       this.eventManager_.listen(this.container_, 'touchmove', (e) => {
  418.         if (this.onGesture_) {
  419.           const event = /** @type {!TouchEvent} */(e);
  420.           this.gestureMove_(
  421.               event.touches[0].clientX, event.touches[0].clientY);
  422.         }
  423.         e.preventDefault();
  424.       });
  425.     }
  427.     // End
  428.     this.eventManager_.listen(this.container_, 'mouseleave', () => {
  429.       this.onGesture_ = false;
  430.     });
  431.     this.eventManager_.listen(this.container_, 'mouseup', () => {
  432.       this.onGesture_ = false;
  433.     });
  434.     if (navigator.maxTouchPoints > 0) {
  435.       this.eventManager_.listen(this.container_, 'touchend', () => {
  436.         this.onGesture_ = false;
  437.       });
  438.     }
  440.     // Detect device movement
  441.     let deviceOrientationListener = false;
  442.     if (window.DeviceOrientationEvent) {
  443.       // See: https://dev.to/li/how-to-requestpermission-for-devicemotion-and-deviceorientation-events-in-ios-13-46g2
  444.       if (typeof DeviceMotionEvent.requestPermission == 'function') {
  445.         const userGestureListener = () => {
  446.           DeviceMotionEvent.requestPermission().then((newPermissionState) => {
  447.             if (newPermissionState !== 'granted' ||
  448.                 deviceOrientationListener) {
  449.               return;
  450.             }
  451.             deviceOrientationListener = true;
  452.             this.setupDeviceOrientationListener_();
  453.           });
  454.         };
  455.         DeviceMotionEvent.requestPermission().then((permissionState) => {
  456.           this.eventManager_.unlisten(
  457.               this.container_, 'click', userGestureListener);
  458.           this.eventManager_.unlisten(
  459.               this.container_, 'mouseup', userGestureListener);
  460.           if (navigator.maxTouchPoints > 0) {
  461.             this.eventManager_.unlisten(
  462.                 this.container_, 'touchend', userGestureListener);
  463.           }
  464.           if (permissionState !== 'granted') {
  465.             this.eventManager_.listenOnce(
  466.                 this.container_, 'click', userGestureListener);
  467.             this.eventManager_.listenOnce(
  468.                 this.container_, 'mouseup', userGestureListener);
  469.             if (navigator.maxTouchPoints > 0) {
  470.               this.eventManager_.listenOnce(
  471.                   this.container_, 'touchend', userGestureListener);
  472.             }
  473.             return;
  474.           }
  475.           deviceOrientationListener = true;
  476.           this.setupDeviceOrientationListener_();
  477.         }).catch(() => {
  478.           this.eventManager_.unlisten(
  479.               this.container_, 'click', userGestureListener);
  480.           this.eventManager_.unlisten(
  481.               this.container_, 'mouseup', userGestureListener);
  482.           if (navigator.maxTouchPoints > 0) {
  483.             this.eventManager_.unlisten(
  484.                 this.container_, 'touchend', userGestureListener);
  485.           }
  486.           this.eventManager_.listenOnce(
  487.               this.container_, 'click', userGestureListener);
  488.           this.eventManager_.listenOnce(
  489.               this.container_, 'mouseup', userGestureListener);
  490.           if (navigator.maxTouchPoints > 0) {
  491.             this.eventManager_.listenOnce(
  492.                 this.container_, 'touchend', userGestureListener);
  493.           }
  494.         });
  495.       } else {
  496.         deviceOrientationListener = true;
  497.         this.setupDeviceOrientationListener_();
  498.       }
  499.     }
  500.   }
  502.   /**
  503.    * @private
  504.    */
  505.   setupDeviceOrientationListener_() {
  506.     this.eventManager_.listen(window, 'deviceorientation', (e) => {
  507.       if (!this.vrWebgl_) {
  508.         return;
  509.       }
  510.       const event = /** @type {!DeviceOrientationEvent} */(e);
  511.       let alphaDif = (event.alpha || 0) - this.prevAlpha_;
  512.       let betaDif = (event.beta || 0) - this.prevBeta_;
  513.       let gammaDif = (event.gamma || 0) - this.prevGamma_;
  515.       if (Math.abs(alphaDif) > 10 || Math.abs(betaDif) > 10 ||
  516.           Math.abs(gammaDif) > 5) {
  517.         alphaDif = 0;
  518.         gammaDif = 0;
  519.         betaDif = 0;
  520.       }
  522.       this.prevAlpha_ = event.alpha || 0;
  523.       this.prevBeta_ = event.beta || 0;
  524.       this.prevGamma_ = event.gamma || 0;
  526.       const toRadians = shaka.ui.VRManager.TO_RADIANS_;
  528.       const orientation = screen.orientation.angle;
  529.       if (orientation == 90 || orientation == -90) {
  530.         this.vrWebgl_.rotateViewGlobal(
  531.             alphaDif * toRadians * -1, gammaDif * toRadians * -1, 0);
  532.       } else {
  533.         this.vrWebgl_.rotateViewGlobal(
  534.             alphaDif * toRadians * -1, betaDif * toRadians, 0);
  535.       }
  536.     });
  537.   }
  539.   /**
  540.    * @param {number} x
  541.    * @param {number} y
  542.    * @private
  543.    */
  544.   gestureStart_(x, y) {
  545.     this.onGesture_ = true;
  546.     this.prevX_ = x;
  547.     this.prevY_ = y;
  548.   }
  550.   /**
  551.    * @param {number} x
  552.    * @param {number} y
  553.    * @private
  554.    */
  555.   gestureMove_(x, y) {
  556.     const touchScaleFactor = -0.60 * Math.PI / 180;
  557.     this.vrWebgl_.rotateViewGlobal((x - this.prevX_) * touchScaleFactor,
  558.         (y - this.prevY_) * -1 * touchScaleFactor, 0);
  560.     this.prevX_ = x;
  561.     this.prevY_ = y;
  562.   }
  563. };
  565. /**
  566.  * @const {number}
  567.  * @private
  568.  */
  569. shaka.ui.VRManager.TO_RADIANS_ = Math.PI / 180;