Как получить доступ к данным акселерометра/гироскопа из JavaScript?
-
09-10-2019 - |
Вопрос
Недавно я наткнулся на несколько веб -сайтов, которые, кажется, получают доступ к акселерометру или гироскопу на моем ноутбуке, обнаруживая изменения в ориентации или движении.
Как это делается? Должен ли я подписаться на какое -то событие на window
объект?
На каких устройствах (ноутбуки, мобильные телефоны, планшеты) это работает?
Нб: Я на самом деле уже знаю (часть) ответа на этот вопрос, и я собираюсь опубликовать его сразу. Причина, по которой я публикую вопрос здесь, заключается в том, чтобы все остальные знали, что данные акселерометра является Доступно в JavaScript (на определенных устройствах) и бросить вызов сообществу опубликовать новые выводы по этому вопросу. В настоящее время, похоже, почти нет документации этих функций.
Решение
В настоящее время существует три различных события, которые могут или не могут быть запускаются при перемещении клиентских устройств. Двое из них сосредоточены вокруг ориентация И последний на движение:
ondeviceorientation
Известно, что работает над настольной версией Chrome, и большинство ноутбуков Apple, похоже, имеют оборудование, необходимое для работы. Он также работает на мобильном сафари на 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 используются для «выравнивания» показаний из двух последних событий с показателями первого, но это ни в коем случае точные представления. Для этого простого проекта «игрушки» он работает очень хорошо, но если вам нужно использовать данные для чего -то немного более серьезного, вам придется ознакомиться с единицами значений, представленных в различных событиях, и относиться к ним с уважением :)
Другие советы
Не могу добавить комментарий к превосходному объяснению в другом посте, но хотел упомянуть, что можно найти отличный источник документации здесь.
Достаточно зарегистрировать функцию события для акселерометра, как SO:
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).
Есть простой рабочий код на GitHub
Способ сделать это в 2019+ - это использовать DeviceOrientation
API. Анкет Это работает в Большинство современных браузеров на рабочем столе и мобильном телефоне.
window.addEventListener("deviceorientation", handleOrientation, true);
После регистрации вашего прослушивателя событий (в данном случае функция JavaScript с именем Granderientation ()), ваша функция слушателя периодически вызывается с обновленными данными ориентации.
Событие ориентации содержит четыре значения:
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 }
Полезное запасение здесь: https://developer.mozilla.org/en-us/docs/web/events/mozonientation
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);