手機陀螺儀的註冊監聽事件

原創

liangxhblog

2020-02-21 03:58

最近在公司做了一個VR視頻的遙控器，目的在於利用手機充當遙控器角色，控制電視端VR視頻的播放，我主要開發體感功能，也就是調用手機陀螺儀的數據，以下爲具體操作：

在畫面中增加一個體感功能的開關，綁定點擊事件
進入網頁後，體感功能自動爲開啓狀態。

當體感功能狀態變化時，如果從開啓狀態變爲關閉，則移除其註冊監聽事件；如果從關閉變爲開啓狀態，則先進行手機內是否有陀螺儀傳感器的判斷，如果沒有，則提示“該設備不支持體感功能”，如果有，則對陀螺儀添加一個註冊監聽事件。具體代碼如下所示

sensorControl:function(){
      if (this.senorswitch) {
        if(window.DeviceOrientationEvent){
          window.addEventListener("deviceorientation", this.handleOrientation, true);
          this.isSensorExist = false;
        }else{
          this.isSensorExist = true;
        }
      }else {
        window.removeEventListener("deviceorientation", this.handleOrientation, true);
      }
    },

由於陀螺儀非常敏感，且發送頻率高，所以在handleOrientation事件中，先進行時間間隔的判斷，先將當前時刻賦值給一個變量，然後將其和上一次發送請求地時刻相比，如果小於125毫秒（這裏是根據電視端需求定的，可根據需求自行修改），則結束這次運行，直至大於或者等於125毫秒，纔開始繼續進行後續操作。具體代碼如下：

handleOrientation:function(orientData){
      var requesttime = new Date().getTime();
      if(requesttime - this.lasttime < 125){
        return;
      }
      this.lasttime = requesttime;
      var alpha = orientData.alpha;
      var beta = orientData.beta;
      var gamma = orientData.gamma;
      var minusbeta = beta - this.lastbeta;
      var minusgamma = gamma - this.lastgamma;
      var params = {
        "data":{
          "event":{
            "accuracy":10,
            "values":[gamma,beta,alpha]
          }

        }

      };