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

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

这是如何做到的? 我必须订阅某种类型的事件对 window对象？

在哪些设备上(笔记本电脑、手机、平板电脑)可以使用？

注意: 事实上我已经知道了这个问题的部分答案，我现在就把它发布出去。我之所以在这里提出这个问题，是为了让其他人知道加速计数据 是可以在 Javascript (在某些设备上)中使用，并且向社区发出挑战，让他们在这个主题上发布新的发现。目前，似乎还没有关于这些特性的文档。

120709 次浏览
小开

目前有三个不同的事件，当客户端设备移动时可能会触发，也可能不会触发。其中两个集中在 定位，最后一个集中在 动议:

  • 众所周知，ondeviceorientation可以在台式机版本的 Chrome 上运行，而且大多数苹果笔记本电脑似乎都具备这样运行所需的硬件。它也可以在 iPhone 4和 iOS 4.2的 Mobile Safari 上运行。在事件处理函数中，可以访问作为函数唯一参数提供的事件数据上的 alpha、 beta、 gamma值。

  • Firefox 3.6及更新版本支持 onmozorientation 。同样，这种方法可以在大多数苹果笔记本电脑上使用，但也可以在带有加速计的 Windows 或 Linux 机器上使用。在事件处理函数中，在作为第一个参数提供的事件数据上查找 x、 y、 z字段。

  • 众所周知，ondevicemotion可以在 iPhone 3GS + 4和 iPad 上运行(两者都支持 iOS 4.2) ，并提供与客户端设备当前加速度相关的数据。传递给 Handlder 函数的事件数据有 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被用来“校准”后两个事件的读数与第一个事件的读数，但这些是 绝对不行的精确表示。对于这个简单的“玩具”项目来说，它工作得很好，但是如果你需要把数据用于稍微严肃一点的事情，你就必须熟悉不同事件中提供的值的单位，并尊重它们:)

小开

不能在另一篇文章的精彩解释中添加评论，但是想提一下，可以找到一个很好的文档资源 给你。

只要为加速度计注册一个事件函数就足够了，比如:

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

小开

有用的备份: 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);
小开
最佳答案

在2019 + 中使用 DeviceOrientationAPI就可以做到这一点，它可以在台式机和移动设备上使用 大多数现代浏览器。

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

在注册事件侦听器之后(在本例中，是一个 JavaScript 函数 handleOrient () ，这是您的侦听器函数 定期调用更新的方向数据。

概况介绍活动包含四个价值观:

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

提交答案