?Chrome 87新功能：支持操作相機(jī)、訪問本地字體
Chrome 87?穩(wěn)定版已對外發(fā)布，本次主要帶來三個重大更新：
相機(jī)操作AP：平移，傾斜，變焦 范圍請求的 service worker支持字體訪問API
下面是?Chrome?開發(fā)者?Pete LePage?在?YouTube?中的視頻介紹：
沒字幕？不要緊，來看我的圖文解讀。
攝像頭操作AP：平移，傾斜，變焦
從?Chrome 87?開始，一旦用戶授予權(quán)限，就可以控制相機(jī)上的?PTZ?功能。
特征檢測可能與你熟悉的工作方式不一樣，你需要調(diào)用?navigator.mediaDevices.getSupportedContraints()?查看瀏覽器是不是支持?PTZ?。
const?supports?=?navigator.mediaDevices.getSupportedConstraints();
if?(supports.pan?&&?supports.tilt?&&?supports.zoom)?{
??//?Browser?supports?camera?PTZ.
}
像所有其他強(qiáng)大的API一樣，用戶將需要授予攝像頭的許可權(quán)，還需要授予PTZ功能許可權(quán)。
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.
}
調(diào)用?MediaStreamTrack.getSettings()?會告訴你相機(jī)都支持什么功能。
const?[videoTrack]?=?stream.getVideoTracks();
const?capabilities?=?videoTrack.getCapabilities();
const?settings?=?videoTrack.getSettings();
if?('pan'?in?settings)?{
??enablePan(capabilities,?settings);
}
//?Similar?for?tilt?and?zoom...
用戶授予權(quán)限后，您可以調(diào)用?videoTrack.applyConstraints()?來調(diào)整平移，傾斜和縮放。
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/?文章查看更多關(guān)于相機(jī)操作?API?的功能。
范圍請求的service worker支持
HTTP 范圍請求允許服務(wù)器只發(fā)送 HTTP 消息的一部分到客戶端。范圍請求在傳送大的媒體文件，或者與文件下載的斷點(diǎn)續(xù)傳功能搭配使用時非常有用。其中較大的媒體文件可通過更流暢的播放，增強(qiáng)的清理和更好的暫停和恢復(fù)功能來改善用戶體驗(yàn)。
假如在響應(yīng)中存在?Accept-Ranges?首部（并且它的值不為?none），那么表示該服務(wù)器支持范圍請求。
curl?-I?http://i.imgur.com/z4d4kWk.jpg
HTTP/1.1?200?OK
...
Accept-Ranges:?bytes
Content-Length:?146515
如果站點(diǎn)未發(fā)送?Accept-Ranges?首部，那么它們有可能不支持范圍請求。一些站點(diǎn)會明確將其值設(shè)置為 "none"，以此來表明不支持。
在以前，范圍請求和?service worker?不能很好的協(xié)同工作，從?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/?文章查看更多關(guān)于兩者配合使用的內(nèi)容。
字體訪問API
Figma，Gravit?和?Photopea?都是非常棒的設(shè)計軟件，他為我們設(shè)計出了非常多優(yōu)秀的內(nèi)容，對于許多設(shè)計師來說，他們的計算機(jī)上安裝了一些對他們的工作至關(guān)重要的字體。借助字體訪問API，站點(diǎn)現(xiàn)在可以枚舉計算機(jī)中已安裝的字體，從而使用戶可以訪問其系統(tǒng)上的所有字體。
//?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)