Chrome 87 的新功能

皮特·莱佩奇

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

以下是您有必要知道的信息：

我是 Pete LePage，在家工作和拍摄，下面就来深入了解一下 Chrome 87 为开发者提供了哪些新功能！

Chrome 开发者峰会

Chrome 开发者峰会徽标

Chrome 开发者峰会将于 12 月 9 日和 10 日再度举行，届时会介绍第 8 章。但这一次，我们要过来。我们将推出所有最新更新、大量新内容 以及大量 Chrome 浏览器

我们会举行大量精彩的讲座、研讨会、咨询交流时间活动等，我们会在 YouTube 聊天中解答您的问题。 了解详情，并了解如何不仅仅是观看，更重要的是参与！

相机平移、倾斜、缩放

Google 的大多数会议室都配有具有平移、倾斜和缩放功能的摄像头，以便摄像头可以对准会议室中的人员。但是，支持云台的精美会议摄像头不只是支持平移、倾斜和缩放，许多网络摄像头也都支持云摄像头。

从 Chrome 87 开始，用户授予权限后，您就可以控制摄像头上的云台功能。

功能检测与您熟悉的可能略有不同。您需要调用 navigator.mediaDevices.getSupportedConstraints()，以查看浏览器是否支持 PTZ。

const supports = navigator.mediaDevices.getSupportedConstraints();

if (supports.pan && supports.tilt && supports.zoom) {
  // Browser supports camera 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);
  });
}

就我个人而言，我很喜欢云台卫星，我可以把杂乱的厨房藏起来，但必须看视频才能知道！

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 中所做的更改，请参阅 Jeff 在 web.dev 上发表的在 Service Worker 中处理范围请求一文。

源试用：Font Access API

Photopea 图片编辑器的屏幕截图

将 Figma、Gravit Designer 和 Photopea 等设计应用带入网络真是太棒了，我们还会看到更多新功能。虽然网页能够提供大量字体，但网页中的内容并不是全部的。

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

借助字体访问 API（从 Chrome 87 中开始源试用），网站现在可以枚举已安装的字体，让用户能够访问其系统上的所有字体。


// 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);
}

请参阅 Tom 在 web.dev 上的文章使用本地字体使用高级排版一文（其中包含所有详细信息），以及指向源试用的链接，以便您可以亲自尝试。

其他数据

  • 可传输数据流 - 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