Chrome 87 版的新功能

Chrome 第 87 版現已推出穩定版。

以下是一些注意事項:

我是 Pete LePage,負責在家工作, 現在來深入瞭解 Chrome 第 87 版開發人員有哪些新功能!

Chrome 開發人員高峰會

Chrome 開發人員高峰會標誌

Chrome 開發人員高峰會將於 12 月 9 日和 10 日再次舉辦,第 8 個章節。但這次,讓我們一起來吧。我們會推出所有最新消息、許多新內容 以及眾多 Chromies

此外,我們也將舉辦眾多精彩講座、研討會和諮詢時間等資源,我們也會在 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 發布絕佳的控制相機平移、傾斜和縮放功能,並提供程式碼範例、完整詳細說明要求權限的最佳方式,並提供示範,讓您可以試用,看看您的網路攝影機是否支援 PTZ。

範圍要求和 Service Worker

過去幾年來在主要瀏覽器中提供的 HTTP 範圍要求可允許伺服器將要求的資料分段傳送給用戶端。這對於大型媒體檔案特別實用,因為這類檔案能夠更順暢地播放、改善拖曳功能、更優異的暫停和繼續功能,從而改善使用者體驗。

過去,範圍要求和 Service 工作站無法順暢地搭配運作,強制開發人員必須建構相關解決方法。自 Chrome 第 87 版起,在 Service Worker 中透過網路將範圍要求傳送至網路,將「正常運作」。

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

如需範圍要求相關問題的說明和 Chrome 87 異動項目,請參閱 Jeff 的「處理 Service Worker 中的範圍要求」一文。

來源試用:字型存取 API

Photopea 圖片編輯器的螢幕截圖

將 Figma、Gravit Designer 和 Photopea 等設計應用程式帶到網路上,我們未來還會推出更多功能,雖然網路可以提供大量字型,但並非所有字型都可以在網路上找到。

對許多設計人員而言,有些字型是安裝在電腦中不可或缺的字型。例如公司標誌字型,或 CAD 和其他設計應用程式的特殊字型。

透過在 Chrome 87 版開始來源試用的字型存取 API,網站現在可以列出已安裝的字型,讓使用者存取系統中的所有字型。


// 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 的「使用進階字體排版搭配本機字型」一文,其中提供了所有詳細資訊,以及「來源試用」的連結,以便您自行試用。

其他更新

  • 可移轉串流 - ReadableStreamWritableStreamTransformStream 物件現在能夠做為引數傳遞至 postMessage()
  • 我們已實作 CSS 邏輯屬性和值規格最精細的 flow-relative 功能,包括簡寫和偏移,讓這些邏輯屬性和值更容易寫入。舉例來說,單一 margin-block 屬性可以取代不同的 margin-block-startmargin-block-end 規則。
  • ascent-overridedescent-overrideline-gap-override 新增了 @font-face 描述元,以覆寫字型的指標。
  • 目前有多個新的 text-decorationunderline 屬性。
  • 此外,還有幾項與跨來源隔離相關的異動。

其他資訊

這份文件僅涵蓋部分重點功能。請查看下方連結,瞭解 Chrome 87 版的其他異動。

訂閱

想要隨時掌握最新影片,並訂閱我們的 Chrome Developers YouTube 頻道,每當我們推出新影片時,您就會收到電子郵件通知。

我是 Pete LePage,當 Chrome 88 推出後,我會馬上說明 Chrome 的新功能!