Новое в Chrome 87

Pete LePage

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

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

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

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

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

Chrome Dev Summit вернется 9 и 10 декабря с восьмой главой. Но на этот раз мы идем к вам. Мы представляем все последние обновления, много нового контента и множество 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() .
• Мы реализовали наиболее детализированные функции спецификации CSS Logical Properties and Values, flow-relative , включая сокращения и смещения, чтобы упростить запись этих логических свойств и значений. Например, одно свойство 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

Подписаться

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

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