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 przypadku kamer, które obsługują te funkcje.
• Żądania zakresu i serwisy workerów nie wymagają tak wielu obejść.
• Interfejs Font Access API rozpoczyna okres próbny origin.
• To nie wszystko.

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. Znajdziesz w nim wszystkie najnowsze informacje, mnóstwo nowych treści i mnóstwo 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 transmisjach.

Przesuwanie, pochylanie i powiększanie obrazu w kamerze

Większość sal konferencyjnych w Google jest wyposażona w kamery z funkcjami panoramowania, przechylania i przybliżania, 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ż to 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 potężnych 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ć uprawnienia do zwykłego aparatu i do aparatu 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 dostosować przesuwanie, przechylanie 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);
  });
}

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

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.

Żądania zakresu 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 próbę pochodzenia w Chrome 87, witryna może teraz wymieniać 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łtach znakó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, oraz link do wersji próbnej Origin, dzięki której możesz wypróbować tę funkcję.

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 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 dowiedzieć się więcej o dodatkowych zmianach 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 źródłowego Chromium

Subskrybuj

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

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