Nieuw in Chrome 94

Pete LePage

Dit is wat u moet weten:

  • De standaardkleurruimte voor <canvas> -elementen is nu formeel gedefinieerd in de specificatie als SRGB , en u kunt dit wijzigen naar Display P3 .
  • WebCodecs is een nieuwe, eenvoudige manier om toegang te krijgen tot ingebouwde audio- en videocodecs, belangrijk voor het streamen van games, videobewerking en dergelijke.
  • WebGPU start met zijn oorspronkelijke proef.
  • De PWA Summit vindt plaats op 6 en 7 oktober.
  • En er is nog veel meer .

Ik ben Pete LePage en ik werk en fotografeer vanuit huis. Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 94.

Standaardkleurruimte voor canvas

Hoe kleur op het scherm wordt weergegeven, is voor sommige gebruikers cruciaal. Voor fotografen, illustratoren en vele anderen moeten de kleuren op het scherm overeenkomen met wat er wordt afgedrukt. Vanaf Chrome 94 worden <canvas> -elementen volledig kleurbeheerd met behulp van sRGB . Voorheen was sRGB een conventie, maar niet expliciet gedefinieerd in de specificatie.

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

Belangrijker nog, u kunt nu opgeven welke kleurruimte moet worden gebruikt bij het maken van een <canvas> -renderingcontext-2D-object of een ImageData object, inclusief de P3-kleurruimte.

WebCodecs

Video op een pagina plaatsen is eenvoudig genoeg. Maar als je iets complexer moet doen en met de componenten van een videostream moet werken, is het lastig. Vaak heb je dan Web Assembly nodig om je eigen codecs te leveren!

Maar je eigen codec installeren betekent code schrijven die de browser al heeft, en die kan dan geen gebruik maken van hardwareversnelling! De Web Codecs API maakt het mogelijk om de mediacomponenten en codecs te gebruiken die al in de browser aanwezig zijn.

Persoonlijk heb ik altijd moeite gehad met het onthouden van de juiste commandoregelopties om een ​​video te coderen voor het web, of om een ​​GIF naar een videobestand te converteren. Met behulp van de API's die beschikbaar zijn via WebCodecs, kon ik snel een webapp bouwen die een bestand leest en de juiste bestanden exporteert die nodig zijn voor het web.

Het pad van een Canvas of een ImageBitmap naar het netwerk of naar de opslag
Het pad van een Canvas of een ImageBitmap naar het netwerk of naar de opslag

Webapps die volledige controle vereisen over de manier waarop mediacontent wordt verwerkt, zoals video-editors, videoconferenties, streaming-apps, enzovoort. De toegang tot de ingebouwde mediabediening van de browser is enorm.

Het is lastig om in dertig seconden iets nuttigs te laten zien, dus bekijk Video processing with WebCodecs op web.dev voor een diepgaande duik met veel code en een aantal coole demo's!

WebGPU

WebGPU is een nieuwe API die moderne grafische mogelijkheden beschikbaar maakt, met name Direct3D 12, Metal en Vulkan. Je kunt het zien als WebGL, maar het biedt toegang tot geavanceerdere functies van de GPU en biedt ook ondersteuning voor het uitvoeren van algemene berekeningen op de GPU .

Architectuurdiagram dat de verbinding van WebGPU's tussen OS API's en Direct3D 12, Metal en Vulkan laat zien.
WebGPU-architectuurdiagram

Er wordt een proef gestart in Chrome 94 en zowel Safari als Firefox werken momenteel aan hun implementaties.

Een Babylon.js-demo van een ruwe zee die wordt gesimuleerd met behulp van de compute shader-functie van WebGPU.

François heeft een geweldig artikel, Access modern GPU features with WebGPU op web.dev, met de details, en vergelijkt de prestaties van matrixvermenigvuldiging op de CPU met die op de GPU. Hier is een hint: de GPU wint .

PWA-top

De PWA Summit vindt plaats op 6 en 7 oktober. Het is een gratis online conferentie die erop gericht is iedereen te helpen succesvol te zijn met Progressive Web Apps. De PWA Summit is een samenwerking tussen mensen van een handvol verschillende bedrijven die betrokken zijn bij de ontwikkeling van PWA-technologieën: Google, Intel, Microsoft en Samsung.

Er zijn een heleboel geweldige presentaties en content. Je kunt meer leren en je registreren op PWASummit.org . Ik hoop je daar te zien!

En nog veel meer!

Er is natuurlijk nog veel meer.

Met de geprioriteerde scheduler.postTask() methode kunt u taken plannen en hun prioriteiten dynamisch wijzigen, of ze helemaal annuleren.

Als je ooit problemen hebt gehad met een nieuwe lay-out wanneer schuifbalken verschijnen, dan is de eigenschap scrollbar-gutter een goede optie. Deze biedt controle over de aanwezigheid van schuifbalk-gutter, zodat je kunt voorkomen dat de lay-out wordt gewijzigd wanneer de content groter wordt.

Het gebruik van WebSQL in contexten van derden is nu verouderd en zal naar verwachting in Chrome 97 worden verwijderd. De Web SQL Database-standaard werd in november 2010 verlaten. Het werd nooit geïmplementeerd in Firefox en werd in 2019 in Safari verouderd. Het zal worden verouderd en uit Chrome worden verwijderd wanneer het gebruik laag genoeg is. Als u WebSQL nog steeds gebruikt, is dit een goed moment om te beginnen met het plannen van uw migratie.

En de virtuele toetsenbord-API geeft je meer controle over hoe en wanneer het virtuele toetsenbord op het scherm wordt weergegeven. Hiermee kun je expliciet het scrollgedrag bepalen of de lay-out wijzigen wanneer het toetsenbord verschijnt of verdwijnt.

Verder lezen

Dit zijn slechts enkele van de belangrijkste hoogtepunten. Bekijk de onderstaande links voor aanvullende wijzigingen in Chrome 94.

Abonneren

Om op de hoogte te blijven, kunt u zich abonneren op het YouTube-kanaal Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage en zodra Chrome 95 uitkomt, vertel ik u graag wat er nieuw is in Chrome!