Nouveautés de Chrome 94

Pete LePage

Voici les informations à retenir :

Je m'appelle Pete LePage. Je travaille et filme depuis chez moi. Je vais vous présenter les nouveautés de Chrome 94 pour les développeurs.

Espace colorimétrique par défaut pour les éléments canvas

La façon dont les couleurs sont affichées à l'écran est essentielle pour certains utilisateurs. Pour les photographes, les illustrateurs d'impression et bien d'autres, les couleurs à l'écran doivent correspondre à ce qui est imprimé. À partir de Chrome 94, les éléments <canvas> sont entièrement gérés par les couleurs au moyen de sRGB. Auparavant, sRGB était une convention, mais n'est pas explicitement défini dans la spécification.

opts = {colorSpace:'display-p3'};
const ctx = canvas.getContext('2d', opts);

Plus important encore, vous pouvez désormais spécifier l'espace de couleurs à utiliser lorsque vous créez un objet 2D de contexte de rendu <canvas> ou un objet ImageData, y compris l'espace de couleurs P3.

WebCodecs

Il est assez facile d'insérer une vidéo sur une page. Toutefois, si vous devez effectuer une tâche un peu plus complexe et interagir avec les composants d'un flux vidéo, cela est difficile et vous devez généralement utiliser Web Assembly pour distribuer vos propres codecs.

Toutefois, l'envoi de votre propre codec implique d'écrire du code que le navigateur possède déjà, et il ne peut pas profiter de l'accélération matérielle. L'API Web Codecs permet d'utiliser les composants multimédias et les codecs déjà présents dans le navigateur.

Personnellement, j'ai toujours eu du mal à me souvenir des options de ligne de commande appropriées pour encoder une vidéo pour le Web ou convertir un GIF en fichier vidéo. À l'aide des API disponibles via WebCodecs, j'ai pu créer rapidement une application Web qui lit un fichier et exporte les fichiers appropriés nécessaires au Web.

Chemin d&#39;un canevas ou d&#39;un ImageBitmap vers le réseau ou le stockage
Chemin d'un élément Canvas ou ImageBitmap vers le réseau ou l'espace de stockage

Applications Web qui nécessitent un contrôle total sur la façon dont les contenus multimédias sont traités, comme les éditeurs vidéo, les applications de visioconférence, les applications de streaming, etc. L'accès aux commandes multimédias intégrées aux navigateurs est énorme.

Il est difficile d'afficher quoi que ce soit d'utile en 30 secondes. C'est pourquoi nous vous invitons à consulter la page consacrée au traitement vidéo avec WebCodecs sur web.dev pour une présentation détaillée du code et des démonstrations intéressantes.

WebGPU

WebGPU est une nouvelle API qui expose des fonctionnalités graphiques modernes, en particulier Direct3D 12, Metal et Vulkan. Vous pouvez le considérer comme WebGL, mais il offre un accès à des fonctionnalités plus avancées du GPU et permet également d'effectuer des calculs généraux sur le GPU.

Schéma de l&#39;architecture illustrant la connexion des WebGPU entre les API de l&#39;OS et Direct3D 12, Metal et Vulkan.
Schéma de l'architecture WebGPU

Google lance une phase de test dans Chrome 94, et Safari et Firefox travaillent actuellement sur leurs implémentations.

Démo Babylon.js d'une simulation de mer agitée à l'aide de la fonctionnalité de nuanceur de calcul de WebGPU.

François a écrit un excellent article, Accéder aux fonctionnalités modernes des GPU avec WebGPU sur web.dev, qui fournit des informations détaillées et compare les performances de la multiplication de matrices exécutée sur le CPU par rapport au GPU. Voici un indice. Le GPU gagne.

Sommet PWA

Le PWA Summit aura lieu les 6 et 7 octobre. Cette conférence en ligne sans frais vise à aider chacun à réussir avec les progressive web apps. Le PWA Summit est une collaboration entre des personnes issues de plusieurs entreprises différentes impliquées dans la création de technologies PWA : Google, Intel, Microsoft et Samsung.

Il y a de nombreuses conférences et de nombreux contenus de qualité. Pour en savoir plus et vous inscrire, consultez PWASummit.org. J'espère vous y retrouver !

Et bien plus !

Bien sûr, il y a bien d'autres choses.

La méthode scheduler.postTask() prioritaire vous permet de planifier des tâches, de modifier dynamiquement leurs priorités ou de les annuler toutes.

Si vous avez déjà eu du mal à réorganiser la mise en page lorsque des barres de défilement apparaissent, la propriété scrollbar-gutter vous fera plaisir. Il permet de contrôler la présence de marges de barre de défilement, ce qui vous permet d'éviter les modifications de mise en page lorsque le contenu se développe.

L'utilisation de WebSQL dans les contextes tiers est désormais obsolète et devrait être supprimée dans Chrome 97. La norme de base de données Web SQL a été abandonnée en novembre 2010. Elle n'a jamais été implémentée dans Firefox et a été abandonnée dans Safari en 2019. Elle sera abandonnée et supprimée de Chrome lorsque son utilisation sera suffisamment faible. Si vous utilisez toujours WebSQL, il est temps de commencer à planifier votre migration.

De plus, l'API de clavier virtuel vous permet de mieux contrôler comment et quand le clavier virtuel à l'écran est affiché. Il vous permet de contrôler explicitement tout comportement de défilement ou toute modification de mise en page lorsque le clavier apparaît ou disparaît.

Documentation complémentaire

Il ne s'agit là que de quelques-uns des points clés. Consultez les liens ci-dessous pour découvrir d'autres modifications apportées à Chrome 94.

S'abonner

Pour vous tenir informé, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

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