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

Je suis récemment tombé sur quelques sites Web qui semblent accéder à l'accéléromètre ou au gyroscope de mon ordinateur portable, détectant des changements d'orientation ou de mouvement.

Comment cela se fait-il? Dois-je m'abonner à une sorte d'événement sur l' windowobjet?

Sur quels appareils (ordinateurs portables, téléphones portables, tablettes) cela fonctionne-t-il?

^{NB : Je connais déjà (en partie) la réponse à cette question, et je vais la poster tout de suite. La raison pour laquelle je poste la question ici, est de faire savoir à tout le monde que les données de l'accéléromètre sont disponibles en Javascript (sur certains appareils) et de mettre au défi la communauté de publier de nouvelles découvertes sur le sujet. Actuellement, il ne semble y avoir pratiquement aucune documentation sur ces fonctionnalités.}

La façon de faire cela en 2019+ est d'utiliser l' DeviceOrientationAPI . Cela fonctionne dans la plupart des navigateurs modernes sur ordinateur et mobile.

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

Après avoir enregistré votre écouteur d'événements (dans ce cas, une fonction JavaScript appelée handleOrientation ()), votre fonction d'écoute est régulièrement appelée avec des 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
}

Il existe actuellement trois événements distincts qui peuvent ou non être déclenchés lorsque les périphériques clients se déplacent. Deux d'entre eux sont axés sur l' orientation et le dernier sur le mouvement :

• ondeviceorientationest connu pour fonctionner sur la version de bureau de Chrome, et la plupart des ordinateurs portables Apple semblent avoir le matériel nécessaire pour que cela fonctionne. Il fonctionne également sur Mobile Safari sur l'iPhone 4 avec iOS 4.2. Dans la fonction de gestionnaire d'événements, vous pouvez accéder alpha, beta, les gammavaleurs sur les données d'événement fournies comme le seul argument de la fonction.

• onmozorientationest pris en charge sur Firefox 3.6 et plus récent. Encore une fois, cela est connu pour fonctionner sur la plupart des ordinateurs portables Apple, mais peut également fonctionner sur des machines Windows ou Linux avec accéléromètre. Dans la fonction de gestionnaire d'événements, recherchez x, y, zchamps sur les données d'événements fournis comme premier argument.

• ondevicemotionest connu pour fonctionner sur iPhone 3GS + 4 et iPad (tous deux avec iOS 4.2), et fournit des données liées à l'accélération actuelle de l'appareil client. Les données d'événement transmis à la fonction de gestionnaire possède accelerationet accelerationIncludingGravityqui ont tous deux trois champs pour chaque axe: x, y,z

L'exemple de site Web de "détection de tremblement de terre" utilise une série d' ifinstructions pour déterminer à quel événement attacher (dans un ordre quelque peu prioritaire) et transmet les données reçues à une tiltfonction 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 derniers événements avec celles du premier, mais ce ne sont en aucun cas des représentations précises. Pour ce simple projet "jouet", cela fonctionne très bien, mais si vous devez utiliser les données pour quelque chose d'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 :)

Je ne peux pas ajouter de commentaire à l'excellente explication dans l'autre article, mais je voulais mentionner qu'une excellente source de documentation peut être trouvée ici .

Il suffit d'enregistrer une fonction événementielle pour l'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 le magnétomètre, un gestionnaire d'événements 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 existe également des champs spécifiés dans l'événement de mouvement pour un gyroscope mais cela ne semble pas être universellement pris en charge (par exemple, cela ne fonctionnait pas sur un Samsung Galaxy Note).

Il existe un code de travail simple sur GitHub

Solution de secours utile ici: 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);