Chrome 87
穩定版已對外發布,本次主要帶來三個重大更新:web
-
相機操做AP:平移,傾斜,變焦 -
範圍請求的 service worker
支持 -
字體訪問API
下面是 Chrome
開發者 Pete LePage
在 YouTube
中的視頻介紹:瀏覽器
沒字幕?沒關係,來看個人圖文解讀。服務器
攝像頭操做AP:平移,傾斜,變焦
從 Chrome 87
開始,一旦用戶授予權限,就能夠控制相機上的 PTZ
功能。微信
特徵檢測可能與你熟悉的工做方式不同,你須要調用 navigator.mediaDevices.getSupportedContraints()
查看瀏覽器是否是支持 PTZ
。app
const supports = navigator.mediaDevices.getSupportedConstraints();
if (supports.pan && supports.tilt && supports.zoom) {
// Browser supports camera PTZ.
}
像全部其餘強大的API同樣,用戶將須要授予攝像頭的許可權,還須要授予PTZ功能許可權。curl
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()
會告訴你相機都支持什麼功能。async
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()
來調整平移,傾斜和縮放。ide
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);
});
}
你能夠到
web.dev
的https://web.dev/camera-pan-tilt-zoom/
文章查看更多關於相機操做API
的功能。字體
範圍請求的service worker
支持
HTTP 範圍請求容許服務器只發送 HTTP 消息的一部分到客戶端。範圍請求在傳送大的媒體文件,或者與文件下載的斷點續傳功能搭配使用時很是有用。其中較大的媒體文件可經過更流暢的播放,加強的清理和更好的暫停和恢復功能來改善用戶體驗。fetch
假如在響應中存在 Accept-Ranges
首部(而且它的值不爲 none
),那麼表示該服務器支持範圍請求。
curl -I http://i.imgur.com/z4d4kWk.jpg
HTTP/1.1 200 OK
...
Accept-Ranges: bytes
Content-Length: 146515
若是站點未發送 Accept-Ranges
首部,那麼它們有可能不支持範圍請求。一些站點會明確將其值設置爲 "none",以此來代表不支持。
在之前,範圍請求和 service worker
不能很好的協同工做,從 Chrome 87
開始,你能夠很好的將二者配合使用:
self.addEventListener('fetch', (event) => {
// The Range: header will pass through
// in browsers that behave correctly.
event.respondWith(fetch(event.request));
});
你能夠到
web.dev
的https://web.dev/sw-range-requests/
文章查看更多關於二者配合使用的內容。
字體訪問API
Figma,Gravit
和 Photopea
都是很是棒的設計軟件,他爲咱們設計出了很是多優秀的內容,對於許多設計師來講,他們的計算機上安裝了一些對他們的工做相當重要的字體。藉助字體訪問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)
本文分享自微信公衆號 - 全棧大佬的修煉之路(gh_7795af32a259)。
若有侵權,請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」,歡迎正在閱讀的你也加入,一塊兒分享。