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


139

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

怎么做?我必须在该window对象上订阅某种事件吗?

可以在哪些设备(笔记本电脑,手机,平板电脑)上工作?


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


非常努力,非常感谢。您认为3年后答案需要任何更新吗?
Bartek Banachewicz 2014年

@BartekBanachewicz感谢您致电我。我将答案转移到“社区Wiki”,希望有人拥有最新知识,将对其进行更新以反映当前的技术水平。
约恩·舒德罗德(JørnSchou-Rode)2014年

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

Answers:


8

在2019年以上实现此目的的方法是使用DeviceOrientationAPI。这适用于台式机和移动设备上的大多数现代浏览器

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
}

179

当前存在三个不同的事件,它们在客户端设备移动时可能会触发,也可能不会触发。其中两个专注于方向,最后一个专注于运动

  • 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一起使用)上运行,并提供与客户端设备当前加速相关的数据。传递给处理功能具有事件数据accelerationaccelerationIncludingGravity,这两者都具有三个字段用于每个轴:xyz

“地震检测”示例网站使用一系列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用于将后面两个事件的读数与第一个事件的读数“对齐”,但这绝不是精确的表示。对于这个简单的“玩具”项目来说,它可以很好地工作,但是如果您需要将数据用于更严重的事情,则必须熟悉不同事件中提供的值的单位,并应予以尊重:)


9
有时答案只是钉住它!
Scott Evernden 2011年

1
万一有人怀疑-ondevicemotion适用于Firefox 8.0,但缩放比例错误(0-9),但似乎在更高版本(10.0)中已解决。它们都不能在Opera Mobile上运行,所有标准的都可以在默认的诺基亚N9浏览器上正常运行。
Nux

2
MozOrientation事件在Firefox 6中已被删除,因此现在已全部使用标准化API。
克里斯·摩根

该小提琴所示,似乎在Firefox 30中不起作用。:(
bwinton 2014年

旁注:Plax.js,这是在GitHub的404个500页上使用,使用ondeviceorientation
Yosh 2014年

21

不能在其他帖子的出色解释中添加评论,但要提及的是,这里可以找到很好的文档来源。

像这样注册一个用于加速度计的事件功能就足够了:

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

在陀螺仪的运动事件中还指定了一些字段,但似乎并未得到普遍支持(例如,它在Samsung Galaxy Note上不起作用)。

GitHub上有一个简单的工作代码


1

此处有用的备用:https : //developer.mozilla.org/zh-CN/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);
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.