Nowości w Chrome 87

Pete LePage

Twitter GitHub Glitch Mastodon strona główna

Zaczynamy wdrażać Chrome 87 w wersji stabilnej.

Oto, co musisz wiedzieć na ten temat:

• Chrome Dev Summit będzie znowu organizowany 9–10 grudnia.
• Teraz możesz sterować przesuwaniem, przechylaniem i powiększaniem w kamerach, które obsługują tę funkcję.
• Żądania zakresu i mechanizmy Service Worker nie wymagają tylu obejścia problemu.
• Interfejs font Access API rozpocznie okres testowania origin.
• Jest wiele innych.

Jestem Pete LePage. Pracuję i nagrywam z domu. Przyjrzyjmy się, co nowego dla programistów w Chrome 87.

Chrome Dev Summit

Chrome Dev Summit powraca 9 i 10 grudnia, a w nim odbędzie się ósmy rozdział. Tym razem zapraszamy Cię jednak. Przygotowujemy wszystkie najnowsze aktualizacje i mnóstwo nowych treści.

Odbędzie się tam mnóstwo wspaniałych rozmów, warsztatów, konsultacji itp. Będziemy też mogli odpowiedzieć na Twoje pytania na czacie w YouTube. Dowiedz się więcej i przekonaj się, jak możesz nie tylko oglądać treści, ale też uczestniczyć w nich.

Przesunięcie kamery, pochylanie, powiększanie

Większość sal konferencyjnych w Google ma kamery z funkcjami przesuwania, pochylania i powiększania, dzięki czemu kamera może być skierowana na osoby w sali. Rejestrator PTZ obsługuje nie tylko zaawansowane kamery konferencyjne, przesuwanie, pochylanie, powiększanie – wiele kamer internetowych również obsługuje tę funkcję.

Od Chrome 87, gdy użytkownik przyzna odpowiednie uprawnienia, możesz sterować funkcjami PTZ w kamerze.

Wykrywanie funkcji różni się od tego, do którego użytkownicy są przyzwyczajeni. Musisz wywołać navigator.mediaDevices.getSupportedConstraints(), aby sprawdzić, czy przeglądarka obsługuje PTZ.

const supports = navigator.mediaDevices.getSupportedConstraints();

if (supports.pan && supports.tilt && supports.zoom) {
  // Browser supports camera PTZ.
}

Następnie, podobnie jak w przypadku wszystkich innych zaawansowanych interfejsów API, użytkownik musi przyznać uprawnienia do kamery, ale także do funkcji PTZ.

Aby poprosić o uprawnienia do funkcji PTZ, wywołaj navigator.mediaDevices.getUserMedia() z ograniczeniami PTZ. Pojawi się prośba o przyznanie zarówno zwykłej kamery, jak i kamery z uprawnieniami do 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.
}

Na koniec wywołanie usługi MediaStreamTrack.getSettings() poinformuje Cię, jakie funkcje obsługuje kamera.

const [videoTrack] = stream.getVideoTracks();
const capabilities = videoTrack.getCapabilities();
const settings = videoTrack.getSettings();

if ('pan' in settings) {
  enablePan(capabilities, settings);
}
// Similar for tilt and zoom...

Gdy użytkownik przyzna odpowiednie uprawnienia, możesz wywołać videoTrack.applyConstraints(), aby dostosować przesuwanie, pochylanie i powiększanie.

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);
  });
}

Uwielbiam PTZ i mogę ukryć swoją zapchaną kuchnię, ale żeby to zobaczyć, musisz obejrzeć film!

Francois opublikował na stronie web.dev świetny post o sterowaniu przesuwaniem, przechylaniem i powiększaniem. Zawiera on przykłady kodu, szczegółowe informacje o najlepszym sposobie uzyskiwania uprawnień oraz prezentację prezentującą, jak ją wypróbować i sprawdzić, czy Twoja kamera internetowa obsługuje PTZ.

Żądania dotyczące zakresów i mechanizmy Service Worker

Żądania zakresu HTTP, które są dostępne w najpopularniejszych przeglądarkach od lat, umożliwiają serwerom wysyłanie częściowych żądanych danych do klienta. Jest to szczególnie przydatne w przypadku dużych plików multimedialnych, ponieważ zapewniają one płynniejsze odtwarzanie, zaawansowane przeglądanie oraz lepsze wstrzymywanie i wznawianie funkcji.

W przeszłości żądania zakresu i instancje pracowników usług nie współpracowały ze sobą, co zmuszało deweloperów do obchodzenia zabezpieczeń. Od wersji Chrome 87 przekazywanie żądań zakresu do sieci z skryptu service worker będzie „po prostu działać”.

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

Wyjaśnienie problemów z żądaniami dotyczącymi zakresów i zmiany w Chrome 87 znajdziesz w artykule Jerzego na temat obsługi żądań dotyczących zakresów w skrypcie service worker na stronie web.dev.

Testowanie origin: interfejs Font Access API

Udostępnienie w internecie aplikacji do projektowania, takich jak Figma, Gravit Designer i Photopea, jest świetne, a wkrótce będzie ich jeszcze więcej. Choć internet może oferować mnóstwo czcionek, nie wszystkie są dostępne.

Wielu projektantów ma zainstalowane na komputerze czcionki, które są kluczowe w pracy. Mogą to być na przykład czcionki logo korporacji lub specjalistyczne czcionki do CAD i innych zastosowań.

Dzięki interfejsowi Font Access API, który w Chrome 87 rozpoczyna się testowanie origin, witryna może teraz wyliczyć zainstalowane czcionki, dając użytkownikom dostęp do wszystkich czcionek w ich systemie.

// 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)

Witryny mogą łączyć się na niższych poziomach, aby uzyskać dostęp do bajtów czcionek. Pozwala to im wdrażać układ OpenType oraz przeprowadzać filtry wektorowe i przekształcać kształty glifów.

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);
}

Przeczytaj artykuł Toma o korzystaniu z zaawansowanej typografii z lokalnymi czcionkami na web.dev, który zawiera wszystkie szczegóły oraz link do wersji próbnej Origin, dzięki czemu możesz samodzielnie wypróbować tę funkcję.

I nie tylko

• Strumienie możliwe do przeniesienia – obiekty ReadableStream, WritableStream i TransformStream można teraz przekazywać jako argumenty do postMessage().
• Zaimplementowaliśmy najbardziej szczegółowe funkcje flow-relative ze specyfikacji właściwości logicznych i wartości CSS, w tym skróty i przesunięcia, aby nieco ułatwić zapisywanie tych właściwości logicznych i wartości. Na przykład pojedyncza właściwość margin-block może zastąpić oddzielne reguły margin-block-start i margin-block-end.
• Do elementów ascent-override, descent-override i line-gap-override dodano nowe deskryptory @font-face, aby zastąpić dane dotyczące czcionki.
• Jest kilka nowych usług text-decoration i underline.
• Wprowadziliśmy też wiele zmian związanych z izolacją zasobów z innych domen.

Więcej informacji

Obejmuje to tylko niektóre z najważniejszych momentów. Aby dowiedzieć się więcej o nowych zmianach w Chrome 87, kliknij poniższe linki.

• Nowości w Narzędziach deweloperskich w Chrome (87)
• Wycofywanie i usuwanie Chrome 87
• Aktualizacje ChromeStatus.com dla Chrome 87
• Nowości w JavaScript w Chrome 87
• Lista zmian repozytorium źródłowego Chromium

Zasubskrybuj

Jeśli chcesz być na bieżąco z naszymi filmami, zasubskrybuj kanał dla deweloperów Chrome w YouTube, a za każdym razem, gdy opublikujemy nowy film, otrzymasz e-maila z powiadomieniem.

Nazywam się Pete LePage i jak tylko pojawi się Chrome 88, chętnie opowiem Ci o nowościach w Chrome.