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

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.}

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
}

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

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

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