Signatur
Beschreibung
beta gibt an, wie schnell sich das Gerät gerade um seine X-Achse dreht. Die X-Achse verläuft in der Bildschirmebene von links nach rechts. Eine Drehung um diese Achse ist also ein Kippen nach vorn oder hinten (Nicken, englisch „pitch“). Der Wert kommt aus dem Gyroskop und wird in Grad pro Sekunde angegeben.
Du erreichst die Eigenschaft über event.rotationRate eines devicemotion-Events. Das Event registrierst du am window, entweder mit addEventListener("devicemotion", …) oder über window.ondevicemotion. Typische Einsatzgebiete sind Gestenerkennung (z. B. schnelles Nach-vorn-Kippen), Steuerung in Spielen, Bildstabilisierung und Bewegungsanalysen.
Wichtig: beta ist eine Winkelgeschwindigkeit. Die absolute Neigung des Geräts ist etwas anderes. Die bekommst du über DeviceOrientationEvent.beta (in Grad, Wertebereich −180 bis 180). Befindet sich das Gerät in Ruhe, liegt rotationRate.beta nahe 0, ganz unabhängig davon, wie das Gerät gerade geneigt ist.
Rückgabewert
null, wenn das Gerät kein Gyroskop hat oder keine Daten liefert.Beispiele
Drehrate mit addEventListener auslesen
const handleMotion = (event) => {
const beta = event.rotationRate?.beta;
if (beta == null) {
console.log('Keine Gyroskop-Daten verfügbar');
return;
}
console.log(`Drehrate X-Achse: ${beta.toFixed(1)} °/s`);
};
window.addEventListener('devicemotion', handleMotion);Berechtigung unter iOS anfragen (per Klick)
const startButton = document.querySelector('#start');
startButton.addEventListener('click', async () => {
// iOS 13+ verlangt eine Freigabe, die aus einer Nutzeraktion heraus angefragt wird
if (typeof DeviceMotionEvent.requestPermission === 'function') {
const state = await DeviceMotionEvent.requestPermission();
if (state !== 'granted') {
console.log('Zugriff auf Bewegungssensoren verweigert');
return;
}
}
window.ondevicemotion = (event) => {
console.log('beta:', event.rotationRate?.beta);
};
});Schnelles Nach-vorn-Kippen erkennen und Listener entfernen
const THRESHOLD = 200; // °/s
let lastTrigger = 0;
const detectFlick = (event) => {
const beta = event.rotationRate?.beta ?? 0;
const now = performance.now();
if (Math.abs(beta) > THRESHOLD && now - lastTrigger > 500) {
lastTrigger = now;
console.log(beta > 0 ? 'Kippgeste: vorwärts' : 'Kippgeste: rückwärts');
}
};
window.addEventListener('devicemotion', detectFlick);
// Nach 30 Sekunden aufhören zu lauschen, um Akku zu sparen
setTimeout(() => {
window.removeEventListener('devicemotion', detectFlick);
console.log('Gestenerkennung beendet');
}, 30_000);// Wichtig · Fallstricke
- Sicherer Kontext nötig:
devicemotion-Events werden nur über HTTPS (oderlocalhost) ausgelöst. - iOS/Safari: Ab iOS 13 musst du zuerst
DeviceMotionEvent.requestPermission()aufrufen, und zwar aus einer Nutzeraktion heraus (z. B. einem Klick). Ohne diese Freigabe kommen keine Events an. - Einheiten: In der Spezifikation und in modernen Browsern ist die Einheit °/s. Einige ältere Chrome-Versionen (Android) haben rad/s geliefert. Wenn du alte Geräte unterstützen musst, prüfe die Werte auf Plausibilität.
null-Werte: Desktop-Rechner und Geräte ohne Gyroskop liefernnulloder gar keinrotationRate. Prüfe den Wert deshalb immer mit Optional Chaining (?.) oder?? 0.- Nicht mit der Ausrichtung verwechseln: Den Neigungswinkel liefert
DeviceOrientationEvent.beta.rotationRate.betaist dagegen die Geschwindigkeit der Drehung. - Leistung und Datenschutz: Das Event feuert sehr häufig (typisch alle 16 ms). Halte den Handler deshalb schlank und entferne ihn, sobald du ihn nicht mehr brauchst. Aus Sensordaten lassen sich Nutzer möglicherweise wiedererkennen (Fingerprinting). Manche Browser reduzieren deshalb die Genauigkeit oder blockieren die Events in Iframes, wenn keine passende Permissions Policy gesetzt ist (
accelerometer,gyroscope).