Neu in Chrome 94

Dazu sollten Sie Folgendes wissen:

  • Der Standardfarbraum für <canvas>-Elemente ist in der Spezifikation jetzt formal als SRGB definiert. Sie können ihn in Display P3 ändern.
  • WebCodecs ist eine neue, Low-Level-Methode, um auf integrierte Audio- und Videocodecs zuzugreifen. Das ist wichtig für das Streamen von Spielen, Video-Editoren und ähnlichen Anwendungen.
  • Der Ursprungstest für WebGPU beginnt.
  • Der PWA Summit findet vom 6. bis 7. Oktober statt.
  • Und es gibt noch viele weitere.

Ich bin Pete LePage und arbeite und filme von zu Hause aus. Sehen wir uns an, was es in Chrome 94 für Entwickler Neues gibt.

Standardfarbraum für canvas-Elemente

Für einige Nutzer ist es entscheidend, wie Farben auf dem Bildschirm dargestellt werden. Für Fotografen, Druckereifachkräfte und viele andere müssen die Farben auf dem Bildschirm mit dem gedruckten Ergebnis übereinstimmen. Ab Chrome 94 werden <canvas>-Elemente vollständig mit sRGB verwaltet. Bisher war sRGB eine Konvention, aber nicht explizit in der Spezifikation definiert.

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

Noch wichtiger ist, dass Sie jetzt angeben können, welcher Farbraum beim Erstellen eines <canvas>-Rendering-Kontext-2D-Objekts oder eines ImageData-Objekts verwendet werden soll, einschließlich des P3-Farbraums.

WebCodecs

Es ist ganz einfach, ein Video auf einer Seite einzufügen. Wenn Sie jedoch etwas etwas Komplexeres tun und mit den Komponenten eines Videostreams interagieren möchten, ist das schwierig und Sie müssen in der Regel Web Assembly verwenden, um Ihre eigenen Codecs bereitzustellen.

Wenn Sie jedoch Ihren eigenen Codec bereitstellen, müssen Sie Code schreiben, den der Browser bereits hat, und die Hardwarebeschleunigung kann nicht genutzt werden. Mit der Web Codecs API können die bereits im Browser vorhandenen Medienkomponenten und Codecs verwendet werden.

Ich persönlich habe immer Schwierigkeiten, mich an die richtigen Befehlszeilenschalter zu erinnern, um ein Video für das Web zu codieren oder ein GIF in eine Videodatei zu konvertieren. Mit den über WebCodecs verfügbaren APIs konnte ich schnell eine Webanwendung erstellen, die eine Datei liest und die richtigen Dateien für das Web exportiert.

Der Pfad von einem Canvas oder einer ImageBitmap zum Netzwerk oder zum Speicher
Der Pfad von einem Canvas oder ImageBitmap zum Netzwerk oder zum Speicher

Web-Apps, die eine vollständige Kontrolle über die Verarbeitung von Medieninhalten erfordern, z. B. Video-Editoren, Videokonferenzen, Streaming-Apps usw. Der Zugriff auf die integrierten Mediensteuerungen der Browser ist enorm.

Es ist nicht einfach, in 30 Sekunden nützliche Inhalte zu zeigen. Sehen Sie sich daher die Videoverarbeitung mit WebCodecs auf web.dev an. Dort finden Sie eine detaillierte Beschreibung mit viel Code und ein paar coolen Demos.

WebGPU

WebGPU ist eine neue API, die moderne Grafikfunktionen bietet, insbesondere Direct3D 12, Metal und Vulkan. Sie können es sich wie WebGL vorstellen, aber es bietet Zugriff auf erweiterte Funktionen der GPU sowie Unterstützung für allgemeine Berechnungen auf der GPU.

Architekturdiagramm, das die Verbindung von WebGPUs zwischen Betriebssystem-APIs und Direct3D 12, Metal und Vulkan zeigt
Architekturdiagramm für WebGPU

In Chrome 94 wird ein Ursprungstest gestartet. Sowohl Safari als auch Firefox arbeiten derzeit an ihren Implementierungen.

Eine Babylon.js-Demo einer rauen See, die mit der Compute-Shader-Funktion von WebGPU simuliert wird.

François hat den Artikel Access modern GPU features with WebGPU (Zugriff auf moderne GPU-Features mit WebGPU) in web.dev mit Details erläutert und die Leistung der auf der CPU ausgeführten Matrixmultiplikation mit der Leistung der GPU verglichen. Hier ein Tipp: Die GPU gewinnt.

PWA Summit

Der PWA Summit findet vom 6. bis 7. Oktober statt. Es ist eine kostenlose Onlinekonferenz, die sich darauf konzentriert, allen bei der erfolgreichen Nutzung von Progressive Web-Apps zu helfen. Der PWA Summit ist eine Zusammenarbeit zwischen Mitarbeitern verschiedener Unternehmen, die an der Entwicklung von PWA-Technologien beteiligt sind: Google, Intel, Microsoft und Samsung.

Es gibt jede Menge großartiger Vorträge und Inhalte. Weitere Informationen und eine Registrierung finden Sie unter PWASummit.org. Ich freue mich auf Sie.

…und vieles mehr

Natürlich gibt es noch viel mehr.

Mit der priorisierten Methode scheduler.postTask() können Sie Aufgaben planen und ihre Prioritäten dynamisch ändern oder sie insgesamt abbrechen.

Wenn Sie schon einmal Probleme mit dem Neulayout hatten, wenn Bildlaufleisten angezeigt wurden, wird Ihnen die Property scrollbar-gutter gefallen. Sie können damit die Anwesenheit von scrollbaren Rändern steuern und so Layoutänderungen beim Ausweiten von Inhalten verhindern.

Die Verwendung von WebSQL in Drittanbieterkontexten ist jetzt eingestellt und wird voraussichtlich in Chrome 97 entfernt. Der Web SQL-Datenbankstandard wurde im November 2010 aufgegeben. Sie wurde nie in Firefox implementiert und 2019 in Safari eingestellt. Wenn die Nutzung zu gering ist, wird die Funktion eingestellt und aus Chrome entfernt. Wenn Sie WebSQL noch verwenden, ist jetzt ein guter Zeitpunkt, um mit der Planung der Migration zu beginnen.

Mit der Virtual Keyboard API haben Sie mehr Kontrolle darüber, wie und wann die virtuelle Bildschirmtastatur angezeigt wird. Sie können damit das Scrollen und Layoutänderungen steuern, die beim Ein- und Ausblenden der Tastatur auftreten.

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Informationen zu Änderungen in Chrome 94.

Abonnieren

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal von Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 95 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.