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)腾讯云开发者
