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

139

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.

Jørn Schou-Rode
la source
Grand effort, merci beaucoup. Pensez-vous que 3 ans plus tard, la réponse nécessite des mises à jour?
Bartek Banachewicz
@BartekBanachewicz Merci de m'avoir appelé sur celui-ci. Je vais transférer la réponse sur "wiki communautaire", en espérant que quelqu'un avec des connaissances plus à jour le mettra à jour pour refléter l'état actuel de l'art.
Jørn Schou-Rode
Je n'ai pas pu trouver si cette opération nécessite le consentement de l'utilisateur. Je ne voulais pas poser de nouvelle question car elle correspond parfaitement à votre question. Peut-être pouvons-nous ajouter ceci ici? Quelqu'un sait-il si cela nécessite un consentement explicite? Est-ce le cas dans tous les navigateurs et tous les systèmes d'exploitation mobiles?
Argent

Réponses:

8

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
}
str
la source
179

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 :)

Jørn Schou-Rode
la source
9
parfois une réponse le cloue!
Scott Evernden
1
Au cas où quelqu'un se demanderait - ondevicemotion fonctionne pour Firefox 8.0 mais n'est pas mis à l'échelle (0-9), mais cela semble être corrigé dans les versions ultérieures (10.0). Aucun d'entre eux ne fonctionne sur Opera Mobile et tous les standards fonctionnent correctement sur le navigateur Nokia N9 par défaut.
Nux
2
L'événement MozOrientation a été supprimé car obsolète dans Firefox 6. Alors maintenant, ils utilisent tous l'API standardisée.
Chris Morgan
Cela ne semble pas fonctionner dans Firefox 30, comme le montre ce violon . :(
bwinton
sidenote: Plax.js , qui est utilisé dans les pages 404 et 500 de github, utilise ondeviceorientation .
Yosh
21

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

Stage infini
la source
1

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);
Luckylooke
la source