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

Posted 2023-02-19

【中文标题】如何从 Javascript 访问加速度计/陀螺仪数据？

【英文标题】：How to access accelerometer/gyroscope data from Javascript?

【发布时间】：2011-05-21 16:13:46

【问题描述】：

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

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

已知可以在哪些设备（笔记本电脑、手机、平板电脑）上工作？

---

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

【问题讨论】：

辛苦了，非常感谢。您认为 3 年后答案需要更新吗？

@BartekBanachewicz 感谢您给我打电话。我会将答案转移到“社区维基”，希望有更多最新知识的人会更新它以反映当前的艺术状态。

我找不到此操作是否需要用户同意。我不想提出新问题，因为它完全符合您的问题。也许我们可以在这里添加这个？有谁知道这是否需要明确同意？所有浏览器和所有移动操作系统都是这种情况吗？

【参考方案1】：

当前存在三种不同的事件，当客户端设备移动时可能会触发也可能不会触发。其中两个专注于orientation，最后一个专注于motion：

ondeviceorientation 可以在桌面版 Chrome 上运行，而且大多数 Apple 笔记本电脑似乎都具备运行此功能所需的硬件。它也适用于装有 ios 4.2 的 iPhone 4 上的 Mobile Safari。在事件处理函数中，您可以访问作为函数唯一参数提供的事件数据上的alpha、beta、gamma 值。

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

ondevicemotion 已知可在 iPhone 3GS + 4 和 iPad（均使用 iOS 4.2）上工作，并提供与客户端设备当前加速相关的数据。传递给处理函数的事件数据有acceleration和accelerationIncludingGravity，每个轴都有三个字段：x、y、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 用于将后两个事件的读数与第一个事件的读数“对齐”，但这些绝不是精确的表示。对于这个简单的“玩具”项目，它工作得很好，但是如果您需要将数据用于更严重的事情，您将必须熟悉不同事件中提供的值的单位并尊重它们:)

【讨论】：

有时一个答案就可以了！

如果有人想知道 - ondevicemotion 适用于 Firefox 8.0 但缩放错误 (0-9)，但这似乎在更高版本 (10.0) 中得到修复。它们都不能在 Opera Mobile 上运行，所有标准的都可以在默认的诺基亚 N9 浏览器上正常运行。

MozOrientation 事件在 Firefox 6 中已被删除。所以现在他们都在使用标准化的 API。

这似乎在 Firefox 30 中不起作用，如this fiddle 所示。 :(

旁注：Plax.js，用于github的404和500页面，uses ondeviceorientation。

【参考方案2】：

无法对另一篇文章中的出色解释添加评论，但想提一下，可以在 here 找到一个很好的文档来源。

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

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上有一个简单的工作代码

【讨论】：

如果传感器在 iOS

【参考方案3】：

在 2019 年+ 中执行此操作的方法是使用 DeviceOrientation API。这适用于桌面和移动设备上的most modern browsers。

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

注册您的事件监听器后（在这种情况下，一个 JavaScript 名为 handleOrientation()) 的函数，您的侦听器函数 定期调用更新的方向数据。

方向事件包含四个值：

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

事件处理函数可能如下所示：

function handleOrientation(event) 
  var absolute = event.absolute;
  var alpha    = event.alpha;
  var beta     = event.beta;
  var gamma    = event.gamma;
  // Do stuff with the new orientation data

【参考方案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);