Nowości w Chrome 94

Pete LePage

Oto, co musisz wiedzieć na ten temat:

  • Domyślna przestrzeń kolorów dla elementów <canvas> jest teraz formalnie zdefiniowana w specyfikacji jako SRGB i możesz ją zmienić na Display P3.
  • WebCodecs to nowy, niski poziom dostępu do wbudowanych kodeków audio i wideo, który jest ważny w przypadku strumieniowania gier, edytorów wideo i nie tylko.
  • WebGPU rozpoczyna testowanie origin.
  • PWA Summit odbędzie się w dniach 6–7 października.
  • A do tego wiele więcej.

Jestem Pete LePage. Pracuję i nagrywam z domu. Przyjrzyjmy się nowościom dla programistów w Chrome 94.

Domyślna przestrzeń kolorów dla elementów canvas

Sposób renderowania kolorów na ekranie ma dla niektórych użytkowników kluczowe znaczenie. Fotografowie, ilustracje drukarskie i wiele innych muszą mieć taką samą kolorystykę na ekranie. Od wersji Chrome 94 elementy <canvas> są w pełni zarządzane kolorami za pomocą sRGB. Wcześniej sRGB była konwencją, ale nie była wyraźnie zdefiniowana w specyfikacji.

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

Co ważniejsze, możesz teraz określić, której przestrzeni kolorów chcesz użyć podczas tworzenia obiektu 2d kontekstu renderowania <canvas> lub obiektu ImageData, łącznie z przestrzenią kolorów P3.

WebCodecs

Umieszczenie filmu na stronie jest całkiem łatwe. Jeśli jednak potrzebujesz wykonać coś bardziej złożonego i wchodzić w interakcje z elementami strumienia wideo, jest to trudne i zwykle wymaga użycia Web Assembly, aby przesłać własne kodeki.

Jednak opracowanie własnego kodeka wymaga pisania kodu, który już ma w przeglądarce, i nie jest w stanie korzystać z akceleracji sprzętowej. Interfejs Web Codecs API umożliwia korzystanie z komponentów i kodeków multimediów, które są już w przeglądarce.

Osobiście zawsze miałem problemy z zapamiętaniem prawidłowych przełączników wiersza poleceń, które umożliwiają kodowanie filmów w internecie lub konwertowanie GIF-ów na pliki wideo. Dzięki interfejsom API dostępnym w WebCodecs udało mi się szybko stworzyć aplikację internetową, która odczytuje plik i eksportuje właściwe pliki do publikacji w internecie.

Ścieżka z Canvas lub ImageBitmap do sieci lub miejsca na dane
Ścieżka z Canvas lub ImageBitmap do sieci lub miejsca na dane

aplikacje internetowe, które wymagają pełnej kontroli nad sposobem przetwarzania treści multimedialnych, np. edytory wideo, aplikacje do wideokonferencji, aplikacje do odtwarzania strumieniowego itp.; Dostęp do przeglądarek wbudowanych opcji sterowania multimediami jest ogromny.

Trudno jest pokazać wszystko, co jest przydatne w 30 sekund, dlatego zajrzyj do artykułu o przetwarzaniu filmów za pomocą WebCodecs na web.dev. Znajdziesz tam mnóstwo kodu i kilka ciekawych prezentacji.

WebGPU

WebGPU to nowy interfejs API, który zapewnia nowoczesne możliwości graficzne, w szczególności Direct3D 12, Metal i Vulkan. Można ją porównać do WebGL, ale daje dostęp do bardziej zaawansowanych funkcji GPU oraz umożliwia wykonywanie ogólnych obliczeń na procesorach graficznych.

Schemat architektury przedstawiający połączenie WebGPUs między interfejsami API systemu operacyjnego a Direct3D 12, Metal i Vulkan.
Diagram architektury WebGPU

Zaczynamy testowanie źródła w Chrome 94. Obecnie pracują nad implementacją zarówno Safari, jak i Firefox.

Symulowana wersja demonstracyjna wzburzonego morza Babylon.js jest symulowana przy użyciu funkcji cieniowania opartych na procesorach WebGPU.

François napisał świetny artykuł o dostępie do nowoczesnych funkcji GPU dzięki WebGPU na web.dev. Porównał też wydajność mnożenia macierzy uruchomionego na procesora i na GPU. Oto wskazówka. GPU wygrywa.

Zjazd PWA

PWA Summit odbędzie się w dniach 6–7 października. To bezpłatna konferencja online, która ma pomóc w osiągnięciu sukcesu dzięki progresywnym aplikacjom internetowym. Zjazd PWA powstał w wyniku współpracy osób z kilku różnych firm zaangażowanych w tworzenie technologii PWA: Google, Intel, Microsoft i Samsung.

Przygotowaliśmy mnóstwo ciekawych dyskusji i treści. Aby dowiedzieć się więcej i zarejestrować się, wejdź na PWASummit.org. Mam nadzieję, że się tam spotkamy.

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

Metoda scheduler.postTask() z priorytetami umożliwia planowanie zadań i dynamiczną zmianę ich priorytetów oraz jednoczesne anulowanie ich wszystkich.

Jeśli kiedykolwiek zdarzyło Ci się walczyć ze zmianą układu, gdy pojawiają się paski przewijania, właściwość scrollbar-gutter na pewno Cię ucieszy. Zapewnia kontrolę nad obecnością rynien na pasku przewijania, co pozwala zapobiegać zmianom układu podczas rozwijania treści.

SQL WebSQL w kontekstach innych firm został wycofany. W Chrome 97 można się spodziewać jego usunięcia. Standard Web SQL Database został wycofany w listopadzie 2010 r. Nigdy nie została zaimplementowana w Firefoksie, a w 2019 r. została wycofana z Safari. Będzie ona wycofywana i usunięta z Chrome, gdy korzystanie z niej będzie zbyt niskie. Jeśli nadal korzystasz z WebSQL, to dobry moment, by zacząć planować migrację z tej bazy.

Interfejs API klawiatury wirtualnej zapewnia większą kontrolę nad tym, jak i kiedy wyświetla się wirtualna klawiatura ekranowa. Możesz w ten sposób kontrolować sposób przewijania oraz zmiany układu klawiatury po pojawieniu się lub zniknięciu klawiatury.

Więcej informacji

To tylko niektóre z najważniejszych kwestii. Kliknij poniższe linki, aby dowiedzieć się więcej o zmianach w Chrome 94.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Będziesz otrzymywać e-maile z powiadomieniami o każdym nowym filmie.

Jestem Pete LePage i jak tylko pojawi się Chrome 95, będę informować Cię o nowościach w Chrome.