Новое в Chrome 94

Пит ЛеПейдж

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

  • Цветовое пространство по умолчанию для элементов <canvas> теперь формально определено в спецификации как SRGB , и вы можете изменить его на Display P3 .
  • WebCodecs — это новый низкоуровневый способ доступа к встроенным аудио- и видеокодекам, важный для потоковых игр, видеоредакторов и т. п.
  • WebGPU начинает свое пробное использование.
  • Саммит PWA пройдет 6-7 октября.
  • И это еще не все.

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

Цветовое пространство по умолчанию для элементов canvas

Для некоторых пользователей важно, как цвет отображается на экране. Для фотографов, иллюстраторов и многих других цвета на экране должны соответствовать напечатанным. Начиная с Chrome 94, элементы <canvas> полностью управляются цветом с помощью sRGB . Ранее sRGB был общепринятым, но явно не определен в спецификации.

opts = {colorSpace:'display-p3'};
const ctx = canvas.getContext('2d', opts);

Что еще более важно, теперь вы можете указать, какое цветовое пространство использовать при создании 2D-объекта контекста рендеринга <canvas> или объекта ImageData , включая цветовое пространство P3.

Веб-кодеки

Поместить видео на страницу достаточно просто. Но если вам нужно сделать что-то немного более сложное и взаимодействовать с компонентами видеопотока, это сложно и обычно требует использования Web Assembly для отправки собственных кодеков !

Но отправка собственного кодека означает написание кода, который уже есть в браузере, и он не может воспользоваться аппаратным ускорением! API веб-кодеков позволяет использовать медиа-компоненты и кодеки, которые уже есть в браузере.

Лично мне всегда было трудно запомнить правильные ключи командной строки для кодирования видео для веба или для конвертации GIF в видеофайл. Используя API, доступные через WebCodecs, я мог быстро создать веб-приложение, которое считывает файл и экспортирует нужные файлы для веба.

Путь от Canvas или ImageBitmap к сети или хранилищу
Путь от Canvas или ImageBitmap к сети или хранилищу

Веб-приложения, которым требуется полный контроль над тем, как обрабатывается медиаконтент, например, видеоредакторы, видеоконференции, потоковые приложения и т. д. Доступ к встроенным в браузеры элементам управления медиа огромен.

Сложно показать что-то полезное за тридцать секунд, поэтому ознакомьтесь с разделом Обработка видео с помощью веб-кодеков на web.dev, где вы найдете подробное описание с большим количеством кода и несколькими интересными демонстрациями!

Веб-GPU

WebGPU — это новый API, который раскрывает современные графические возможности, в частности Direct3D 12, Metal и Vulkan. Вы можете думать о нем как о WebGL, но он обеспечивает доступ к более продвинутым функциям GPU, а также поддерживает выполнение общих вычислений на GPU .

Архитектурная схема, показывающая связь WebGPU между API ОС и Direct3D 12, Metal и Vulkan.
Схема архитектуры WebGPU

Начато тестирование Origin в Chrome 94, а Safari и Firefox в настоящее время работают над своими реализациями.

Демонстрация Babylon.js, демонстрирующая бурное море, смоделированное с использованием вычислительных шейдерных возможностей WebGPU.

У Франсуа есть отличная статья « Доступ к современным возможностям GPU с помощью WebGPU» на web.dev с подробностями и сравнением производительности умножения матриц, выполняемого на CPU и GPU. Вот подсказка. GPU выигрывает .

Саммит PWA

PWA Summit пройдет 6-7 октября. Это бесплатная онлайн-конференция, направленная на помощь всем в достижении успеха с помощью Progressive Web Apps. PWA Summit — это совместная работа людей из нескольких компаний, занимающихся созданием технологий PWA: Google, Intel, Microsoft и Samsung.

Масса отличных докладов и контента. Узнать больше и зарегистрироваться можно на PWASummit.org . Надеюсь увидеть вас там!

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

Конечно, есть еще много чего.

Приоритетный метод scheduler.postTask() позволяет планировать задачи и динамически изменять их приоритеты или отменять их все вместе.

Если вы когда-либо боролись с изменением макета при появлении полос прокрутки, свойство scrollbar-gutter сделает вас счастливыми. Оно обеспечивает контроль над наличием отступов полос прокрутки, позволяя вам предотвратить изменение макета при расширении контента.

Использование WebSQL в сторонних контекстах теперь устарело , и ожидается его удаление в Chrome 97. Стандарт Web SQL Database был отменен в ноябре 2010 года. Он никогда не был реализован в Firefox и был устарел в Safari в 2019 году. Он будет устарел и удален из Chrome, когда использование станет достаточно низким. Если вы все еще используете WebSQL, сейчас самое время начать планировать миграцию с него.

А API виртуальной клавиатуры дает вам больше контроля над тем, как и когда отображается виртуальная экранная клавиатура. Он позволяет вам явно контролировать любое поведение прокрутки или изменения в раскладке, когда клавиатура появляется или исчезает.

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

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

Подписаться

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

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