Modification de l'orientation des appareils dans Chrome 50

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.

Ressources supplémentaires