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

Question

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

这是怎么做的？我必须在 window 目的？

在哪些设备（笔记本电脑，手机，平板电脑）上可以使用？

---

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

Answer 1

There are currently three distinct events which may or may not be triggered when the client devices moves. Two of them are focused around orientation and the last on motion:

• ondeviceorientation is known to work on the desktop version of Chrome, and most Apple laptops seems to have the hardware required for this to work. It also works on Mobile Safari on the iPhone 4 with iOS 4.2. In the event handler function, you can access alpha, beta, gamma values on the event data supplied as the only argument to the function.

• onmozorientation is supported on Firefox 3.6 and newer. Again, this is known to work on most Apple laptops, but might work on Windows or Linux machines with accelerometer as well. In the event handler function, look for x, y, z fields on the event data supplied as first argument.

• ondevicemotion is known to work on iPhone 3GS + 4 and iPad (both with iOS 4.2), and provides data related to the current acceleration of the client device. The event data passed to the handler function has acceleration and accelerationIncludingGravity, which both have three fields for each axis: x, y, z

The "earthquake detecting" sample website uses a series of if statements to figure out which event to attach to (in a somewhat prioritized order) and passes the data received to a common tilt function:

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

The constant factors 2 and 50 are used to "align" the readings from the two latter events with those from the first, but these are by no means precise representations. For this simple "toy" project it works just fine, but if you need to use the data for something slightly more serious, you will have to get familiar with the units of the values provided in the different events and treat them with respect :)

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

运动事件中还指定了陀螺仪的字段，但似乎并未得到普遍支持（例如，它在三星星系上不起作用）。

有一个简单的工作代码 github

Answer 3

在2019年以上的方法是使用 DeviceOrientation API. 。这起作用 大多数现代浏览器 在桌面和手机上。

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

注册事件侦听器（在这种情况下，称为handletorientation（））后，您的侦听器函数会定期使用更新的方向数据调用。

方向事件包含四个值：

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