在Mobile Web/HTML5中访问指南针数据 [英] Access compass data in Mobile Web / HTML5

问题描述

我正在制作AR Mobile Web App，我目前的目标是在相机屏幕上显示一些事件.例如，如果从我北边着火，我想将电话指向北边，那儿应该可以看到火图标.

I'm making AR Mobile Web App, and my current goal is to show some events on the camera screen. For example, if there is fire in direction north from me, I want to point phone to north, and fire logo should be visible there.

我的问题是-如何获得指南针的绝对数据?

My problem is - how can I get the absolute compass data?

我已经尝试过以下JavaScript代码:

I've tried this JavaScript code:

function compassHeading(alpha, beta, gamma) {

  var dataContainerMotion = document.getElementById('dataContainerMotion');

  // Convert degrees to radians
  var alphaRad = alpha * (Math.PI / 180);
  var betaRad = beta * (Math.PI / 180);
  var gammaRad = gamma * (Math.PI / 180);

  // Calculate equation components
  var cA = Math.cos(alphaRad);
  var sA = Math.sin(alphaRad);
  var cB = Math.cos(betaRad);
  var sB = Math.sin(betaRad);
  var cG = Math.cos(gammaRad);
  var sG = Math.sin(gammaRad);

  // Calculate A, B, C rotation components
  var rA = - cA * sG - sA * sB * cG;
  var rB = - sA * sG + cA * sB * cG;
  var rC = - cB * cG;

  // Calculate compass heading
  var compassHeading = Math.atan(rA / rB);

  // Convert from half unit circle to whole unit circle
  if(rB < 0) {
    compassHeading += Math.PI;
  }else if(rA < 0) {
    compassHeading += 2 * Math.PI;
  }

  // Convert radians to degrees
  compassHeading *= 180 / Math.PI;

  return compassHeading;

}

window.addEventListener('deviceorientation', function(evt) {

  heading = compassHeading(alpha, beta, gamma);

  dataContainerMotion.innerHTML = heading;

}, false);

但是，绝对变量显示为false，并且我无法获得绝对值.指南针是根据页面初始化时手机的位置进行校准的，而不是根据北方在地球上的实际位置进行的.

But variable absolute shows false, and I can't get absolute value. Compass is calibrated according to the positioning of the phone on initialization of the page - not according to actual position of the North on the Earth.

我将不胜感激-我被困在这里，如果不获取指南针数据，我将走得更远.

I would appreciate any kind of help - I'm stuck here and I can't go further without getting the compass data.

推荐答案

您没有提到测试过的移动设备.您必须考虑一些主要的问题":

You have not mentioned the mobile device you have tested with. There are some major "problems" you have to consider:

• iOS(iPhone，iPad)设备上的Alpha值从您开始的位置= 0 启动/激活设备定向事件.如果手机当前 往东行驶，然后在东边Alpha为0.如果您的手机正前往 W，然后西边的Alpha为0，依此类推.
• 无法访问Android中已实现的硬件指南针 设备(使用Javascript).某些浏览器(版本)可以处理 计算的值alpha，beta和gamma不同，因此您可能有 添加/分散特定角度值.这也提到了 MDN Web文档
• Chrome(50+)支持事件"ondeviceorientationabsolute"，该事件 可能会使您的工作更轻松(至少对于Chrome而言)

• Alpha on iOS (iPhone, iPad) devices has the value = 0 from where you start/activate the deviceorientation event. If the phone is currently heading to East then Alpha is 0 at East. If your phone is heading to W then Alpha is 0 at West, etc.
• There is no way to access the implemented hardware compass in Android devices (by Javascript). Some browsers (versions) handle the calculated values alpha, beta and gamma different, so you might have to add/distract a specific angle value. This is also mentioned in the MDN Web Docs
• Chrome (50+) supports the event "ondeviceorientationabsolute" that might your work easier (at least for Chrome)

iOS设备解决方案:

window.addEventListener('deviceorientation', function(event) {
  if (event.webkitCompassHeading) {
    // You may consider adding/distracting landscape/portrait mode value here
    alpha = event.webkitCompassHeading;
    if (alpha < 0) { alpha += 360; }
    if (alpha > 360) { alpha -= 360; }
  }
}  

Android设备的解决方案:

使用alpha/beta/gamma值(与您一样).周围已经有很多好的解决方案.可以在 TILT指南针中找到最佳"(imho):

Use alpha/beta/gamma values (as you did). There are already many good solutions around. The "best" (imho) can be found here represented by the TILT compass: mentioned here or directly on GitHub

考虑到您的代码(我尚未详细检查)，它无法在iOS设备上正常运行，甚至可能无法在所有Android设备上正常运行.因此，所有人都使用

Considering your code (I haven't checked in detail) is that it won't working properly on iOS devices and probably not even on all Android devices. So all over use a construct like Frosty Z mention in the link posted above.

遗憾的是，没有涵盖所有类型的设备和浏览器的100％可靠代码.我仍然希望这里写的东西会有所帮助.

Sadly there is no 100% reliable code around covering all types of devices and browsers. I still hope something written here might help.

这篇关于在Mobile Web/HTML5中访问指南针数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！