Chrome 87 的新功能

Pete LePage

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

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

我叫 Pete LePage，是在家工作和拍摄工作的好帮手。下面我们来深入了解一下 Chrome 87 中面向开发者的新功能！

Chrome 开发者峰会

Chrome 开发者峰会徽标

Chrome 开发者峰会将于 12 月 9 日和 10 日拉开帷幕，第 8 章即将开幕。 不过这一次，我们是临近你！我们将带来所有最新动态、大量新内容和众多 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 撰写的在服务工作器中处理范围请求一文。

源试用：字体访问 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);
}

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

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