Як отримати доступ до даних акселерометра / гіроскопа з Javascript?


139

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

Як це робиться? Повинен я передплатити якусь подію на windowоб’єкті?

На яких пристроях (ноутбуках, мобільних телефонах, планшетах) це, як відомо, працює?


NB : Насправді я вже знаю (частину) відповідь на це питання, і збираюся опублікувати її відразу. Причина , по якій я відправляю питання тут, щоб всі інші знають , що дані акселерометра є доступні в Javascript (на деяких пристроях) і кинути виклик спільноти розміщувати нові дані з цього питання. В даний час, здається, майже немає документації про ці функції.


Великі зусилля, велике спасибі Ви вважаєте, що через 3 роки відповідь потребує будь-яких оновлень?
Bartek Banachewicz

@BartekBanachewicz Дякуємо, що зателефонували мені на це. Я перенесу відповідь на "Вікі спільноти", сподіваючись, що хтось із більш сучасними знаннями оновить її, щоб відобразити сучасний стан мистецтва.
Jørn Schou-Rode

Не вдалося знайти, чи потрібна ця операція згоди користувача. Я не хотів задавати нове запитання, оскільки він ідеально відповідає вашому запитанню. Може, ми можемо сюди додати це? Хтось знає, чи потрібна це чітка згода? Це так у всіх браузерах та всіх мобільних ОС?
Срібло

Відповіді:


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 є обладнання, необхідне для цього. Він також працює на мобільному 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 використовуються для "узгодження" показань з двох останніх подій з тими, що виходять з першого, але це далеко не точні уявлення. Для цього простого "іграшкового" проекту він працює просто чудово, але якщо вам потрібно використовувати дані для чогось трохи більш серйозного, вам доведеться ознайомитись з одиницями значень, наведених у різних подіях, і ставитися до них з повагою :)


9
іноді відповідь це просто прибиває!
Скотт Еверден

1
Якщо хтось замислюється - ondevicemotion працює для Firefox 8.0, але масштабується неправильно (0-9), але це, здається, виправлено в пізніших версіях (10.0). Жоден з них не працює в Opera Mobile, а всі стандартні працюють добре в браузері Nokia N9 за замовчуванням.
Nux

2
Подія MozOrientation було видалено як застаріле в Firefox 6. Отже, тепер усі вони використовують стандартизований API.
Кріс Морган

Схоже, це не працює у Firefox 30, як показано у цій скрипці . :(
bwinton

sidenote: Plax.js , який використовується на 404 та 500 сторінках github, використовує оновіорієнтацію .
Йош

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/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);
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.