Comment accéder aux données accéléromètre / gyroscope de Javascript?

Question

Je suis venu récemment à travers quelques sites Web qui semble accéder à l'accéléromètre ou un gyroscope sur mon ordinateur portable, la détection des changements d'orientation ou d'un mouvement.

Comment cela se fait? Dois-je souscrire à une sorte d'événement sur l'objet window?

Sur quels appareils (ordinateurs portables, téléphones mobiles, tablettes) est-ce connu au travail?

---

^{NB : je connais déjà (en partie) la réponse à cette question, et je vais poster tout de suite. La raison pour laquelle je posterai la question ici, est de laisser tout le monde sait que les autres données de l'accéléromètre disponible en Javascript (sur certains appareils) et de contester la communauté de publier de nouveaux résultats sur le sujet. À l'heure actuelle, il semble y avoir presque aucune documentation de ces caractéristiques.}

Answer 1

Il existe actuellement trois événements distincts qui peuvent ou peuvent ne pas être déclenché lorsque les dispositifs de client se déplace. Deux d'entre eux se concentrent autour de orientation et le dernier sur mouvement :

• ondeviceorientation est connu pour travailler sur la version de bureau de Chrome, et la plupart des ordinateurs portables d'Apple semble avoir le matériel nécessaire pour que cela fonctionne. Il travaille également sur Safari Mobile sur l'iPhone 4 avec iOS 4.2. Dans la fonction de gestionnaire d'événements, vous pouvez accéder à alpha, beta, les valeurs de gamma sur les données relatives aux événements fournis comme le seul argument de la fonction.

• onmozorientation est pris en charge sur Firefox 3.6 et plus récent. Encore une fois, ceci est connu pour travailler sur la plupart des ordinateurs portables d'Apple, mais pourrait fonctionner sur des machines Windows ou Linux avec accéléromètre ainsi. Dans la fonction de gestionnaire d'événements, recherchez x, y, champs z sur les données d'événement fournies comme premier argument.

• ondevicemotion est connu pour fonctionner sur 3GS + 4 et iPad (à la fois avec iOS 4.2), et fournit des données relatives à l'accélération actuelle du dispositif client. Les données d'événement transmis à la fonction de gestionnaire a acceleration et accelerationIncludingGravity, qui ont toutes deux trois champs pour chaque axe: x, y, z

Le « tremblement de terre détection » site exemple utilise une série de déclarations de if à savoir quel événement pour attacher à (dans un ordre quelque peu prioritaire) et transmet les données reçues à une fonction tilt commune:

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);
}

Les facteurs constants 2 et 50 sont utilisés pour « aligner » les lectures des deux événements ces derniers avec ceux de la première, mais ceux-ci sont par aucun moyen représentations précises. Pour ce simple « jouet » projeter cela fonctionne très bien, mais si vous avez besoin d'utiliser les données pour quelque chose un peu plus sérieux, vous devrez vous familiariser avec les unités des valeurs fournies dans les différents événements et les traiter avec respect :)

Answer 2

Impossible d'ajouter un commentaire à l'excellente explication dans l'autre poste, mais a voulu mentionner qu'une grande source de documentation peut être trouvée ici .

Il suffit d'enregistrer une fonction d'événement pour accéléromètre comme ceci:

if(window.DeviceMotionEvent){
  window.addEventListener("devicemotion", motion, false);
}else{
  console.log("DeviceMotionEvent is not supported");
}

avec le gestionnaire:

function motion(event){
  console.log("Accelerometer: "
    + event.accelerationIncludingGravity.x + ", "
    + event.accelerationIncludingGravity.y + ", "
    + event.accelerationIncludingGravity.z
  );
}

Et pour magnétomètre un gestionnaire d'événement suivant doit être enregistré:

if(window.DeviceOrientationEvent){
  window.addEventListener("deviceorientation", orientation, false);
}else{
  console.log("DeviceOrientationEvent is not supported");
}

avec un gestionnaire:

function orientation(event){
  console.log("Magnetometer: "
    + event.alpha + ", "
    + event.beta + ", "
    + event.gamma
  );
}

Il y a des champs également spécifié en cas de mouvement pour un gyroscope mais cela ne semble pas être universellement pris en charge (par exemple, il ne fonctionne pas sur un Samsung Galaxy Note).

Il y a un simple code de travail sur GitHub

Answer 3

La façon de le faire en 2019+ est d'utiliser DeviceOrientation API . Cela fonctionne dans la plupart des navigateurs modernes sur le bureau et mobile .

window.addEventListener("deviceorientation", handleOrientation, true);

     

Après avoir enregistré votre écouteur d'événement (dans ce cas, un JavaScript   fonction appelée handleOrientation ()), la fonction d'écouteur   périodiquement est appelée avec les données d'orientation mises à jour.

     

L'événement d'orientation contient quatre valeurs:

     

  
• DeviceOrientationEvent.absolute
  
• DeviceOrientationEvent.alpha
  
• DeviceOrientationEvent.beta
  
• DeviceOrientationEvent.gamma
  

     

La fonction de gestionnaire d'événements peut ressembler à ceci:

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
}

Answer 4

UTILE fallback ici: https://developer.mozilla.org/ en-US / docs / Web / événements / 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);