Chrome 87 现已开始发布为稳定版。
以下是您有必要知道的信息:
- Chrome 开发者峰会将于 12 月 9 日和 10 日再度召开。
- 你现在可以在支持此功能的摄像头上控制平移、倾斜和缩放。
- 范围请求和 Service Worker 不需要那么多的解决方法。
- 字体访问 API 开始进行源试用。
- 此外,还有许多其他功能。
我是 Pete LePage,在家工作和拍摄,下面就来深入了解一下 Chrome 87 为开发者提供了哪些新功能!
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
将 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 开发者工具的新变化 (87)
- Chrome 87 弃用和移除
- Chrome 87 版 ChromeStatus.com 更新
- Chrome 87 中的 JavaScript 的新变化
- Chromium 源代码库变更列表
订阅
如果您想及时了解我们视频的最新动态,请订阅我们的 Chrome Developers YouTube 频道。每当我们发布新视频时,您都会收到电子邮件通知。
我叫 Pete LePage