Cette page a été traduite par l'API Cloud Translation.

Nouveautés de Chrome 94

Pete LePage

Voici les informations à retenir :

L'espace colorimétrique par défaut des éléments <canvas> est désormais défini officiellement dans la spécification comme sRVB. Vous pouvez le remplacer par Display P3.
WebCodecs est un nouveau moyen d'accéder aux codecs audio et vidéo intégrés, ce qui est important pour le streaming de jeux, les éditeurs vidéo, etc.
WebGPU commence son essai en phase de développement.
Le PWA Summit aura lieu les 6 et 7 octobre.
Et ce n'est pas tout : d'autres fonctionnalités sont disponibles.

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 en termes de couleur à l'aide de sRGB. Auparavant, sRGB était une convention, mais n'était pas défini explicitement dans les spécifications.

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'ajouter une vidéo à 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 nécessite généralement d'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. Grâce aux API disponibles via WebCodecs, j'ai pu créer rapidement une application Web qui lit un fichier et exporte les fichiers appropriés pour le Web.

Chemin d'un canevas ou d'un ImageBitmap vers le réseau ou vers le stockage — Chemin d'accès d'un `Canvas` ou d'un `ImageBitmap` au réseau ou au 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 de montrer quelque chose d'utile en 30 secondes. Consultez donc Traitement vidéo avec WebCodecs sur web.dev pour en savoir plus avec beaucoup de code et quelques 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.

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ès 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. Il s'agit d'une conférence en ligne sans frais qui vise à aider tout le monde à 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.

L'API de clavier virtuel vous permet de mieux contrôler la façon et le moment où le clavier virtuel à l'écran s'affiche. 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 en savoir plus sur les modifications apportées à Chrome 94.

Pour vous tenir informé, abonnez-vous à la chaîne YouTube des 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 95 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.