Nouveautés de Chrome 87

Pete LePage

Le déploiement de Chrome 87 en version stable commence maintenant.

Voici les informations à retenir :

Je m'appelle Pete LePage. Je travaille et je filme depuis chez moi. Découvrons les nouveautés de Chrome 87 pour les développeurs.

Sommet des développeurs Chrome

Logo du Sommet des développeurs Chrome

Le Sommet des développeurs Chrome reprend les 9 et 10 décembre avec un huitième chapitre. Mais cette fois, nous venons vers vous. Nous vous présentons toutes les dernières mises à jour, beaucoup de nouveaux contenus, et de nombreuses Chromies.

De nombreuses discussions, ateliers, permanences sont possibles, etc., et nous serons dans le chat YouTube pour répondre à vos questions. Cliquez ici pour en savoir plus et découvrez comment participer, en plus de regarder des contenus.

Panoramique, inclinaison et zoom de la caméra

La plupart des salles de réunion Google sont équipées de caméras dotées de fonctionnalités de panoramique, d'inclinaison et de zoom, qui permettent de diriger la caméra vers les personnes qui se trouvent dans la salle. De nombreuses caméras Web prennent en charge la technologie PTZ (panoramique, inclinaison et zoom, etc.).

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

La détection des fonctionnalités est légèrement différente de ce à quoi vous êtes probablement habitué. Vous devez appeler navigator.mediaDevices.getSupportedConstraints() pour voir 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

Comme pour toutes les autres API puissantes, l'utilisateur doit ensuite accorder des autorisations à la caméra, mais également à la fonctionnalité PTZ.

Pour demander l'autorisation d'accéder à la fonctionnalité PTZ, appelez navigator.mediaDevices.getUserMedia() avec les contraintes PTZ. L'utilisateur est alors invité à accorder les autorisations d'accès à la caméra et à la caméra standards avec les autorisations 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 la compatibilité de la caméra.

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 pour le PTZ, donc je peux cacher ma cuisine en désordre, mais il faudra regarder la vidéo pour voir ça !

François a rédigé 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, fournir les détails de la meilleure façon de demander l'autorisation, ainsi qu'une démonstration pour que vous puissiez l'essayer 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 en fragments. Cela est particulièrement utile pour les fichiers multimédias volumineux, pour lesquels l'expérience utilisateur est améliorée grâce à une lecture plus fluide, à une barre de lecture améliorée, ainsi qu'à de meilleures fonctions de mise en pause et de reprise.

Auparavant, les demandes de plage et les services workers ne fonctionnaient pas bien ensemble, obligeant les développeurs à créer des solutions de contournement. À partir de Chrome 87, la transmission de 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 à Chrome 87, consultez l'article de Jeff, Handling range requests in a service worker (Gérer les requêtes de plage dans un service worker) sur le site web.dev.

Phase d'évaluation: API Font Access

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

Intégrer des applications de conception comme Figma, Gravit Designer et Photopea au Web est une excellente idée, et nous en prévoyons de bien d'autres. Si le Web a la possibilité d'offrir une pléthore de polices, tout n'est pas disponible sur le Web.

Pour de nombreux concepteurs, certaines polices sont installées sur leur ordinateur qui sont essentielles à leur travail. Il peut s'agir, par exemple, de polices de logo d'entreprise ou de polices spécialisées pour la CAO et d'autres applications de conception.

Avec l'API Font Access, qui lance une phase d'évaluation 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)

De plus, les sites peuvent se connecter à 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);
}

Consultez l'article de Tom Utiliser une typographie avancée avec des polices locales sur web.dev avec tous les détails, ainsi que le lien vers la phase d'évaluation pour que vous puissiez l'essayer par vous-même.

Et 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 logiques et des valeurs CSS, y compris des raccourcis et des décalages, afin de faciliter l'écriture de ces propriétés et valeurs logiques. Par exemple, une même 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 sont disponibles.
  • Il existe un certain nombre de modifications liées à l'isolation multi-origine.

Complément d'informations

Nous n'abordons ici que certains des points forts. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires apportées à Chrome 87.

S'abonner

Pour suivre l'actualité de nos vidéos, abonnez-vous à notre chaîne YouTube pour les développeurs Chrome afin de recevoir une notification par e-mail chaque fois qu'une nouvelle vidéo est mise en ligne.

Je m'appelle Pete LePage. Dès la sortie de Chrome 88, je serai là pour vous dire les nouveautés de Chrome !