Nowości w Chrome 87

Pete LePage

Chrome 87 zaczyna być wdrażana jako stabilna wersja.

Oto, co musisz wiedzieć na ten temat:

• Chrome Dev Summit wraca 9 i 10 grudnia.
• Teraz możesz sterować przesuwaniem, pochylaniem i powiększaniem w kamerze internetowej, która obsługuje te funkcje.
• Żądania zakresu i serwisy workerów nie wymagają tak wielu obejść.
• Interfejs Font Access API rozpoczyna okres próbny origin.
• I wiele innych.

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

Chrome Dev Summit

W dniach 9–10 grudnia odbędzie się 8. edycja szczytu Chrome Dev Summit. Tym razem to my do Ciebie przyjedziemy. Będziemy przekazywać wszystkie najnowsze informacje, wiele nowych treści i sporo Chromies.

Jest mnóstwo ciekawych rozmów, warsztatów, godzin konsultacji itp., a my będziemy na czacie w YouTube, aby odpowiadać na Twoje pytania. Dowiedz się więcej i sprawdź, jak możesz nie tylko oglądać, ale też brać udział w transmisji.

Przesuwanie, pochylanie i powiększanie obrazu w kamerze

Większość sal konferencyjnych w Google jest wyposażona w kamery z funkcjami panoramowania, przechylania i powiększania, dzięki którym można skierować kamerę na osoby w sali. Nie chodzi tylko o zaawansowane kamery konferencyjne obsługujące PTZ (przesuwanie, pochylanie, zoom). Wiele kamer internetowych też je obsługuje.

Od Chrome 87, gdy użytkownik przyzna uprawnienia, możesz kontrolować funkcje PTZ w kamerze.

Wykrywanie funkcji działa nieco inaczej niż do tej pory. Aby sprawdzić, czy przeglądarka obsługuje PTZ, musisz zadzwonić pod numer navigator.mediaDevices.getSupportedConstraints().

const supports = navigator.mediaDevices.getSupportedConstraints();

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

Następnie, podobnie jak w przypadku innych zaawansowanych interfejsów API, użytkownik będzie musiał przyznać uprawnienia nie tylko do kamery, ale też do funkcji PTZ.

Aby poprosić o dostęp do funkcji PTZ, wywołaj funkcję navigator.mediaDevices.getUserMedia() z ograniczeniami PTZ. Użytkownik będzie musiał przyznać dostęp do zwykłej kamery i kamery z 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 zadzwoń do MediaStreamTrack.getSettings(), aby dowiedzieć się, 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 udzieli uprawnień, możesz wywołać funkcję videoTrack.applyConstraints(), aby przesuwać, obracać i przybliżać obraz.

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

Osobiście bardzo się cieszę z możliwości ukrycia bałaganu w kuchni, ale musisz obejrzeć film, aby się o tym przekonać.

Francois opublikował świetny post Control camera pan, tilt, and zoom na web.dev ze przykładami kodu, szczegółowymi informacjami o najlepszym sposobie żądania uprawnień oraz prezentacją, dzięki której możesz sprawdzić, czy Twoja kamera internetowa obsługuje PTZ.

Zapytania o zakres i usługa service worker

Żądania zakresu HTTP, które są dostępne w głównych przeglądarkach od kilku lat, umożliwiają serwerom wysyłanie żądanych danych do klienta w kawałkach. Jest to szczególnie przydatne w przypadku dużych plików multimedialnych, ponieważ zapewnia płynniejsze odtwarzanie, ulepszone przewijanie i lepsze funkcje pauzy i wznawiania.

Dotychczas żądania zakresu i skrypty service worker nie współpracowały ze sobą zbyt dobrze, co zmuszało deweloperów do tworzenia obejść. Począwszy od Chrome 87 przekazywanie żądań zakresu do sieci z serwisowego workera będzie „działać bezproblemowo”.

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 zakresu i zmianami w Chrome 87 znajdziesz w artykule Jeffa Obsługa żądań zakresu w usługach workerów na stronie web.dev.

Origin Trial: interfejs API dostępu do czcionek

Wprowadzenie do przeglądarki takich aplikacji do projektowania, jak Figma, Gravit Designer czy Photopea, to świetna sprawa. Wkrótce pojawi się ich jeszcze więcej. W internecie można znaleźć wiele czcionek, ale nie wszystkie są dostępne.

Wielu projektantów ma na komputerze czcionki, które są kluczowe dla ich pracy. Mogą to być na przykład czcionki logo firmowe lub czcionki specjalistyczne do programów CAD i innych aplikacji do projektowania.

Dzięki interfejsowi API dostępu do czcionek, który uruchamia w Chrome 87 próbę wersji próbnej pochodzenia, witryna może teraz wyliczać zainstalowane czcionki, zapewniają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)

Strony mogą się łączyć na niższych poziomach, aby uzyskać dostęp do bajtów czcionki, co pozwala im na implementację własnych układów OpenType lub stosowanie filtrów wektorowych lub przekształceń na kształtachglifó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);
}

Zapoznaj się z artykułem Toma Używanie zaawansowanej typografii z fontami lokalnymi na stronie web.dev, w którym znajdziesz wszystkie szczegóły i link do wersji próbnej Origin, aby wypróbować tę funkcję samodzielnie.

I nie tylko

• Przenośne strumienie – obiekty ReadableStream, WritableStream i TransformStream można teraz przekazywać jako argumenty do metody postMessage().
• Wprowadziliśmy najbardziej szczegółowe flow-relativefunkcje specyfikacji właściwości i wartości logicznych w CSS, w tym skróty i przesunięcia, aby ułatwić tworzenie tych właściwości i wartości. Na przykład jedna właściwość margin-block może zastąpić osobne reguły margin-block-start i margin-block-end.
• Do plików ascent-override, descent-override i line-gap-override dodano nowe deskryptory @font-face, aby zastąpić dane czcionki.
• Dostępnych jest kilka nowych właściwości text-decoration i underline.
• Wprowadziliśmy też kilka zmian związanych z izolacją między domenami.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby poznać dodatkowe zmiany w Chrome 87, kliknij linki poniżej.

• Nowości w Narzędziach deweloperskich w Chrome (87)
• Funkcje wycofane i usunięte z Chrome 87
• Aktualizacje ChromeStatus.com dotyczące Chrome 87
• Nowości w JavaScript w Chrome 87
• Lista zmian w repozytorium kodu Chromium

Subskrybuj

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

Nazywam się Pete LePage i zaraz po wydaniu Chrome 88 opowiem Ci, co nowego w tej wersji przeglądarki.