Новое в Chrome 87

Pete LePage

Chrome 87 уже начинает распространяться как стабильная версия.

Вот что вам нужно знать:

• Chrome Dev Summit вернется 9 и 10 декабря.
• Теперь вы можете управлять панорамированием, наклоном и масштабированием на веб-камерах, которые поддерживают эту функцию.
• Запросы диапазона и сервис-воркеры не требуют стольких обходных путей.
• Начинается пробная версия API доступа к шрифтам .
• И это еще не все .

Меня зовут Пит ЛеПейдж , я работаю и снимаю из дома. Давайте углубимся в детали и посмотрим, что нового появилось в Chrome 87 для разработчиков!

Саммит разработчиков Chrome

Chrome Dev Summit вернется 9 и 10 декабря с 8-й главой. Но на этот раз мы идем к вам. Мы приносим все последние обновления, много нового контента и много Chromies.

Будет много замечательных докладов , семинаров, рабочих часов и т. д., и мы будем в чате 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.
}

Затем, как и во всех других мощных API, пользователю необходимо будет предоставить разрешение на камеру, а также на функции PTZ.

Чтобы запросить разрешение на функциональность PTZ, вызовите navigator.mediaDevices.getUserMedia() с ограничениями PTZ. Это попросит пользователя предоставить разрешения как обычной камере, так и камере с 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, так как теперь я могу скрыть беспорядок на своей кухне, но вам придется посмотреть видео, чтобы в этом убедиться!

У Франсуа есть отличная статья Управление панорамированием, наклоном и зумом камеры на web.dev с примерами кода, подробными инструкциями о лучшем способе запроса разрешения и демонстрацией, чтобы вы могли попробовать ее и узнать, поддерживает ли ваша веб-камера PTZ.

Запросы на диапазон и работники сферы услуг

Запросы диапазона HTTP , которые доступны в основных браузерах уже несколько лет, позволяют серверам отправлять запрашиваемые данные клиенту порциями. Это особенно полезно для больших медиафайлов, где пользовательский опыт улучшается за счет более плавного воспроизведения, улучшенной прокрутки и улучшенных функций паузы и возобновления.

Исторически запросы диапазона и рабочие сервисов не работали вместе, заставляя разработчиков создавать обходные пути. Начиная с Chrome 87, передача запросов диапазона в сеть изнутри рабочего сервиса будет «просто работать».

self.addEventListener('fetch', (event) => {
  // The Range: header will pass through
  // in browsers that behave correctly.
  event.respondWith(fetch(event.request));
});

Объяснение проблем с запросами диапазона и изменений в Chrome 87 см. в статье Джеффа Обработка запросов диапазона в сервис-воркере на web.dev.

Пробная версия Origin: API доступа к шрифтам

Привнесение в веб таких дизайнерских приложений, как Figma, Gravit Designer и Photopea, — это здорово, и мы видим, что их будет гораздо больше. Хотя веб может предложить множество шрифтов, не все из них доступны в сети.

У многих дизайнеров на компьютере установлены некоторые шрифты, которые имеют решающее значение для их работы. Например, шрифты корпоративных логотипов или специализированные шрифты для САПР и других дизайнерских приложений.

Благодаря 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);
}

Ознакомьтесь со статьей Тома «Использование расширенной типографики с локальными шрифтами» на web.dev, где вы найдете все подробности и ссылку на пробную версию Origin, чтобы вы могли попробовать ее самостоятельно.

И многое другое

• Передаваемые потоки — объекты ReadableStream , WritableStream и TransformStream теперь можно передавать в качестве аргументов postMessage() .
• Мы реализовали наиболее детализированные flow-relative функции спецификации CSS Logical Properties and Values, включая сокращения и смещения, чтобы сделать эти логические свойства и значения немного проще для написания. Например, одно свойство margin-block может заменить отдельные правила margin-block-start и margin-block-end .
• Добавлены новые дескрипторы @font-face к ascent-override , descent-override и line-gap-override для переопределения метрик шрифта.
• Появилось несколько новых свойств text-decoration и underline .
• И есть ряд изменений, связанных с изоляцией между источниками.

Дальнейшее чтение

Это охватывает только некоторые из основных моментов. Проверьте ссылки ниже для дополнительных изменений в Chrome 87.

• Что нового в Chrome DevTools (87)
• Устаревание и удаление Chrome 87
• Обновления ChromeStatus.com для Chrome 87
• Что нового в JavaScript в Chrome 87
• Список изменений в исходном репозитории Chromium

Подписаться

Хотите быть в курсе наших видео? Подпишитесь на наш канал Chrome Developers на YouTube , и вы будете получать уведомления по электронной почте каждый раз, когда мы выпускаем новое видео.

Меня зовут Пит ЛеПейдж, и как только выйдет Chrome 88, я сразу же расскажу вам, что нового в Chrome!