如何从 Javascript 访问加速度计/陀螺仪数据？

Question

我最近发现一些网站似乎可以访问我笔记本电脑上的加速计或陀螺仪，检测方向或运动的变化。

这是怎么做到的？我必须订阅 window 对象上的某种事件吗？

已知该功能可以在哪些设备（笔记本电脑、手机、平板电脑）上运行？

---

^{注意：我实际上已经知道这个问题的（部分）答案，我将立即发布。我在这里发布问题的原因是让其他人知道加速度计数据可以在 Javascript 中（在某些设备上）使用，并挑战社区发布有关该主题的新发现。目前，似乎几乎没有这些功能的文档。}

Answer 1

当前存在三个不同的事件，当客户端设备移动时可能会或可能不会触发这些事件。其中两个关注方向，最后一个关注运动：

• ondeviceorientation 已知适用于桌面版 Chrome，并且大多数苹果笔记本电脑似乎都具备此功能所需的硬件。它还适用于装有 iOS 4.2 的 iPhone 4 上的 Mobile Safari。在事件处理函数中，您可以访问作为函数唯一参数提供的事件数据的 alpha、beta、gamma 值。< /p>

• onmozorientation 在 Firefox 3.6 及更高版本上受支持。同样，众所周知，这适用于大多数 Apple 笔记本电脑，但也可能适用于带有加速计的 Windows 或 Linux 计算机。在事件处理函数中，查找作为第一个参数提供的事件数据上的 x、y、z 字段。

• ondevicemotion 已知可在 iPhone 3GS + 4 和 iPad（均运行 iOS 4.2）上运行，并提供与客户端设备当前加速相关的数据。传递给处理函数的事件数据有加速度和加速度，每个轴都有三个字段：x、y /code>, z

“地震检测”示例网站使用一系列 if 语句来确定要附加到哪个事件（按一定的优先顺序）并传递接收到通用tilt函数的数据：

if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function () {
        tilt([event.beta, event.gamma]);
    }, true);
} else if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', function () {
        tilt([event.acceleration.x * 2, event.acceleration.y * 2]);
    }, true);
} else {
    window.addEventListener("MozOrientation", function () {
        tilt([orientation.x * 50, orientation.y * 50]);
    }, true);
}

常数因子2和50用于将后两个事件的读数与第一个事件的读数“对齐”，但这些绝不是< /em> 精确的表述。对于这个简单的“玩具”项目，它工作得很好，但如果您需要将数据用于稍微更严重的事情，您将必须熟悉不同事件中提供的值的单位并尊重它们:)

Answer 2

无法对另一篇文章中的精彩解释添加评论，但想提一下，可以找到很棒的文档源 此处。

像这样为加速度计注册一个事件函数就足够了：

if(window.DeviceMotionEvent){
  window.addEventListener("devicemotion", motion, false);
}else{
  console.log("DeviceMotionEvent is not supported");
}

使用处理程序：

function motion(event){
  console.log("Accelerometer: "
    + event.accelerationIncludingGravity.x + ", "
    + event.accelerationIncludingGravity.y + ", "
    + event.accelerationIncludingGravity.z
  );
}

对于磁力计，必须注册以下事件处理程序：

if(window.DeviceOrientationEvent){
  window.addEventListener("deviceorientation", orientation, false);
}else{
  console.log("DeviceOrientationEvent is not supported");
}

使用处理程序：

function orientation(event){
  console.log("Magnetometer: "
    + event.alpha + ", "
    + event.beta + ", "
    + event.gamma
  );
}

在陀螺仪的运动事件中也指定了字段，但这似乎不是得到普遍支持（例如，它不适用于三星 Galaxy Note）。

GitHub 上有一个简单的工作代码

Answer 3

在 2019 年以上执行此操作的方法是使用 DeviceOrientation API。这适用于桌面和移动设备上的大多数现代浏览器。

window.addEventListener("deviceorientation",handleOrientation,true);

注册事件侦听器后（在本例中为 JavaScript
函数称为handleOrientation())，您的侦听器函数
定期调用更新的方向数据。

方向事件包含四个值：

• DeviceOrientationEvent.absolute
• DeviceOrientationEvent.alpha
• DeviceOrientationEvent.beta
• DeviceOrientationEvent.gamma

事件处理函数看起来像这样：

函数handleOrientation(event) {
  var 绝对 = event.absolute;
  var alpha = event.alpha;
  var beta = event.beta;
  var gamma = event.gamma;
  // 使用新的方向数据进行处理
}

Answer 4

这里有用的后备：https://developer.mozilla.org/en-US /docs/Web/Events/MozOrientation

function orientationhandler(evt){


  // For FF3.6+
  if (!evt.gamma && !evt.beta) {
    evt.gamma = -(evt.x * (180 / Math.PI));
    evt.beta = -(evt.y * (180 / Math.PI));
  }

  // use evt.gamma, evt.beta, and evt.alpha 
  // according to dev.w3.org/geo/api/spec-source-orientation


}

window.addEventListener('deviceorientation',  orientationhandler, false);
window.addEventListener('MozOrientation',     orientationhandler, false);