Nowości w Chrome 87

Pete LePage

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

Oto, co musisz wiedzieć na ten temat:

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

Chrome Dev Summit

Logo 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 tam 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 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ż to umożliwia.

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

Wykrywanie funkcji działa nieco inaczej niż to, do czego prawdopodobnie jesteś przyzwyczajony. 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.
}

Prośba o uprawnienia do 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ć 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&>#39;, 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 stronie web.dev z przykładami kodu, szczegółowymi informacjami o najlepszym sposobie żądania uprawnień oraz wersją demonstracyjną, 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 oraz 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ć po prostu”.

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

Zrzut ekranu pokazujący edytor obrazów Photopea

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 firmy 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 lokalnymi czcionkami 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().
  • Wdrożyliś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

Dotyczy to tylko niektórych kluczowych informacji. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 87, kliknij linki poniżej.

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 opublikujemy nowy film.

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