Wie kann ich über Javascript auf Beschleunigungsmesser- / Gyroskopdaten zugreifen?

139

Ich bin kürzlich auf einige Websites gestoßen, die auf den Beschleunigungsmesser oder das Gyroskop meines Laptops zuzugreifen scheinen und Änderungen in der Ausrichtung oder Bewegung erkennen.

Wie wird das gemacht? Muss ich ein Ereignis für das windowObjekt abonnieren ?

Auf welchen Geräten (Laptops, Handys, Tablets) funktioniert dies bekanntermaßen?


NB : Ich kenne die Antwort auf diese Frage bereits (teilweise) und werde sie sofort veröffentlichen. Der Grund , dass ich die Frage hier bin Entsendung, ist jeder andere auch , dass Daten des Beschleunigungsmessers wissen zu lassen , ist in Javascript (auf bestimmten Geräten) und die Gemeinschaft herauszufordern zu diesem Thema neue Erkenntnisse zu veröffentlichen. Derzeit scheint es fast keine Dokumentation dieser Funktionen zu geben.

Jørn Schou-Rode
quelle
Vielen Dank. Denken Sie, dass die Antwort 3 Jahre später aktualisiert werden muss?
Bartek Banachewicz
@BartekBanachewicz Danke, dass du mich darauf angesprochen hast. Ich werde die Antwort auf "Community-Wiki" übertragen, in der Hoffnung, dass jemand mit aktuelleren Kenntnissen sie aktualisiert, um den aktuellen Stand der Technik widerzuspiegeln.
Jørn Schou-Rode
Ich konnte nicht feststellen, ob für diesen Vorgang die Zustimmung des Benutzers erforderlich ist. Ich wollte keine neue Frage stellen, da sie perfekt zu Ihrer Frage passt. Vielleicht können wir das hier hinzufügen? Weiß jemand, ob dies eine ausdrückliche Zustimmung erfordert? Ist dies in allen Browsern und allen mobilen Betriebssystemen der Fall?
Silber

Antworten:

8

Der Weg, dies ab 2019 zu tun, ist die Verwendung der DeviceOrientationAPI . Dies funktioniert in den meisten modernen Browsern auf Desktop und Mobile.

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

Nach der Registrierung Ihres Ereignis-Listeners (in diesem Fall einer JavaScript-Funktion namens handleOrientation ()) wird Ihre Listener-Funktion regelmäßig mit aktualisierten Orientierungsdaten aufgerufen.

Das Orientierungsereignis enthält vier Werte:

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

Die Ereignishandlerfunktion kann ungefähr so ​​aussehen:

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
quelle
179

Derzeit gibt es drei verschiedene Ereignisse, die möglicherweise ausgelöst werden, wenn sich die Clientgeräte bewegen. Zwei von ihnen konzentrieren sich auf die Orientierung und der letzte auf die Bewegung :

  • ondeviceorientationEs ist bekannt, dass es auf der Desktop-Version von Chrome funktioniert, und die meisten Apple-Laptops scheinen über die erforderliche Hardware zu verfügen, damit dies funktioniert. Es funktioniert auch auf Mobile Safari auf dem iPhone 4 mit iOS 4.2. In der Event - Handler - Funktion können Sie zugreifen alpha, beta, gammaWerte für die Ereignisdaten als einziges Argument an die Funktion geliefert.

  • onmozorientationwird unter Firefox 3.6 und höher unterstützt. Auch hier ist bekannt, dass dies auf den meisten Apple-Laptops funktioniert, aber möglicherweise auch auf Windows- oder Linux-Computern mit Beschleunigungsmesser. In der Event - Handler - Funktion, sucht x, y, zFelder auf den Ereignisdaten geliefert als erstes Argument.

  • ondevicemotionEs ist bekannt, dass es auf iPhone 3GS + 4 und iPad (beide mit iOS 4.2) funktioniert und Daten zur aktuellen Beschleunigung des Clientgeräts bereitstellt. Die Ereignisdaten an die Behandlungsfunktion durchlaufen hat accelerationund accelerationIncludingGravity, die beide drei Felder für jede Achse: x, y,z

Die Beispielwebsite "Erdbebenerkennung" verwendet eine Reihe von ifAnweisungen, um herauszufinden, an welches Ereignis (in einer etwas priorisierten Reihenfolge) angehängt werden soll, und leitet die empfangenen Daten an eine gemeinsame tiltFunktion weiter:

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

Die konstanten Faktoren 2 und 50 werden verwendet, um die Messwerte aus den beiden letzteren Ereignissen mit denen aus dem ersten "auszurichten", aber dies sind keineswegs präzise Darstellungen. Für dieses einfache "Spielzeug" -Projekt funktioniert es einwandfrei, aber wenn Sie die Daten für etwas Ernsthafteres verwenden müssen, müssen Sie sich mit den Einheiten der Werte vertraut machen, die in den verschiedenen Ereignissen angegeben sind, und sie mit Respekt behandeln :)

Jørn Schou-Rode
quelle
9
manchmal nagelt eine Antwort es einfach!
Scott Evernden
1
Falls sich jemand wundert - ondevicemotion funktioniert für Firefox 8.0, ist jedoch falsch skaliert (0-9), dies scheint jedoch in späteren Versionen (10.0) behoben zu sein. Keiner von ihnen funktioniert mit Opera Mobile und alle Standardfunktionen funktionieren problemlos mit dem Standard-Browser von Nokia N9.
Nux
2
Das MozOrientation-Ereignis wurde in Firefox 6 als veraltet entfernt. Jetzt verwenden alle die standardisierte API.
Chris Morgan
Dies scheint in Firefox 30 nicht zu funktionieren, wie in dieser Geige gezeigt . :(
Bwinton
Nebenbemerkung: Plax.js , das in den 404- und 500-Seiten von github verwendet wird , verwendet eine Geräteorientierung .
Yosh
21

Ich kann der hervorragenden Erklärung im anderen Beitrag keinen Kommentar hinzufügen, wollte aber erwähnen, dass hier eine großartige Dokumentationsquelle zu finden ist .

Es reicht aus, eine Ereignisfunktion für einen Beschleunigungsmesser wie folgt zu registrieren:

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

mit dem Handler:

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

Und für das Magnetometer muss ein folgender Event-Handler registriert sein:

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

mit einem Handler:

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

Es gibt auch Felder, die im Bewegungsereignis für ein Gyroskop angegeben sind, aber dies scheint nicht allgemein unterstützt zu werden (z. B. hat es auf einem Samsung Galaxy Note nicht funktioniert).

Auf GitHub gibt es einen einfachen Arbeitscode

Unendliches Praktikum
quelle
1

Nützlicher Fallback hier: 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
quelle