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

J'ai récemment rencontré quelques sites web qui semble pour accéder à l'accéléromètre gyroscope sur mon ordinateur portable, la détection des changements dans l'orientation ou de la circulation.

Comment est-ce fait? Dois-je souscrire à une sorte d'événement sur le window objet?

Sur quels types d'appareils (ordinateurs portables, téléphones mobiles, tablettes) est connu pour travailler?

^{NB: en fait, je sais déjà (une partie de) la réponse à cette question, et je vais poster tout de suite. La raison que je suis en affichant la question ici, est de laisser tout le monde savoir que les données d'accélérométrie de l' est disponibles en Javascript (sur certains appareils) et de contester la communauté de publier de nouveaux résultats sur le sujet. Actuellement, il semble y avoir pratiquement aucune documentation de ces fonctions.}

Un grand effort, merci beaucoup. Pensez-vous que 3 ans plus tard, la réponse nécessite des mises à jour?
Merci pour m'appeler à ce sujet. Je vais transférer la réponse à "wiki de la communauté", en espérant que quelqu'un avec plus up-to-date de connaissances qui sera mis à jour pour refléter l'état actuel de la technique.
Je ne pouvais pas trouver si cette opération nécessite le consentement de l'utilisateur. Je ne voulais pas faire une nouvelle question, car il s'adapte parfaitement à votre question. On peut peut-être ajouter ici? Personne ne sait si cela nécessite le consentement explicite? Est-ce le cas dans tous les navigateurs et tous les Os mobiles?

InformationsquelleAutor Jørn Schou-Rode | 2010-12-07

178

Il y a actuellement trois événements distincts qui peut ou peut ne pas être déclenchée lorsque le client périphériques se déplace. Deux d'entre eux sont axés autour de orientation et le dernier sur mouvement:
- ondeviceorientation est connu pour travailler sur la version de bureau de google Chrome, et la plupart des ordinateurs portables Apple semble avoir le matériel nécessaire pour faire ce travail. Il fonctionne aussi sur Mobile Safari sur l'iPhone 4 avec iOS 4.2. Dans la fonction de gestionnaire d'événement, vous pouvez accéder à alpha, beta, gamma valeurs sur le cas des données fournies en tant que le seul argument à la fonction.
- onmozorientation est pris en charge sur Firefox 3.6 et versions plus récentes. Encore une fois, cela est connu de fonctionner sur la plupart des ordinateurs portables Apple, mais pourrait fonctionner sur Windows ou Linux avec accéléromètre ainsi. Dans la fonction de gestionnaire d'événements, recherchez x, y, z des champs dans le cas des données fournies en tant que premier argument.
- ondevicemotion est connu pour fonctionner sur iPhone 3GS + 4 et de l'iPad (à la fois avec iOS 4.2), et fournit des données liées à l'accélération de l'appareil client. Les données d'événements passés à la fonction de gestionnaire a acceleration et accelerationIncludingGravity, qui ont tous deux des trois champs pour chaque axe: x, y, z
Le "tremblement de terre de la détection" exemple de site web utilise une série de if déclarations de comprendre que l'événement à joindre à (dans un certain ordre de priorité) et transmet les données reçues d'un commun tilt fonction:
```
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);
}
```
La constante de facteurs 2 et 50 sont utilisés pour "aligner" les lectures de ces deux derniers événements avec ceux de la première, mais ce sont pas représenter de façon précise. Pour cette simple "jouet" projet, il fonctionne très bien, mais si vous avez besoin d'utiliser les données pour quelque chose de plus grave, vous aurez à vous familiariser avec les unités de valeurs fournies dans les différents événements et de les traiter avec respect 🙂
- parfois, une réponse juste, des clous !
- Dans le cas où personne merveilles - ondevicemotion fonctionne pour Firefox 8.0 mais il est mis à l'échelle à tort (0-9), mais cela semble être corrigé dans les versions ultérieures (10.0). Aucun d'entre eux travaille sur Opera Mobile et tous les standards fonctionnent très bien sur par défaut Nokia N9 navigateur.
- Le MozOrientation événement a été supprimé comme obsolètes dans Firefox 6. Alors maintenant, ils sont tous à l'aide de la standardisation de l'API.
- Cela ne semble pas fonctionner dans Firefox 30, comme indiqué dans le ce violon. 🙁
- sidenote: Plax.js, qui est utilisé dans de github 404 et 500 pages, utilise ondeviceorientation.
InformationsquelleAutor

Ne pouvez pas ajouter un commentaire à l'excellente explication dans l'autre post, mais je voulais mentionner que l'un des grands de la documentation de la source peut être trouvé ici.

Il suffit de s'inscrire une fonction d'événement pour l'accéléromètre comme suit:

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 aussi les champs spécifiés dans le mouvement pour un gyroscope, mais qui ne semble pas être universellement pris en charge (par exemple, il ne fonctionne pas sur un Samsung Galaxy Note).

Il est un simple code de travail sur GitHub

InformationsquelleAutor Infinite Internship

Utile de secours 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);

InformationsquelleAutor Luckylooke

0

La façon de le faire en 2019+ est à utiliser DeviceOrientation API. Cela fonctionne dans la plupart des navigateurs modernes sur desktop et mobile.
```
window.addEventListener("deviceorientation", handleOrientation, true);
```
Après l'enregistrement de votre écouteur d'événement (dans ce cas, un JavaScript
fonction appelée handleOrientation()), votre fonction d'écouteur
périodiquement, est appelée à jour sur l'orientation de données.

L'orientation de l'événement contient quatre valeurs:
- DeviceOrientationEvent.absolute
- DeviceOrientationEvent.alpha
- DeviceOrientationEvent.beta
- DeviceOrientationEvent.gamma
La fonction de gestionnaire d'événement peut ressembler à quelque chose comme 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
}
```
InformationsquelleAutor str

Vous devez vous connecter pour publier un commentaire.