Chrome 87 的新功能

Pete LePage

Chrome 87 现已开始向稳定版发布。

以下是您需要知晓的相关信息：

我是 Pete LePage，目前在家办公和录制视频。我们来深入了解一下 Chrome 87 中面向开发者的新功能吧！

Chrome 开发者峰会

Chrome 开发者峰会徽标

Chrome 开发者峰会第 8 届将于 12 月 9 日和 10 日举行。 不过，这次我们会主动与您联系。我们将带来所有最新动态、大量新内容和众多 Chrome 用户。

大会上有许多精彩演讲、研讨会、咨询时间等活动，我们也会在 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.
}

有关 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 Worker 无法很好地协同工作，这迫使开发者构建权宜解决方法。从 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 中的变化，请参阅 web.dev 上 Jeff 的文章在服务工作器中处理范围请求。

源代码测试：Font Access API

Photopea 图片编辑器的屏幕截图

将 Figma、Gravit Designer 和 Photopea 等设计应用引入到 Web 平台是一件好事，我们还会看到更多此类应用。虽然网络上有大量字体，但并非所有字体都能在网络上找到。

对于许多设计师来说，计算机上安装的一些字体对他们的工作至关重要。例如，公司徽标字体或适用于 CAD 和其他设计应用的专用字体。

借助在 Chrome 87 中启动源试用版的 font access 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);
}

请参阅 web.dev 上 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 Developers YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

我是 Pete LePage，Chrome 88 发布后，我会立即为您介绍 Chrome 中的新变化！