Nouveautés de Chrome 87

Pete LePage

Chrome 87 commence à être déployé en version stable.

Voici les informations à retenir :

Je suis Pete LePage, et je travaille et filme depuis chez moi. Je vais vous présenter les nouveautés de Chrome 87 pour les développeurs.

Sommet des développeurs Chrome

Logo Chrome Dev Summit

Le Chrome Dev Summit revient pour sa 8e édition les 9 et 10 décembre. Mais cette fois, c'est nous qui allons à votre rencontre. Nous vous proposons toutes les dernières nouveautés, de nombreux contenus inédits et de nombreux Chromies.

Vous y trouverez de nombreux conférences, ateliers, permanences, etc. Nous serons également présents dans le chat YouTube pour répondre à vos questions. En savoir plus et découvrir comment participer !

Panoramique, inclinaison et zoom de la caméra

La plupart des salles de réunion de Google sont équipées de caméras avec des fonctionnalités de panoramique, d'inclinaison et de zoom, afin que la caméra puisse être orientée vers les personnes présentes dans la salle. Mais ce ne sont pas seulement les caméras de conférence sophistiquées qui sont compatibles avec le PTZ (panoramique, inclinaison, zoom). De nombreuses webcams le sont également.

À partir de Chrome 87, une fois qu'un utilisateur a accordé l'autorisation, vous pouvez contrôler les fonctionnalités PTZ d'une caméra.

La détection de fonctionnalités est un peu différente de ce à quoi vous êtes probablement habitué. Vous devez appeler navigator.mediaDevices.getSupportedConstraints() pour savoir si le navigateur est compatible avec le PTZ.

const supports = navigator.mediaDevices.getSupportedConstraints();

if (supports.pan && supports.tilt && supports.zoom) {
  // Browser supports camera PTZ.
}

Invite d'autorisation pour le PTZ

Ensuite, comme pour toutes les autres API performantes, l'utilisateur doit accorder l'autorisation à l'appareil photo, mais également à la fonctionnalité PTZ.

Pour demander l'autorisation d'utiliser la fonctionnalité PTZ, appelez navigator.mediaDevices.getUserMedia() avec les contraintes PTZ. L'utilisateur est alors invité à accorder des autorisations à la caméra standard et à la caméra avec PTZ.


try {
  const opts = {video: {pan: true, tilt: true, zoom: true}};
  const stream = await navigator.mediaDevices.getUserMedia(opts);
  document.querySelector("#video").srcObject = stream;
} catch (error) {
  // User denies prompt, or
  // matching media is not available.
}

Enfin, un appel à MediaStreamTrack.getSettings() vous indique ce que la caméra prend en charge.

const [videoTrack] = stream.getVideoTracks();
const capabilities = videoTrack.getCapabilities();
const settings = videoTrack.getSettings();

if ('pan' in settings) {
  enablePan(capabilities, settings);
}
// Similar for tilt and zoom...

Une fois que l'utilisateur a accordé l'autorisation, vous pouvez appeler videoTrack.applyConstraints() pour ajuster le panoramique, l'inclinaison et le zoom.

function enablePan(capabilities, settings) {
  const input = document.getElementById('rangePan');
  input.min = capabilities.pan.min;
  input.max = capabilities.pan.max;
  input.step = capabilities.pan.step;
  input.value = settings.pan;

  input.addEventListener('input', async () => {
    const opts = { advanced: [{ pan: input.value }] };
    await videoTrack.applyConstraints(opts);
  });
}

Personnellement, je suis très enthousiaste à l'idée de pouvoir cacher ma cuisine en désordre grâce à la PTZ, mais vous devrez regarder la vidéo pour le voir !

François a publié un excellent article intitulé Contrôler le panoramique, l'inclinaison et le zoom de la caméra sur web.dev avec des exemples de code, des informations complètes sur la meilleure façon de demander l'autorisation et une démonstration, afin que vous puissiez tester et voir si votre webcam est compatible avec le PTZ.

Requêtes de plage et service workers

Les requêtes de plage HTTP, disponibles dans les principaux navigateurs depuis plusieurs années, permettent aux serveurs d'envoyer les données demandées au client par blocs. Cela est particulièrement utile pour les fichiers multimédias volumineux, où l'expérience utilisateur est améliorée grâce à une lecture plus fluide, un meilleur balayage, et de meilleures fonctions de mise en pause et de reprise.

Auparavant, les requêtes de plage et les service workers ne fonctionnaient pas bien ensemble, ce qui oblige les développeurs à créer des solutions de contournement. À partir de Chrome 87, la transmission des requêtes de plage au réseau depuis un service worker "fonctionne".

self.addEventListener('fetch', (event) => {
  // The Range: header will pass through
  // in browsers that behave correctly.
  event.respondWith(fetch(event.request));
});

Pour en savoir plus sur les problèmes liés aux requêtes de plage et sur les modifications apportées dans Chrome 87, consultez l'article de Jeff Gérer les requêtes de plage dans un service worker sur web.dev.

Test Origin: API Font access

Capture d'écran de l'éditeur d'images Photopea

Le fait que des applications de conception comme Figma, Gravit Designer et Photopea soient disponibles sur le Web est une excellente chose, et nous en verrons beaucoup d'autres à l'avenir. Bien que le Web puisse proposer une multitude de polices, tout n'est pas disponible sur le Web.

Pour de nombreux concepteurs, certaines polices installées sur leur ordinateur sont essentielles à leur travail. comme les polices de logo d'entreprise ou les polices spécialisées pour la CAO et d'autres applications de conception.

Avec l'API font access, qui lance une phase d'évaluation de l'origine dans Chrome 87, un site peut désormais énumérer les polices installées, ce qui permet aux utilisateurs d'accéder à toutes les polices de leur système.


// Query for all available fonts and log metadata.
const fonts = navigator.fonts.query();
try {
  for await (const metadata of fonts) {
    console.log(`${metadata.family} (${metadata.fullName})`);
  }
} catch (err) {
  console.error(err);
}

// Roboto (Roboto Black)
// Roboto (Roboto Black Italic)
// Roboto (Roboto Bold)

Les sites peuvent s'intégrer à des niveaux inférieurs pour accéder aux octets de police, ce qui leur permet d'implémenter leur propre mise en page OpenType ou d'effectuer des filtres vectoriels ou des transformations sur les formes de glyphes.

const fonts = navigator.fonts.query();
try {
  for await (const metadata of fonts) {
    const sfnt = await metadata.blob();
    makeMagic(metadata.family, sfnt);
  }
} catch (err) {
  console.error(err);
}

Pour en savoir plus, consultez l'article de Tom Utiliser une typographie avancée avec des polices locales sur web.dev, ainsi que le lien vers le test Origin afin de l'essayer vous-même.

Et bien plus encore

  • Flux transférables : les objets ReadableStream, WritableStream et TransformStream peuvent désormais être transmis en tant qu'arguments à postMessage().
  • Nous avons implémenté les fonctionnalités flow-relative les plus précises de la spécification des propriétés et valeurs logiques CSS, y compris les raccourcis et les décalages pour faciliter l'écriture de ces propriétés et valeurs logiques. Par exemple, une seule propriété margin-block peut remplacer des règles margin-block-start et margin-block-end distinctes.
  • De nouveaux descripteurs @font-face ont été ajoutés à ascent-override, descent-override et line-gap-override pour remplacer les métriques de la police.
  • Plusieurs nouvelles propriétés text-decoration et underline ont été ajoutées.
  • De nombreux changements sont liés à l'isolation inter-origine.

Documentation complémentaire

Il ne s'agit là que de quelques-uns des points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications apportées à Chrome 87.

S'abonner

Si vous souhaitez rester informé de nos vidéos, abonnez-vous à notre chaîne YouTube pour les développeurs Chrome. Vous recevrez alors une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Je m'appelle Pete LePage. Dès que Chrome 88 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.