Modification de l'orientation des appareils dans Chrome 50

Les développeurs qui travaillent sur des applications Web en réalité augmentée ou virtuelle connaissent sans aucun doute DeviceOrientationEvent. Pour les utilisateurs non initiés, This End Up: Using Device Orientation (Ceci final : utiliser l'orientation de l'appareil) offre un excellent aperçu de la manière dont un écouteur d'événements deviceorientation peut répondre à un mouvement de rotation de l'appareil.

Dans les versions antérieures de Chrome, les valeurs alpha, beta et gamma incluses dans DeviceOrientationEvent étaient fournies en tant que absolute degrés par rapport au cadre de coordonnées de la Terre. Fournir des degrés absolus nécessite l'utilisation du magnétomètre d'un appareil pour détecter le champ magnétique terrestre, ce qui est à son tour sensible aux fluctuations des champs magnétiques à proximité qui pourraient interférer avec les mesures. En pratique, cela peut conduire une application Web à enregistrer un tas de DeviceOrientationEvent en raison d'un aimant à proximité, bien que l'appareil lui-même ne soit pas en mouvement. Pour une application de réalité virtuelle qui se concentre uniquement sur le suivi des changements d'orientation, ce bruit magnétique est une mauvaise nouvelle.

Quoi de neuf ?

À partir de Chrome 50, les degrés inclus dans le DeviceOrientationEvent ne sont plus absolus par défaut par rapport au cadre de coordonnées de la Terre. Cela signifie que les DeviceOrientationEvent ne doivent être déclenchés qu'en cas de mouvement, détecté par une combinaison de l'accéléromètre et du gyroscope d'un appareil. Le magnétomètre et les fausses mesures dus aux fluctuations du champ magnétique ne figurent pas dans l'image.

Mais j'ai quand même besoin de diplômes absolus !

Si vous écrivez du code JavaScript qui doit utiliser des degrés absolus, peut-être dans le cadre d'une application Web de réalité augmentée qui doit être mappée directement sur le monde physique, vous avez de la chance. Le comportement précédent, qui dépend du magnétomètre d'un appareil, est disponible via un nouvel événement deviceorientationabsolute. Du point de vue d'un développeur, elle est semblable à la DeviceOrientationEvent existante, avec la garantie que la propriété absolute sera définie sur true.

Détecter les contenus compatibles

Les développeurs qui préfèrent les degrés absolus peuvent utiliser la détection des 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é entre les navigateurs

Les valeurs signalé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 des applications Web conçues pour iOS.

Les versions de Firefox (sur des plates-formes autres qu'iOS), Edge et Chrome antérieures à 50 utilisent des valeurs de degrés absolues pour DeviceOrientationEvent lorsqu'elles sont exécutées sur des appareils équipés des capteurs appropriés.

Au moment où cet article a été rédigé, Chrome 50 est le premier navigateur compatible avec la nouvelle version de DeviceOrientationAbsoluteEvent.

Suivi avancé de l'orientation avec DeviceMotionEvent

Boris Smus propose un article extrêmement détaillé qui décrit certains des inconvénients de l'utilisation de DeviceOrientationEvent et explique comment implémenter une fusion de capteurs sur mesure à l'aide de DeviceMotionEvent. Ils fournissent 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