Chrome 87新功能:支持操做相機、訪問本地字體


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: {pantruetilttruezoomtrue}};
  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源創計劃」,歡迎正在閱讀的你也加入,一塊兒分享。

相關文章
相關標籤/搜索