如何从Javascript访问加速度计/陀螺仪数据?
我最近遇到了几个网站,似乎访问我的笔记本电脑上的加速度计或陀螺仪,检测方向或运动的变化。
这是怎么做的? 我必须订阅window
对象上的某种事件吗?
已知哪些设备(便携式电脑,手机,平板电脑)可以正常工作?
注 :我其实已经知道(部分)这个问题的答案,我会马上发布。 我在这里发布这个问题的原因是为了让其他人知道加速度计数据在Javascript中(某些设备上) 是可用的,并且要求社区发布关于这个主题的新发现。 目前,似乎几乎没有这些function的文件。
目前有三种不同的事件,当客户端设备移动时可能会或可能不会被触发。 其中两个是围绕方向和最后一个议案 :
-
ondeviceorientation
是已知的工作在桌面版的Chrome,大多数苹果笔记本电脑似乎有这个工作所需的硬件。 它也适用于iOS 4.2的iPhone 4上的Mobile Safari。 在事件处理函数中,您可以访问作为函数唯一参数提供的事件数据的alpha
,beta
,gamma
值。 -
Firefox 3.6及更新版本支持
onmozorientation
。 再次,这已知可在大多数苹果笔记本电脑上工作,但也可以在带有加速度计的Windows或Linux机器上工作。 在事件处理函数中,查找作为第一个参数提供的事件数据的x
,y
,z
字段。 -
已知
ondevicemotion
可在iPhone 3GS + 4和iPad(均为iOS 4.2)上运行,并提供与当前客户端设备加速有关的数据。 传递给处理程序函数的事件数据具有acceleration
和accelerationIncludingGravity
包括accelerationIncludingGravity
,它们对每个轴都有三个字段:x
,y
,z
“地震检测”样本网站使用一系列if
语句来确定要附加哪个事件(按某种优先顺序排列),并将收到的数据传递给一个共同的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); }
常数因子2和50用于将后两个事件的读数与第一个事件的读数“alignment”,但这些决不是精确的表示。 对于这个简单的“玩具”项目来说,它工作得很好,但是如果你需要使用数据来处理稍微严重的事情,你将不得不熟悉不同事件中提供的值的单位,并尊重他们。
不能添加评论到另一篇文章的优秀的解释,但要提到一个伟大的文档来源可以在这里find。
为加速度计注册一个事件函数就足够了,如下所示:
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);