DeviceMotionEvent.rotationRate — Eigenschaft · JavaScript-Referenz

Signatur

DeviceMotionEvent.rotationRate

Beschreibung

Die Eigenschaft rotationRate eines DeviceMotionEvent enthält die Messwerte des Gyroskops. Sie gibt ein Objekt vom Typ DeviceMotionEventRotationRate mit drei Werten in Grad pro Sekunde zurück:

alpha: Drehung um die z-Achse, die senkrecht aus dem Bildschirm zeigt
beta: Drehung um die x-Achse, die von links nach rechts verläuft
gamma: Drehung um die y-Achse, die von unten nach oben verläuft

Anders als DeviceOrientationEvent gibt rotationRate keine absolute Ausrichtung an, sondern nur, wie schnell sich das Gerät gerade dreht. Das passt gut für Gestenerkennung (z. B. Schütteln oder Drehen des Handgelenks), Bewegungssteuerung in Spielen, Bildstabilisierung und die Auswertung von Bewegungen in Fitness-Apps.

Die Werte kommen über das devicemotion-Ereignis am window-Objekt an. Das Ereignis feuert in einem festen Takt, den event.interval in Millisekunden angibt. Hat das Gerät kein Gyroskop, ist rotationRate null, oder die einzelnen Achsenwerte sind null.

Rückgabewert

Typ

DeviceMotionEventRotationRate | null

Beschreibung

Ein Objekt mit den Eigenschaften alpha, beta und gamma (jeweils number | null, in Grad pro Sekunde). Ohne Gyroskop ist der Wert null.

Beispiele

Drehraten auslesen und anzeigen

const handleMotion = (event) => {
  const rate = event.rotationRate;
  if (!rate) {
    console.log('Kein Gyroskop verfügbar');
    return;
  }
  const { alpha, beta, gamma } = rate;
  console.log(`α: ${alpha?.toFixed(1)} °/s, β: ${beta?.toFixed(1)} °/s, γ: ${gamma?.toFixed(1)} °/s`);
};

window.addEventListener('devicemotion', handleMotion);

α: 0.3 °/s, β: -12.8 °/s, γ: 4.1 °/s

Berechtigung unter iOS anfragen (per Klick)

const startButton = document.querySelector('#start');

const onMotion = (event) => {
  const beta = event.rotationRate?.beta ?? 0;
  document.querySelector('#out').textContent = `${beta.toFixed(1)} °/s`;
};

startButton.addEventListener('click', async () => {
  // iOS 13+ verlangt eine ausdrückliche Erlaubnis nach einer Nutzeraktion
  if (typeof DeviceMotionEvent?.requestPermission === 'function') {
    const state = await DeviceMotionEvent.requestPermission();
    if (state !== 'granted') {
      console.warn('Zugriff auf Bewegungssensoren verweigert');
      return;
    }
  }
  window.addEventListener('devicemotion', onMotion);
});

Schnelle Handgelenksdrehung erkennen

const THRESHOLD = 300; // Grad pro Sekunde
let lastTrigger = 0;

const detectTwist = (event) => {
  const gamma = event.rotationRate?.gamma;
  if (gamma == null) return;

  const now = performance.now();
  if (Math.abs(gamma) > THRESHOLD && now - lastTrigger > 1000) {
    lastTrigger = now;
    console.log(gamma > 0 ? 'Drehung nach rechts' : 'Drehung nach links');
  }
};

window.addEventListener('devicemotion', detectTwist);

// Später aufräumen, z. B. beim Verlassen der Ansicht:
// window.removeEventListener('devicemotion', detectTwist);

Drehung nach rechts

// Wichtig · Fallstricke

Nur in einem sicheren Kontext: devicemotion wird nur unter HTTPS (oder localhost) ausgelöst.
iOS/Safari: Ab iOS 13 muss man DeviceMotionEvent.requestPermission() innerhalb einer Nutzeraktion (z. B. click) aufrufen. Sonst kommen keine Ereignisse an.
Einheiten: Die Werte sind in Grad pro Sekunde angegeben. Ältere Android-Browser lieferten teils Radiant pro Sekunde, deshalb sollte man die Werte auf Zielgeräten prüfen.
Null-Werte: Auf Desktop-Geräten ohne Gyroskop ist rotationRate meist null, oder alle Achsen sind null. Deshalb immer mit ?. und ?? absichern.
Leistung: Das Ereignis feuert sehr oft (typisch 60 Hz). Aufwendige Berechnungen oder DOM-Änderungen sollte man drosseln oder über requestAnimationFrame bündeln.
Datenschutz: Bewegungssensoren eignen sich für Fingerprinting. Manche Browser runden die Werte deshalb oder sperren den Zugriff per Permissions-Policy (accelerometer, gyroscope), auch in iframes.
Einen genaueren Zugriff bietet die neuere Generic Sensor API (Gyroscope), die bisher nur in Chromium-Browsern verfügbar ist.

Siehe auch

DeviceMotionEvent DeviceMotionEvent.acceleration DeviceMotionEvent.accelerationIncludingGravity DeviceMotionEvent.interval DeviceOrientationEvent DeviceMotionEventAcceleration.x