Les développeurs qui travaillent sur des applications Web de réalité virtuelle ou augmentée connaissent sans aucun doute DeviceOrientationEvent
.
Pour les non-initiés, This End Up: Using Device Orientation fournit une excellente présentation de la façon dont un écouteur d'événements deviceorientation
peut répondre à la rotation d'un appareil.
Dans les versions antérieures de Chrome, les valeurs alpha
, beta
et gamma
incluses dans DeviceOrientationEvent
étaient fournies en degrés absolute
par rapport au système de coordonnées de la Terre. Pour fournir des degrés absolus, vous devez utiliser le capteur magnétomètre de l'appareil pour détecter le champ magnétique terrestre, qui est à son tour susceptible de fluctuer en raison de champs magnétiques proches, ce qui pourrait fausser les mesures. En pratique, cela peut entraîner l'enregistrement d'un grand nombre de DeviceOrientationEvent
par une application Web en raison d'un aimant à proximité, même si l'appareil lui-même ne bouge pas. Pour une application de réalité virtuelle qui ne se soucie que du suivi des changements d'orientation, ce bruit magnétique est une mauvaise nouvelle.
Ce qui change
À partir de Chrome 50, les degrés inclus dans DeviceOrientationEvent
ne sont plus par défaut absolus par rapport au système de coordonnées de la Terre. Cela signifie que les DeviceOrientationEvent
ne doivent être déclenchées que lorsqu'il y a un mouvement réel, détecté par une combinaison de l'accéléromètre et du gyroscope de l'appareil. Le magnétomètre et les fausses lectures dues aux fluctuations du champ magnétique sont exclus.
Mais j'ai toujours besoin de degrés absolus !
Si vous écrivez du code JavaScript qui doit utiliser des degrés absolus, par exemple dans le cadre d'une application Web de réalité augmentée qui doit se superposer directement au monde physique, vous n'êtes pas démuni. Le comportement précédent, qui dépend du magnétomètre de l'appareil, est disponible via un nouvel événement deviceorientationabsolute
.
Du point de vue du développeur, il est analogue à l'DeviceOrientationEvent
existante, avec la garantie que la propriété absolute
sera définie sur true
.
Détecter les éléments compatibles
Les développeurs qui préfèrent les degrés absolus peuvent utiliser la détection de fonctionnalités pour déterminer s'ils utilisent un navigateur compatible avec le nouvel événement DeviceOrientationAbsoluteEvent
:
if ('ondeviceorientationabsolute' in window) {
// We can listen for the new deviceorientationabsolute event.
} else if ('ondeviceorientation' in window) {
// We can still listen for deviceorientation events.
// The `absolute` property of the event tells us whether
// or not the degrees are absolute.
}
Compatibilité multinavigateur
Les valeurs indiquées dans DeviceOrientationEvent
n'ont jamais été cohérentes.
Safari et Firefox sur iOS utilisent des valeurs relatives pour les degrés, ce qui correspond à la modification d'implémentation introduite dans Chrome 50. Ce changement devrait améliorer la cohérence avec les applications Web conçues pour iOS.
Firefox (sur des plates-formes autres qu'iOS), Edge et les versions antérieures à Chrome 50 utilisent des valeurs de degré absolu pour DeviceOrientationEvent
lorsqu'elles sont exécutées sur des appareils équipés des capteurs appropriés.
Au moment de la rédaction de cet article, Chrome 50 est le premier navigateur à prendre en charge la nouvelle DeviceOrientationAbsoluteEvent
.
Suivi avancé de l'orientation avec DeviceMotionEvent
Boris Smus a rédigé un article extrêmement détaillé sur certains des inconvénients de l'utilisation de DeviceOrientationEvent
et sur la façon de mettre en œuvre une fusion de capteurs personnalisée à l'aide de DeviceMotionEvent
.
Ils offrent un accès de bas niveau à l'accéléromètre et au gyroscope, et peuvent offrir une expérience de réalité virtuelle plus précise à vos utilisateurs.