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

javascript accelerometer gyroscope

2022-08-30 03:05:53

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

这是如何完成的？我必须订阅对象上的某种事件吗？window

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

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

答案 1

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

ondeviceorientation已知可以在桌面版本的Chrome上运行，并且大多数Apple笔记本电脑似乎都具有使其工作所需的硬件。它也适用于iOS 4.2的iPhone 4上的Mobile Safari。在事件处理程序函数中，您可以访问作为函数的唯一参数提供的事件数据上的、的值。alphabetagamma
Onmozorientation 在 Firefox 3.6 及更高版本上受支持。同样，众所周知，这适用于大多数Apple笔记本电脑，但也可以在带有加速度计的Windows或Linux计算机上工作。在事件处理程序函数中，查找作为第一个参数提供的事件数据上的、、字段。xyz
ondevicemotion已知可以在iPhone 3GS + 4和iPad（均与iOS 4.2配合使用）上工作，并提供与客户端设备的当前加速相关的数据。传递给处理程序函数的事件数据具有和，它们每个轴都有三个字段：、、accelerationaccelerationIncludingGravityxyz

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

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用于将后两个事件的读数与第一个事件的读数“对齐”，但这些绝不是精确的表示。对于这个简单的“玩具”项目，它工作得很好，但是如果您需要将数据用于稍微更严重的事情，则必须熟悉不同事件中提供的值的单位，并尊重:)

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