Как получить доступ к данным акселерометра / гироскопа из Javascript?

Question

Как получить доступ к данным акселерометра / гироскопа из Javascript?

Я недавно наткнулся на несколько веб-сайтов, которые, кажется, получают доступ к акселерометру или гироскопу на моем ноутбуке, обнаруживая изменения в ориентации или движении.

Как это делается? Должен ли я подписаться на какое-то событие в объекте window?

На каких устройствах (ноутбуках, мобильных телефонах, планшетах) это, как известно, работает?

^{NB : на самом деле я уже знаю (часть) ответа на этот вопрос, и я собираюсь опубликовать его прямо сейчас. Причина, по которой я существую размещение вопроса здесь, чтобы все остальные знали, что данные акселерометра доступны в Javascript (на некоторых устройствах) и бросить вызов сообществу, чтобы опубликовать новые результаты по этому вопросу. В настоящее время, по-видимому, почти нет документации об этих функциях.}

834 3

javascript accelerometer gyroscope

3 ответов:

Comments

Ничего не найдено.

Jørn Schou-Rode · Accepted Answer · 2010-12-07 17:46:46

В настоящее время существует три различных события, которые могут быть вызваны или не вызваны при перемещении клиентских устройств. Два из них сосредоточены вокруг ориентации и последний на движении:

ondeviceorientation Известно, что он работает на настольной версии Chrome, и большинство ноутбуков Apple, похоже, имеют аппаратное обеспечение, необходимое для этой работы. Он также работает на мобильном Safari на iPhone 4 с iOS 4.2. В функции обработчика событий можно получить доступ alpha, beta, gamma значения в данных события, предоставляемых в качестве единственного аргумента функции.

onmozorientation поддерживается в Firefox 3.6 и новее. Опять же, это, как известно, работает на большинстве ноутбуков Apple, но может работать и на компьютерах с Windows или Linux с акселерометром. В функции обработчика событий найдите x, y, z поля в данных события, представленных в качестве первого аргумента.

ondevicemotion как известно, работает на iPhone 3GS + 4 и iPad (оба с iOS 4.2), а также обеспечивает данные, относящиеся к текущему ускорению клиентского устройства. Данные события, передаваемые в функцию обработчика, имеют 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 используются для "выровняйте" показания двух последних событий с показаниями первого, но они никоим образом не являются точными представлениями. Для этого простого "игрушечного" проекта он работает просто отлично, но если вам нужно использовать данные для чего-то чуть более серьезного, вам придется ознакомиться с единицами значений, предоставленными в различных событиях, и относиться к ним с уважением:)

Infinite Internship · Accepted Answer · 2018-07-14 18:48:13

Не могу добавить комментарий к превосходному объяснению в другом посте, но хотел бы упомянуть, что отличный источник документации можно найти здесь.

Достаточно зарегистрировать функцию события для акселерометра так:
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

Luckylooke · Accepted Answer · 2016-03-02 13:46:48

Полезный запасной вариант здесь: 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);