Chrome 第 87 版現已推出穩定版。
以下是一些注意事項:
- Chrome 開發人員高峰會將於 12 月 9 日和 10 日再次登場。
- 你現在可以在支援的網路攝影機中控制平移、傾斜和縮放功能。
- 範圍要求和服務工作站不需要太多解決方法。
- 字型存取 API 會啟動來源試用。
- 還有其他功能。
我是 Pete LePage,負責在家工作, 現在來深入瞭解 Chrome 第 87 版開發人員有哪些新功能!
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.
}
接著,如同其他所有強大的 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
將 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 的「使用進階字體排版搭配本機字型」一文,其中提供了所有詳細資訊,以及「來源試用」的連結,以便您自行試用。
其他更新
- 可移轉串流 -
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 開發人員工具的新功能 (87)
- Chrome 87 淘汰和移除
- ChromeStatus.com 為 Chrome 87 更新
- Chrome 87 版 JavaScript 新功能
- Chromium 來源存放區變更清單
訂閱
想要隨時掌握最新影片,並訂閱我們的 Chrome Developers YouTube 頻道,每當我們推出新影片時,您就會收到電子郵件通知。
我是 Pete LePage,當 Chrome 88 推出後,我會馬上說明 Chrome 的新功能!