Neu in Chrome 94

Pete LePage

Dazu sollten Sie Folgendes wissen:

  • Der Standardfarbraum für <canvas>-Elemente ist jetzt in der Spezifikation als SRGB definiert. Sie können ihn in Display P3 ändern.
  • WebCodecs ist eine neue, niedrigstufige Möglichkeit, auf integrierte Audio- und Videocodecs zuzugreifen, was für das Streamen von Spielen, Video-Editoren usw. wichtig ist.
  • Der WebGPU-Ursprungstest beginnt.
  • Vom 6. bis 7. Oktober findet der PWA Summit statt.
  • Und es gibt noch viel mehr.

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

Standardfarbraum für canvas-Elemente

Für einige Nutzer ist es wichtig, wie Farben auf dem Bildschirm dargestellt werden. Für Fotografen, Illustratoren und viele andere müssen die Farben auf dem Bildschirm mit den gedruckten Farben übereinstimmen. Ab Chrome 94 werden <canvas>-Elemente vollständig farbverwaltet, wobei sRGB verwendet wird. Bisher war sRGB die Konvention, wurde aber in der Spezifikation nicht explizit definiert.

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

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

WebCodecs

Videos auf einer Seite einzufügen, ist ganz einfach. Wenn Sie jedoch etwas Komplexeres tun und mit den Komponenten eines Videostreams interagieren möchten, ist das schwierig und erfordert in der Regel, dass Sie WebAssembly verwenden, um eigene Codecs zu liefern.

Wenn Sie jedoch Ihren eigenen Codec versenden, müssen Sie Code schreiben, der bereits im Browser vorhanden ist. Außerdem kann er die Hardwarebeschleunigung nicht nutzen. Mit der Web Codecs API können Sie die Medienkomponenten und Codecs verwenden, die bereits im Browser vorhanden sind.

Ich persönlich hatte 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 Web-App erstellen, die eine Datei liest und die für das Web erforderlichen Dateien exportiert.

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

Web-Apps, die die vollständige Kontrolle über die Verarbeitung von Medieninhalten erfordern, z. B. Videobearbeitungs-, Videokonferenz- oder Streaming-Apps. Der Zugriff auf die integrierte Mediensteuerung des Browsers ist enorm.

Es ist schwierig, in 30 Sekunden etwas Nützliches zu zeigen. Auf web.dev finden Sie unter Video processing with WebCodecs (Videoverarbeitung mit WebCodecs) eine ausführliche Beschreibung mit viel Code und einigen coolen Demos.

WebGPU

WebGPU ist eine neue API, die moderne Grafikfunktionen wie Direct3D 12, Metal und Vulkan bereitstellt. Es ist vergleichbar mit WebGL, bietet aber Zugriff auf erweiterte GPU-Funktionen und unterstützt auch allgemeine Berechnungen auf der GPU.

Architekturdiagramm, das die WebGPU-Verbindung zwischen Betriebssystem-APIs und Direct3D 12, Metal und Vulkan zeigt.
WebGPU-Architekturdiagramm

In Chrome 94 wird ein Ursprungstest gestartet. Safari und Firefox arbeiten derzeit an ihren Implementierungen.

Eine Babylon.js-Demo eines rauen Meeres, das mit der Compute-Shader-Funktion von WebGPU simuliert wird.

François hat auf web.dev einen tollen Artikel mit dem Titel Access modern GPU features with WebGPU veröffentlicht, in dem er die Details beschreibt und die Leistung der Matrixmultiplikation auf der CPU und der GPU vergleicht. Hier ist ein Hinweis. Die GPU gewinnt.

PWA Summit

Vom 6. bis 7. Oktober findet der PWA Summit statt. Es handelt sich um eine kostenlose Onlinekonferenz, die allen helfen soll, mit progressiven Web-Apps erfolgreich zu sein. 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 eine Menge toller Vorträge und Inhalte. Weitere Informationen und die Möglichkeit zur Registrierung finden Sie unter PWASummit.org. Wir freuen uns auf Sie!

…und vieles mehr

Natürlich gibt es noch viel mehr.

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

Wenn Sie schon einmal mit einem Neulayout zu kämpfen hatten, als Scrollleisten angezeigt wurden, wird Sie die Property scrollbar-gutter freuen. Sie bietet Kontrolle über das Vorhandensein von Scrollleistenrändern, sodass Sie Layoutänderungen verhindern können, wenn der Inhalt erweitert wird.

Die Verwendung von WebSQL im Zusammenhang mit Drittanbietern wurde verworfen 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. Es wird eingestellt und aus Chrome entfernt, wenn die Nutzung gering genug ist. Wenn Sie WebSQL noch verwenden, ist jetzt ein guter Zeitpunkt, um die Migration zu planen.

Mit der API für die Bildschirmtastatur haben Sie mehr Kontrolle darüber, wie und wann die virtuelle Bildschirmtastatur angezeigt wird. So können Sie das Scrollverhalten oder Änderungen am Layout explizit steuern, wenn die Tastatur ein- oder ausgeblendet wird.

Weitere Informationen

Dies sind nur einige der wichtigsten Neuerungen. Weitere Änderungen in Chrome 94 finden Sie unter den folgenden Links.

Abonnieren

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

Ich bin Pete LePage und sobald Chrome 95 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.