Chrome 87 版的新功能

Pete LePage

Chrome 87 現已開始推出穩定版。

以下是一些注意事項：

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

Chrome 開發人員高峰會

Chrome 開發人員高峰會標誌

Chrome 開發人員高峰會第 8 章將於 12 月 9 日和 10 日登場。但這次我們會前往你的住所。我們將提供所有最新更新、大量新內容和許多 Chrome 相關資訊。

我們將舉辦許多精彩的演講、工作坊和諮詢時間等活動，並在 YouTube 即時通訊中解答你的問題。 進一步瞭解，並瞭解如何不只觀看，還能參與其中！

攝影機平移、傾斜、縮放

Google 多數會議室都提供具備平移、傾斜和縮放功能的攝影機，讓攝影機可以對準房間中的參與者。不過，除了高級會議攝影機支援 PTZ (平移、傾斜、縮放) 功能外，許多網路攝影機也支援這項功能。

自 Chrome 87 起，只要使用者授予權限，您就能控制攝影機的 PTZ 功能。

功能偵測與您可能習慣的方式略有不同。您必須呼叫 navigator.mediaDevices.getSupportedConstraints()，才能查看瀏覽器是否支援 PTZ。

const supports = navigator.mediaDevices.getSupportedConstraints();

if (supports.pan && supports.tilt && supports.zoom) {
  // Browser supports camera PTZ.
}

PTZ 的權限提示

接著，就像其他強大的 API 一樣，使用者需要授予相機和 PTZ 功能的權限。

如要要求 PTZ 功能的權限，請使用 PTZ 限制條件呼叫 navigator.mediaDevices.getUserMedia()。這會提示使用者同時授予一般攝影機和具備 PTZ 權限的攝影機權限。


try {
  const opts = {video: {pan: true, tilt: true, zoom: true}};
  const stream = await navigator.mediaDevices.getUserMedia(opts);
  document.querySelector("#video").srcObject = stream;
} catch (error) {
  // User denies prompt, or
  // matching media is not available.
}

最後，呼叫 MediaStreamTrack.getSettings() 會告訴您相機支援哪些功能。

const [videoTrack] = stream.getVideoTracks();
const capabilities = videoTrack.getCapabilities();
const settings = videoTrack.getSettings();

if ('pan' in settings) {
  enablePan(capabilities, settings);
}
// Similar for tilt and zoom...

使用者授予權限後，您就可以呼叫 videoTrack.applyConstraints() 來調整平移、傾斜和縮放功能。

function enablePan(capabilities, settings) {
  const input = document.getElementById('rangePan');
  input.min = capabilities.pan.min;
  input.max = capabilities.pan.max;
  input.step = capabilities.pan.step;
  input.value = settings.pan;

  input.addEventListener('input', async () => {
    const opts = { advanced: [{ pan: input.value }] };
    await videoTrack.applyConstraints(opts);
  });
}

我個人很期待 PTZ，這樣我就可以隱藏廚房的凌亂，但你必須觀看影片才能看到這一點！

Francois 在 web.dev 上發布了一篇很棒的文章「Control camera pan, tilt, and zoom」，其中提供程式碼範例、完整的權限要求最佳做法，以及示範，讓您可以試用，並瞭解您的網路攝影機是否支援 PTZ。

範圍要求和 Service Worker

HTTP 範圍要求已在主要瀏覽器中提供多年，可讓伺服器以區塊形式將要求的資料傳送至用戶端。這對於大型媒體檔案特別實用，因為這類檔案可透過更流暢的播放、更進步的快速瀏覽，以及更完善的暫停和繼續功能，提升使用者體驗。

以往，範圍要求和服務工作站無法順利搭配運作，因此開發人員必須建立因應做法。從 Chrome 87 開始，從服務工作者內部將範圍要求傳送至網路就會「正常運作」。

self.addEventListener('fetch', (event) => {
  // The Range: header will pass through
  // in browsers that behave correctly.
  event.respondWith(fetch(event.request));
});

如要瞭解範圍要求的相關問題，以及 Chrome 87 的異動內容，請參閱 web.dev 的處理 Service Worker 中的範圍要求一文。

原點測試：字型存取 API

Photopea 圖片編輯器的螢幕截圖

將 Figma、Gravit Designer 和 Photopea 等設計應用程式帶到網頁上，是個很棒的做法，而且我們還會推出更多這類應用程式。雖然網站可以提供大量字型，但並非所有字型都能在網站上使用。

許多設計師都會在電腦上安裝一些對工作至關重要的字型。例如公司標誌字型，或 CAD 和其他設計應用程式的專用字型。

透過字型存取 API (在 Chrome 87 中啟動原點試用版)，網站現在可以列舉已安裝的字型，讓使用者存取系統上的所有字型。


// Query for all available fonts and log metadata.
const fonts = navigator.fonts.query();
try {
  for await (const metadata of fonts) {
    console.log(`${metadata.family} (${metadata.fullName})`);
  }
} catch (err) {
  console.error(err);
}

// Roboto (Roboto Black)
// Roboto (Roboto Black Italic)
// Roboto (Roboto Bold)

網站可以從較低層級鉤掛，以便存取字型位元組，讓網站執行自己的 OpenType 版面配置實作，或在字形形狀上執行向量篩選器或轉換。

const fonts = navigator.fonts.query();
try {
  for await (const metadata of fonts) {
    const sfnt = await metadata.blob();
    makeMagic(metadata.family, sfnt);
  }
} catch (err) {
  console.error(err);
}

請參閱 Tom 在 web.dev 的「使用進階字體排版和本機字型」一文，瞭解所有細節，以及來源試用的連結，方便您自行嘗試。

其他

  • 可轉移的串流：ReadableStream、WritableStream 和 TransformStream 物件現在可做為引數傳遞至 postMessage()。
  • 我們已實作 CSS 邏輯屬性和值規格中最精細的 flow-relative 功能，包括簡寫和偏移，讓這些邏輯屬性和值更容易編寫。舉例來說，單一 margin-block 資源可取代個別的 margin-block-start 和 margin-block-end 規則。
  • 在 ascent-override、descent-override 和 line-gap-override 中新增 @font-face 描述元，以覆寫字型的指標。
  • 有幾個新的 text-decoration 和 underline 屬性。
  • 並且有許多與跨來源隔離相關的變更。

延伸閱讀

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

訂閱

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

我是 Pete LePage，Chrome 88 一推出，我就會在這裡告訴你 Chrome 的新功能！