Chrome 94 版的新功能

以下是一些注意事項:

  • <canvas> 元素的預設色彩空間現在已在規格中正式定義為 SRGB,您可以將其變更為 Display P3
  • WebCodecs 是一種新的低階方式,可存取內建的音訊和視訊轉碼器,這對串流遊戲、影片編輯器等應用程式非常重要。
  • WebGPU 開始測試。
  • PWA 高峰會將於 10 月 6 日至 7 日登場。
  • 還有許多其他功能。

我是 Pete LePage,我在家工作並拍攝影片,現在就讓我們一起來看看 Chrome 94 有哪些新功能吧!

canvas 元素的預設色彩空間

部分使用者會非常在意畫面上顯示的顏色。對於攝影師、平面設計師和其他許多人來說,螢幕上的顏色必須與印刷品相符。自 Chrome 94 版起,<canvas> 元素會使用 sRGB 進行完整的色彩管理。先前 sRGB 是慣例,但並未在規格中明確定義。

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

更重要的是,您現在可以指定在建立 <canvas> 轉譯內容 2D 物件或 ImageData 物件時要使用的色彩空間,包括 P3 色彩空間。

WebCodecs

將影片加入網頁很簡單,不過,如果您需要執行較複雜的操作,並與影片串流的元件互動,就會比較困難,通常需要使用 Web Assembly 來發布您自己的編解碼器

不過,提供自己的編解碼就表示要編寫瀏覽器已具備的程式碼,而這類程式碼無法充分利用硬體加速功能!Web Codecs API 可讓您使用瀏覽器中現有的媒體元件和編解碼。

就我個人而言,我一直很難記得正確的指令列切換鍵,以便為網路編碼影片,或將 GIF 轉換為影片檔案。透過 WebCodecs 提供的 API,我可以快速建構網路應用程式,讀取檔案並匯出網路所需的正確檔案。

從 Canvas 或 ImageBitmap 到網路或儲存空間的路徑
CanvasImageBitmap 到網路或儲存空間的路徑

需要完全掌控媒體內容處理方式的網頁應用程式,例如影片編輯器、視訊會議、串流應用程式等。媒體控制項內建的瀏覽器存取權非常重要。

在 30 秒內顯示任何實用內容都很困難,因此請參閱 web.dev 上的「使用 WebCodecs 處理影片」,深入瞭解相關程式碼和幾個很酷的示範!

WebGPU

WebGPU 是新型 API,可提供新型圖形功能,特別是 Direct3D 12、Metal 和 Vulkan。您可以將其視為 WebGL,但它可讓您存取 GPU 的進階功能,並支援在 GPU 上執行一般運算

架構圖:顯示 WebGPU 在 OS API 和 Direct3D 12、Metal 和 Vulkan 之間的連線。
WebGPU 架構圖

我們已在 Chrome 94 中開始來源試用版,Safari 和 Firefox 也正在進行相關實作。

Babylon.js 示範,使用 WebGPU 的運算著色器功能模擬波濤洶湧的海浪。

François 在 web.dev 上發表了一篇很棒的文章「使用 WebGPU 存取新式 GPU 功能」,其中詳細說明並比較在 CPU 和 GPU 上執行矩陣乘法的效能。以下提供提示。GPU 勝出

PWA 高峰會

PWA 高峰會即將於 10 月 6 日至 7 日登場。這是一場免費的線上研討會,旨在協助所有人成功使用漸進式網頁應用程式。PWA 峰會是 Google、Intel、Microsoft 和 Samsung 等幾家參與 PWA 技術開發的不同公司之間的合作活動。

這裡有許多精彩的演講和內容。如要瞭解詳情及報名參加,請前往 PWASummit.org。期待在活動會場上與你相見!

還有更多獎品等著您!

當然,還有許多其他功能。

您可以使用優先順序 scheduler.postTask() 方法排定工作,並動態變更其優先順序,或全部取消。

如果您曾經在捲動條出現時遇到重新版面配置問題,scrollbar-gutter 屬性將會讓您滿意。可控管捲軸邊界是否顯示,讓您在內容展開時避免版面配置變更。

在第三方內容中使用 WebSQL 已淘汰,預計會在 Chrome 97 中移除。Web SQL Database 標準已於 2010 年 11 月停用。這項功能從未在 Firefox 中實作,並於 2019 年淘汰。當使用率降到一定程度時,這項功能就會淘汰並從 Chrome 中移除。如果您仍在使用 WebSQL,現在是開始規劃遷移的理想時機。

虛擬鍵盤 API 可讓您進一步控制虛擬螢幕小鍵盤的顯示方式和時間。您可以使用這項功能明確控制任何捲動行為,或在鍵盤顯示或消失時變更版面配置。

延伸閱讀

這份文件僅涵蓋部分重點。請參閱下方連結,瞭解 Chrome 94 的其他變更。

訂閱

如要隨時掌握最新消息,請訂閱 Chrome 開發人員 YouTube 頻道,這樣一來,我們發布新影片時,你就會收到電子郵件通知。

我是 Pete LePage,Chrome 95 一推出,我就會在這裡告訴你 Chrome 有哪些新功能!