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

Question

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

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

已知这些设备(笔记本电脑,手机,平板电脑)有效吗？

---

^{注意:我实际上已经知道(部分)这个问题的答案,我将立即发布.我在这里张贴问题的原因,是为了让每个人都知道,加速度计数据是在Javascript中可用的(在某些设备上),并挑战社会关于这个问题发表新的研究结果.目前,似乎几乎没有这些功能的文档.}

Answer 1

当客户端设备移动时,当前可能会或可能不会触发三个不同的事件.其中两个专注于定位,最后一个专注于动作:

• ondeviceorientation众所周知,Chrome可以在桌面版Chrome上运行,而且大多数Apple笔记本电脑似乎都拥有所需的硬件.它也适用于iOS 4的iPhone 4上的Mobile Safari.在事件处理函数,您可以访问alpha,beta,gamma作为唯一的参数传递给函数提供的事件数据值.

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

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+ 中做到这一点的方法是使用DeviceOrientationAPI。这适用于桌面和移动设备上的大多数现代浏览器。

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

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

方向事件包含四个值：

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