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.device.DeviceFactory');
  11. goog.require('shaka.device.IDevice');
  12. goog.require('shaka.log');
  13. goog.require('shaka.ui.VRWebgl');
  14. goog.require('shaka.util.Dom');
  15. goog.require('shaka.util.EventManager');
  16. goog.require('shaka.util.FakeEvent');
  17. goog.require('shaka.util.FakeEventTarget');
  18. goog.require('shaka.util.IReleasable');
  20. goog.requireType('shaka.Player');
  23. /**
  24.  * @implements {shaka.util.IReleasable}
  25.  */
  26. shaka.ui.VRManager = class extends shaka.util.FakeEventTarget {
  27.   /**
  28.    * @param {!HTMLElement} container
  29.    * @param {?HTMLCanvasElement} canvas
  30.    * @param {!HTMLMediaElement} video
  31.    * @param {!shaka.Player} player
  32.    * @param {shaka.extern.UIConfiguration} config
  33.    */
  34.   constructor(container, canvas, video, player, config) {
  35.     super();
  37.     /** @private {!HTMLElement} */
  38.     this.container_ = container;
  40.     /** @private {?HTMLCanvasElement} */
  41.     this.canvas_ = canvas;
  43.     /** @private {!HTMLMediaElement} */
  44.     this.video_ = video;
  46.     /** @private {!shaka.Player} */
  47.     this.player_ = player;
  49.     /** @private {shaka.extern.UIConfiguration} */
  50.     this.config_ = config;
  52.     /** @private {shaka.util.EventManager} */
  53.     this.loadEventManager_ = new shaka.util.EventManager();
  55.     /** @private {shaka.util.EventManager} */
  56.     this.eventManager_ = new shaka.util.EventManager();
  58.     /** @private {?WebGLRenderingContext} */
  59.     this.gl_ = this.getGL_(this.canvas_);
  61.     /** @private {?shaka.ui.VRWebgl} */
  62.     this.vrWebgl_ = null;
  64.     /** @private {boolean} */
  65.     this.onGesture_ = false;
  67.     /** @private {number} */
  68.     this.prevX_ = 0;
  70.     /** @private {number} */
  71.     this.prevY_ = 0;
  73.     /** @private {number} */
  74.     this.prevAlpha_ = 0;
  76.     /** @private {number} */
  77.     this.prevBeta_ = 0;
  79.     /** @private {number} */
  80.     this.prevGamma_ = 0;
  82.     /** @private {?string} */
  83.     this.vrAsset_ = null;
  85.     this.loadEventManager_.listen(player, 'loading', () => {
  86.       if (this.vrWebgl_) {
  87.         this.vrWebgl_.reset();
  88.       }
  89.       this.checkVrStatus_();
  90.     });
  92.     this.loadEventManager_.listen(player, 'spatialvideoinfo', (event) => {
  93.       /** @type {shaka.extern.SpatialVideoInfo} */
  94.       const spatialInfo = event['detail'];
  95.       let unsupported = false;
  96.       switch (spatialInfo.projection) {
  97.         case 'rect':
  98.           // Rectilinear content is the flat rectangular media.
  99.           this.vrAsset_ = null;
  100.           break;
  101.         case 'equi':
  102.           this.vrAsset_ = 'equirectangular';
  103.           break;
  104.         case 'hequ':
  105.           switch (spatialInfo.hfov) {
  106.             case 360:
  107.               this.vrAsset_ = 'equirectangular';
  108.               break;
  109.             case 180:
  110.               this.vrAsset_ = 'halfequirectangular';
  111.               break;
  112.             default:
  113.               if (spatialInfo.hfov == null) {
  114.                 this.vrAsset_ = 'halfequirectangular';
  115.               } else {
  116.                 this.vrAsset_ = null;
  117.                 unsupported = true;
  118.               }
  119.               break;
  120.           }
  121.           break;
  122.         case 'fish':
  123.           // It's not really the same thing, but the difference is very subtle
  124.           // and allows us to tolerate it.
  125.           this.vrAsset_ = 'halfequirectangular';
  126.           break;
  127.         default:
  128.           this.vrAsset_ = null;
  129.           unsupported = true;
  130.           break;
  131.       }
  132.       if (unsupported) {
  133.         shaka.log.warning('Unsupported VR projection or hfov', spatialInfo);
  134.       }
  135.       this.checkVrStatus_();
  136.     });
  138.     this.loadEventManager_.listen(player, 'nospatialvideoinfo', () => {
  139.       this.vrAsset_ = null;
  140.       this.checkVrStatus_();
  141.     });
  143.     this.loadEventManager_.listen(player, 'unloading', () => {
  144.       this.vrAsset_ = null;
  145.       this.checkVrStatus_();
  146.     });
  148.     this.checkVrStatus_();
  149.   }
  151.   /**
  152.    * @override
  153.    */
  154.   release() {
  155.     if (this.loadEventManager_) {
  156.       this.loadEventManager_.release();
  157.       this.loadEventManager_ = null;
  158.     }
  159.     if (this.eventManager_) {
  160.       this.eventManager_.release();
  161.       this.eventManager_ = null;
  162.     }
  163.     if (this.vrWebgl_) {
  164.       this.vrWebgl_.release();
  165.       this.vrWebgl_ = null;
  166.     }
  168.     // FakeEventTarget implements IReleasable
  169.     super.release();
  170.   }
  172.   /**
  173.    * @param {!shaka.extern.UIConfiguration} config
  174.    */
  175.   configure(config) {
  176.     this.config_ = config;
  177.     this.checkVrStatus_();
  178.   }
  180.   /**
  181.    * Returns if a VR is capable.
  182.    *
  183.    * @return {boolean}
  184.    */
  185.   canPlayVR() {
  186.     if (this.canvas_) {
  187.       return !!this.gl_;
  188.     }
  189.     const canvas =
  190.         shaka.util.Dom.asHTMLCanvasElement(document.createElement('canvas'));
  191.     return !!this.getGL_(canvas);
  192.   }
  194.   /**
  195.    * Returns if a VR is supported.
  196.    *
  197.    * @return {boolean}
  198.    */
  199.   isPlayingVR() {
  200.     return !!this.vrWebgl_;
  201.   }
  203.   /**
  204.    * Reset VR view.
  205.    */
  206.   reset() {
  207.     if (!this.vrWebgl_) {
  208.       shaka.log.alwaysWarn('Not playing VR content');
  209.       return;
  210.     }
  211.     this.vrWebgl_.reset();
  212.   }
  214.   /**
  215.    * Get the angle of the north.
  216.    *
  217.    * @return {?number}
  218.    */
  219.   getNorth() {
  220.     if (!this.vrWebgl_) {
  221.       shaka.log.alwaysWarn('Not playing VR content');
  222.       return null;
  223.     }
  224.     return this.vrWebgl_.getNorth();
  225.   }
  227.   /**
  228.    * Returns the field of view.
  229.    *
  230.    * @return {?number}
  231.    */
  232.   getFieldOfView() {
  233.     if (!this.vrWebgl_) {
  234.       shaka.log.alwaysWarn('Not playing VR content');
  235.       return null;
  236.     }
  237.     return this.vrWebgl_.getFieldOfView();
  238.   }
  240.   /**
  241.    * Set the field of view.
  242.    *
  243.    * @param {number} fieldOfView
  244.    */
  245.   setFieldOfView(fieldOfView) {
  246.     if (!this.vrWebgl_) {
  247.       shaka.log.alwaysWarn('Not playing VR content');
  248.       return;
  249.     }
  250.     if (fieldOfView < 0) {
  251.       shaka.log.alwaysWarn('Field of view should be greater than 0');
  252.       fieldOfView = 0;
  253.     } else if (fieldOfView > 100) {
  254.       shaka.log.alwaysWarn('Field of view should be less than 100');
  255.       fieldOfView = 100;
  256.     }
  257.     this.vrWebgl_.setFieldOfView(fieldOfView);
  258.   }
  260.   /**
  261.    * Toggle stereoscopic mode.
  262.    */
  263.   toggleStereoscopicMode() {
  264.     if (!this.vrWebgl_) {
  265.       shaka.log.alwaysWarn('Not playing VR content');
  266.       return;
  267.     }
  268.     this.vrWebgl_.toggleStereoscopicMode();
  269.   }
  271.   /**
  272.    * Returns true if stereoscopic mode is enabled.
  273.    *
  274.    * @return {boolean}
  275.    */
  276.   isStereoscopicModeEnabled() {
  277.     if (!this.vrWebgl_) {
  278.       shaka.log.alwaysWarn('Not playing VR content');
  279.       return false;
  280.     }
  281.     return this.vrWebgl_.isStereoscopicModeEnabled();
  282.   }
  284.   /**
  285.    * Increment the yaw in X angle in degrees.
  286.    *
  287.    * @param {number} angle
  288.    */
  289.   incrementYaw(angle) {
  290.     if (!this.vrWebgl_) {
  291.       shaka.log.alwaysWarn('Not playing VR content');
  292.       return;
  293.     }
  294.     this.vrWebgl_.rotateViewGlobal(
  295.         angle * shaka.ui.VRManager.TO_RADIANS_, 0, 0);
  296.   }
  298.   /**
  299.    * Increment the pitch in X angle in degrees.
  300.    *
  301.    * @param {number} angle
  302.    */
  303.   incrementPitch(angle) {
  304.     if (!this.vrWebgl_) {
  305.       shaka.log.alwaysWarn('Not playing VR content');
  306.       return;
  307.     }
  308.     this.vrWebgl_.rotateViewGlobal(
  309.         0, angle * shaka.ui.VRManager.TO_RADIANS_, 0);
  310.   }
  312.   /**
  313.    * Increment the roll in X angle in degrees.
  314.    *
  315.    * @param {number} angle
  316.    */
  317.   incrementRoll(angle) {
  318.     if (!this.vrWebgl_) {
  319.       shaka.log.alwaysWarn('Not playing VR content');
  320.       return;
  321.     }
  322.     this.vrWebgl_.rotateViewGlobal(
  323.         0, 0, angle * shaka.ui.VRManager.TO_RADIANS_);
  324.   }
  326.   /**
  327.    * @private
  328.    */
  329.   checkVrStatus_() {
  330.     if ((this.config_.displayInVrMode || this.vrAsset_)) {
  331.       if (!this.canvas_) {
  332.         this.canvas_ = shaka.util.Dom.asHTMLCanvasElement(
  333.             document.createElement('canvas'));
  334.         this.canvas_.classList.add('shaka-vr-canvas-container');
  335.         this.video_.parentElement.insertBefore(
  336.             this.canvas_, this.video_.nextElementSibling);
  337.         this.gl_ = this.getGL_(this.canvas_);
  338.       }
  339.       const newProjectionMode =
  340.           this.vrAsset_ || this.config_.defaultVrProjectionMode;
  341.       if (!this.vrWebgl_) {
  342.         this.canvas_.style.display = '';
  343.         this.init_(newProjectionMode);
  344.         this.dispatchEvent(new shaka.util.FakeEvent(
  345.             'vrstatuschanged',
  346.             (new Map()).set('newStatus', this.isPlayingVR())));
  347.       } else {
  348.         const currentProjectionMode = this.vrWebgl_.getProjectionMode();
  349.         if (currentProjectionMode != newProjectionMode) {
  350.           this.eventManager_.removeAll();
  351.           this.vrWebgl_.release();
  352.           this.init_(newProjectionMode);
  353.           // Re-initialization the status does not change.
  354.         }
  355.       }
  356.     } else if (!this.config_.displayInVrMode && !this.vrAsset_ &&
  357.         this.canvas_ && this.vrWebgl_) {
  358.       this.canvas_.style.display = 'none';
  359.       this.eventManager_.removeAll();
  360.       this.vrWebgl_.release();
  361.       this.vrWebgl_ = null;
  362.       this.dispatchEvent(new shaka.util.FakeEvent(
  363.           'vrstatuschanged',
  364.           (new Map()).set('newStatus', this.isPlayingVR())));
  365.     }
  366.   }
  368.   /**
  369.    * @param {string} projectionMode
  370.    * @private
  371.    */
  372.   init_(projectionMode) {
  373.     if (this.gl_ && this.canvas_) {
  374.       this.vrWebgl_ = new shaka.ui.VRWebgl(
  375.           this.video_, this.player_, this.canvas_, this.gl_, projectionMode);
  376.       this.setupVRListeners_();
  377.     }
  378.   }
  380.   /**
  381.    * @param {?HTMLCanvasElement} canvas
  382.    * @return {?WebGLRenderingContext}
  383.    * @private
  384.    */
  385.   getGL_(canvas) {
  386.     if (!canvas) {
  387.       return null;
  388.     }
  389.     // The user interface is not intended for devices that are controlled with
  390.     // a remote control, and WebGL may run slowly on these devices.
  391.     const device = shaka.device.DeviceFactory.getDevice();
  392.     const deviceType = device.getDeviceType();
  393.     if (deviceType == shaka.device.IDevice.DeviceType.TV ||
  394.         deviceType == shaka.device.IDevice.DeviceType.CONSOLE ||
  395.         deviceType == shaka.device.IDevice.DeviceType.CAST) {
  396.       return null;
  397.     }
  398.     const webglContexts = [
  399.       'webgl2',
  400.       'webgl',
  401.     ];
  402.     for (const webgl of webglContexts) {
  403.       const gl = canvas.getContext(webgl);
  404.       if (gl) {
  405.         return /** @type {!WebGLRenderingContext} */(gl);
  406.       }
  407.     }
  408.     return null;
  409.   }
  411.   /**
  412.    * @private
  413.    */
  414.   setupVRListeners_() {
  415.     // Start
  416.     this.eventManager_.listen(this.container_, 'mousedown', (event) => {
  417.       if (!this.onGesture_) {
  418.         this.gestureStart_(event.clientX, event.clientY);
  419.       }
  420.     });
  421.     if (navigator.maxTouchPoints > 0) {
  422.       this.eventManager_.listen(this.container_, 'touchstart', (e) => {
  423.         if (!this.onGesture_) {
  424.           const event = /** @type {!TouchEvent} */(e);
  425.           this.gestureStart_(
  426.               event.touches[0].clientX, event.touches[0].clientY);
  427.         }
  428.       });
  429.     }
  431.     // Zoom
  432.     this.eventManager_.listen(this.container_, 'wheel', (e) => {
  433.       if (!this.onGesture_) {
  434.         const event = /** @type {!WheelEvent} */(e);
  435.         this.vrWebgl_.zoom(event.deltaY);
  436.         event.preventDefault();
  437.         event.stopPropagation();
  438.       }
  439.     });
  441.     // Move
  442.     this.eventManager_.listen(this.container_, 'mousemove', (event) => {
  443.       if (this.onGesture_) {
  444.         this.gestureMove_(event.clientX, event.clientY);
  445.       }
  446.     });
  447.     if (navigator.maxTouchPoints > 0) {
  448.       this.eventManager_.listen(this.container_, 'touchmove', (e) => {
  449.         if (this.onGesture_) {
  450.           const event = /** @type {!TouchEvent} */(e);
  451.           this.gestureMove_(
  452.               event.touches[0].clientX, event.touches[0].clientY);
  453.         }
  454.         e.preventDefault();
  455.       });
  456.     }
  458.     // End
  459.     this.eventManager_.listen(this.container_, 'mouseleave', () => {
  460.       this.onGesture_ = false;
  461.     });
  462.     this.eventManager_.listen(this.container_, 'mouseup', () => {
  463.       this.onGesture_ = false;
  464.     });
  465.     if (navigator.maxTouchPoints > 0) {
  466.       this.eventManager_.listen(this.container_, 'touchend', () => {
  467.         this.onGesture_ = false;
  468.       });
  469.     }
  471.     // Detect device movement
  472.     let deviceOrientationListener = false;
  473.     if (window.DeviceOrientationEvent) {
  474.       // See: https://dev.to/li/how-to-requestpermission-for-devicemotion-and-deviceorientation-events-in-ios-13-46g2
  475.       if (typeof DeviceMotionEvent.requestPermission == 'function') {
  476.         const userGestureListener = () => {
  477.           DeviceMotionEvent.requestPermission().then((newPermissionState) => {
  478.             if (newPermissionState !== 'granted' ||
  479.                 deviceOrientationListener) {
  480.               return;
  481.             }
  482.             deviceOrientationListener = true;
  483.             this.setupDeviceOrientationListener_();
  484.           });
  485.         };
  486.         DeviceMotionEvent.requestPermission().then((permissionState) => {
  487.           this.eventManager_.unlisten(
  488.               this.container_, 'click', userGestureListener);
  489.           this.eventManager_.unlisten(
  490.               this.container_, 'mouseup', userGestureListener);
  491.           if (navigator.maxTouchPoints > 0) {
  492.             this.eventManager_.unlisten(
  493.                 this.container_, 'touchend', userGestureListener);
  494.           }
  495.           if (permissionState !== 'granted') {
  496.             this.eventManager_.listenOnce(
  497.                 this.container_, 'click', userGestureListener);
  498.             this.eventManager_.listenOnce(
  499.                 this.container_, 'mouseup', userGestureListener);
  500.             if (navigator.maxTouchPoints > 0) {
  501.               this.eventManager_.listenOnce(
  502.                   this.container_, 'touchend', userGestureListener);
  503.             }
  504.             return;
  505.           }
  506.           deviceOrientationListener = true;
  507.           this.setupDeviceOrientationListener_();
  508.         }).catch(() => {
  509.           this.eventManager_.unlisten(
  510.               this.container_, 'click', userGestureListener);
  511.           this.eventManager_.unlisten(
  512.               this.container_, 'mouseup', userGestureListener);
  513.           if (navigator.maxTouchPoints > 0) {
  514.             this.eventManager_.unlisten(
  515.                 this.container_, 'touchend', userGestureListener);
  516.           }
  517.           this.eventManager_.listenOnce(
  518.               this.container_, 'click', userGestureListener);
  519.           this.eventManager_.listenOnce(
  520.               this.container_, 'mouseup', userGestureListener);
  521.           if (navigator.maxTouchPoints > 0) {
  522.             this.eventManager_.listenOnce(
  523.                 this.container_, 'touchend', userGestureListener);
  524.           }
  525.         });
  526.       } else {
  527.         deviceOrientationListener = true;
  528.         this.setupDeviceOrientationListener_();
  529.       }
  530.     }
  531.   }
  533.   /**
  534.    * @private
  535.    */
  536.   setupDeviceOrientationListener_() {
  537.     this.eventManager_.listen(window, 'deviceorientation', (e) => {
  538.       if (!this.vrWebgl_) {
  539.         return;
  540.       }
  541.       const event = /** @type {!DeviceOrientationEvent} */(e);
  542.       let alphaDif = (event.alpha || 0) - this.prevAlpha_;
  543.       let betaDif = (event.beta || 0) - this.prevBeta_;
  544.       let gammaDif = (event.gamma || 0) - this.prevGamma_;
  546.       if (Math.abs(alphaDif) > 10 || Math.abs(betaDif) > 10 ||
  547.           Math.abs(gammaDif) > 5) {
  548.         alphaDif = 0;
  549.         gammaDif = 0;
  550.         betaDif = 0;
  551.       }
  553.       this.prevAlpha_ = event.alpha || 0;
  554.       this.prevBeta_ = event.beta || 0;
  555.       this.prevGamma_ = event.gamma || 0;
  557.       const toRadians = shaka.ui.VRManager.TO_RADIANS_;
  559.       const orientation = screen.orientation.angle;
  560.       if (orientation == 90 || orientation == -90) {
  561.         this.vrWebgl_.rotateViewGlobal(
  562.             alphaDif * toRadians * -1, gammaDif * toRadians * -1, 0);
  563.       } else {
  564.         this.vrWebgl_.rotateViewGlobal(
  565.             alphaDif * toRadians * -1, betaDif * toRadians, 0);
  566.       }
  567.     });
  568.   }
  570.   /**
  571.    * @param {number} x
  572.    * @param {number} y
  573.    * @private
  574.    */
  575.   gestureStart_(x, y) {
  576.     this.onGesture_ = true;
  577.     this.prevX_ = x;
  578.     this.prevY_ = y;
  579.   }
  581.   /**
  582.    * @param {number} x
  583.    * @param {number} y
  584.    * @private
  585.    */
  586.   gestureMove_(x, y) {
  587.     const touchScaleFactor = -0.60 * Math.PI / 180;
  588.     this.vrWebgl_.rotateViewGlobal((x - this.prevX_) * touchScaleFactor,
  589.         (y - this.prevY_) * -1 * touchScaleFactor, 0);
  591.     this.prevX_ = x;
  592.     this.prevY_ = y;
  593.   }
  594. };
  596. /**
  597.  * @const {number}
  598.  * @private
  599.  */
  600. shaka.ui.VRManager.TO_RADIANS_ = Math.PI / 180;