Nowości w Chrome 94

Pete LePage

Oto, co musisz wiedzieć na ten temat:

  • Domyślna przestrzeń barw dla elementów <canvas> jest teraz oficjalnie zdefiniowana w specyfikacji jako SRGB. 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 strumieniowego przesyłania gier, edytorów wideo i innych.
  • WebGPU rozpoczyna okres próbny.
  • 6–7 października odbędzie się szczyt PWA.
  • I to nie wszystko .

Nazywam się Pete LePage i pracuję z domu. Zobaczmy, co nowego w Chrome 94 dla deweloperów.

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. W przypadku fotografów, ilustratorów pracujących nad grafiką do druku i wielu innych osób kolory na ekranie muszą być zgodne z kolorami drukowanymi. Od wersji 94 Chrome elementy <canvas> są w pełni zarządzane pod kątem kolorów za pomocą profilu sRGB. Wcześniej sRGB było konwencją, ale nie było wyraźnie zdefiniowane w specyfikacji.

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

Co ważniejsze, możesz teraz określić, której przestrzeni barw użyć podczas tworzenia obiektu <canvas> renderowania w kontekście 2D lub obiektu ImageData, w tym przestrzeni barw P3.

WebCodecs

Umieszczenie filmu na stronie jest wystarczająco proste. Jeśli jednak chcesz wykonać coś bardziej złożonego i działać na komponentach strumienia wideo, będzie to trudne i zwykle wymaga użycia Web Assembly do przesyłania własnych kodeków.

Jednak dostarczenie własnego kodeka oznacza napisanie kodu, który przeglądarka już ma, a nie może on 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 problem z zapamiętaniem odpowiednich przełączników wiersza poleceń do kodowania filmu na potrzeby internetu lub konwertowania pliku GIF na plik wideo. Korzystając z interfejsów API dostępnych w WebCodecs, mogłem szybko stworzyć aplikację internetową, która odczyta plik i wyeksportuje odpowiednie pliki potrzebne w internecie.

Ścieżka z Canvasa lub ImageBitmap do sieci lub pamięci.
Ś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 strumieniowego przesyłania danych itp.; Dostęp do wbudowanych w przeglądarki elementów sterowania multimediami jest ogromny.

Trudno jest przedstawić coś przydatnego w 30 sekundach, dlatego zajrzyj na web.dev, gdzie znajdziesz przetwarzanie wideo za pomocą WebCodecs – szczegółowe informacje, mnóstwo kodu i kilka fajnych demonstracji.

WebGPU

WebGPU to nowy interfejs API, który udostępnia nowoczesne funkcje graficzne, w szczególności Direct3D 12, Metal i Vulkan. Możesz go traktować jak WebGL, ale zapewnia on dostęp do bardziej zaawansowanych funkcji GPU i obsługuje ogólne obliczenia na GPU.

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

W Chrome 94 rozpoczynamy testowanie origin, a Safari i Firefox pracują obecnie nad jego wdrożeniem.

Prezentacja Babylon.js symulacji wzburzonego morza przy użyciu shadera obliczeniowego WebGPU.

François napisał świetny artykuł „Dostęp do nowoczesnych funkcji GPU dzięki WebGPU na stronie web.dev, który zawiera szczegółowe informacje i porównuje wydajność mnożenia macierzy uruchomionej w CPU i GPU. Oto podpowiedź. GPU wygrywa.

szczyt PWA,

PWA Summit zbliża się 6–7 października. To bezpłatna konferencja online, która pomoże Ci odnieść sukces w przypadku progresywnych aplikacji internetowych. PWA Summit to współpraca między pracownikami kilku firm zaangażowanych w tworzenie technologii PWA: Google, Intel, Microsoft i Samsung.

Znajdziesz tam mnóstwo świetnych wykładów i treści. Więcej informacji znajdziesz na stronie PWASummit.org. Mam nadzieję, że się tam spotkamy.

I inne funkcje

Oczywiście jest ich znacznie więcej.

Metoda priorytetowa scheduler.postTask() umożliwia planowanie zadań, dynamiczne zmienianie ich priorytetów lub anulowanie wszystkich.

Jeśli kiedykolwiek miałeś problem z przesładaniem, gdy pojawiają się paski przewijania, właściwość scrollbar-gutter może Ci pomóc. Umożliwia kontrolowanie obecności pasków przewijania, co pozwala uniknąć zmian układu podczas powiększania treści.

Używanie WebSQL w kontekście rozwiązań zewnętrznych zostało wycofane i planowane jest na Chrome 97. Standard bazy danych Web SQL został wycofany w listopadzie 2010 r. Ta funkcja nigdy nie została zaimplementowana w Firefoxie, a w 2019 roku została wycofana z Safari. Gdy liczba użytkowników spadnie do wystarczająco niskiego poziomu, funkcja zostanie wycofana i usunięta z Chrome. Jeśli nadal używasz WebSQL, teraz jest dobry moment na zaplanowanie migracji z tej usługi.

Interfejs API klawiatury wirtualnej daje większą kontrolę nad tym, jak i kiedy wyświetla się wirtualna klawiatura ekranowa. Pozwala wprost kontrolować zachowanie podczas przewijania lub zmieniać układ, gdy klawiatura pojawia się lub znika.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 94, kliknij linki poniżej.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

Mam na imię Pete LePage i gdy tylko Chrome 95 się ukaże, od razu powiem, co nowego w tej przeglądarce.