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 mechanizmy Service Worker nie wymagają zbyt wielu obejścia.
• Interfejs Font Access API rozpoczyna okres próbny origin.
• I wiele innych.

Jestem Pete LePage. Pracuję i strzelam z domu. Sprawdźmy, co nowego dla programistów Chrome 87.

Chrome Dev Summit

Wydarzenie ósme na Chrome odbędzie się już 9 i 10 grudnia. Tym razem idziemy do Ciebie. 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 przekonaj się, jak nie tylko oglądać, ale też brać udział w wydarzeniu.

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.

Po przyznaniu uprawnień przez użytkownika w Chrome w wersji 87 możesz teraz sterować funkcjami 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 wywołać funkcję 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 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 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 lubię PTZ, więc mogę ukryć swoją chaotyczną kuchnię, ale aby to zobaczyć, trzeba będzie obejrzeć film.

Francois opublikował świetny post Control camera pan, tilt, and zoom na stronie web.dev, w którym znajdziesz przykłady kodu, szczegółowe informacje o tym, jak poprosić o pozwolenie, oraz wersję demonstracyjną, 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ą prawidłowo, 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 próbna: 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. Choć w internecie można korzystać z szerokiej gamy czcionek, nie wszystko jest dostępne w sieci.

Wielu programistów instaluje na komputerze pewne 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ł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, 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 usług 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)
• Zasady wycofane i usunięte w Chrome 87
• Aktualizacje na ChromeStatus.com w przypadku Chrome 87
• Nowości w JavaScript w Chrome 87
• Lista zmian w repozytorium kodu Chromium

Subskrybuj

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

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