​Chrome 87新功能：支持操作相机、访问本地字体

Chrome 87 稳定版已对外发布，本次主要带来三个重大更新：

• 相机操作AP：平移，倾斜，变焦
• 范围请求的service worker支持
• 字体访问API

下面是 Chrome 开发者 Pete LePage 在 YouTube 中的视频介绍：

没字幕？不要紧，来看我的图文解读。

摄像头操作AP：平移，倾斜，变焦

从 Chrome 87 开始，一旦用户授予权限，就可以控制相机上的 PTZ 功能。

特征检测可能与你熟悉的工作方式不一样，你需要调用 navigator.mediaDevices.getSupportedContraints() 查看浏览器是不是支持 PTZ 。

const supports = navigator.mediaDevices.getSupportedConstraints();

if (supports.pan && supports.tilt && supports.zoom) {
  // Browser supports camera PTZ.
}

像所有其他强大的API一样，用户将需要授予摄像头的许可权，还需要授予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);
  });
}

你可以到 web.dev 的 https://web.dev/camera-pan-tilt-zoom/ 文章查看更多关于相机操作 API 的功能。

范围请求的service worker支持

HTTP 范围请求允许服务器只发送 HTTP 消息的一部分到客户端。范围请求在传送大的媒体文件，或者与文件下载的断点续传功能搭配使用时非常有用。其中较大的媒体文件可通过更流畅的播放，增强的清理和更好的暂停和恢复功能来改善用户体验。

假如在响应中存在 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)