Question

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

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

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

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

Answer 1

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

ondeviceorientation可以在桌面版Chrome上运行，而且大多数Apple笔记本电脑似乎都具备此功能所需的硬件。它也适用于iOS 4的iPhone 4上的Mobile Safari。在事件处理函数中，您可以访问作为函数唯一参数提供的事件数据上的alpha，beta，gamma值。
onmozorientation。同样，这在大多数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用于将来自后两个事件的读数与来自第一个事件的读数“对齐”，但这些绝不是精确表示。对于这个简单的“玩具”项目，它工作得很好，但如果你需要将数据用于稍微更严重的事情，你将不得不熟悉不同事件中提供的值的单位并尊重他们:)

Answer 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

上有一个简单的工作代码

Answer 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
}

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);

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

4 个答案: