Nieuw in Chroom 87

Pete LePage

Chrome 87 wordt nu uitgerold naar stabiele versies.

Dit is wat u moet weten:

• De Chrome Dev Summit vindt plaats op 9 en 10 december.
• U kunt nu pannen, kantelen en zoomen op webcams die dit ondersteunen.
• Voor verzoeken om een ​​bereik en voor servicemedewerkers zijn minder omwegen nodig.
• De API voor lettertypetoegang start met de oorspronkelijke proefperiode.
• En er is nog veel meer .

Ik ben Pete LePage en ik werk en fotografeer vanuit huis. Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 87!

Chrome Dev Summit

De Chrome Dev Summit is terug op 9 en 10 december met alweer het 8e hoofdstuk. Maar deze keer komen we naar jullie toe. We brengen de nieuwste updates, veel nieuwe content en talloze Chromies.

Er zijn talloze geweldige presentaties , workshops, spreekuren, enzovoort, en we zijn aanwezig in de YouTube-chat om je vragen te beantwoorden. Lees meer en ontdek hoe je niet alleen kunt kijken, maar ook kunt deelnemen!

Camera pannen, kantelen, zoomen

De meeste vergaderruimtes bij Google hebben camera's met pan-, tilt- en zoommogelijkheden, zodat de camera op de mensen in de ruimte gericht kan worden. Maar niet alleen de meest geavanceerde vergadercamera's ondersteunen PTZ (pan, tilt, zoom) - veel webcams ondersteunen het ook.

Vanaf Chrome 87 kunt u, nadat een gebruiker toestemming heeft gegeven, de PTZ-functies op een camera bedienen.

Functiedetectie is iets anders dan u waarschijnlijk gewend bent. U moet navigator.mediaDevices.getSupportedConstraints() aanroepen om te zien of de browser PTZ ondersteunt.

const supports = navigator.mediaDevices.getSupportedConstraints();

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

Vervolgens moet de gebruiker, net als bij alle andere krachtige API's, toestemming geven aan de camera, maar ook aan de PTZ-functionaliteit.

Om toestemming voor PTZ-functionaliteit aan te vragen, roept u navigator.mediaDevices.getUserMedia() aan met de PTZ-beperkingen. Dit vraagt ​​de gebruiker om zowel de gewone camera als de camera met PTZ-machtigingen te verlenen.

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.
}

Tot slot kunt u door MediaStreamTrack.getSettings() aan te roepen, weten welke functionaliteit de camera ondersteunt.

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

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

Zodra de gebruiker toestemming heeft gegeven, kunt u videoTrack.applyConstraints() aanroepen om de pan, tilt en zoom aan te passen.

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

Ik ben persoonlijk erg enthousiast over PTZ, zodat ik mijn rommelige keuken kan verbergen. Maar dat zie je pas als je de video bekijkt!

Francois heeft een geweldig bericht Control camera pan, tilt, and zoom op web.dev met codevoorbeelden, volledige details over de beste manier om toestemming aan te vragen en een demo, zodat u het kunt uitproberen en kunt zien of uw webcam PTZ ondersteunt.

Bereikverzoeken en servicemedewerkers

HTTP-bereikverzoeken , die al jaren beschikbaar zijn in de belangrijkste browsers, stellen servers in staat om de gevraagde gegevens in delen naar de client te sturen. Dit is vooral handig voor grote mediabestanden, waar de gebruikerservaring wordt verbeterd door vloeiendere weergave, verbeterde scrubbing en betere pauze- en hervattingsfuncties.

Historisch gezien werkten bereikverzoeken en serviceworkers niet goed samen, waardoor ontwikkelaars noodoplossingen moesten ontwikkelen. Vanaf Chrome 87 werkt het doorgeven van bereikverzoeken via een serviceworker naar het netwerk "gewoon".

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

Voor een uitleg over de problemen met bereikverzoeken en wat er is gewijzigd in Chrome 87, zie Jeffs artikel Handling range requests in a service worker op web.dev.

Origin Trial: API voor toegang tot lettertypen

Het is fantastisch om design-apps zoals Figma, Gravit Designer en Photopea naar het web te brengen, en we zien er nog veel meer aankomen. Hoewel het web een overvloed aan lettertypen kan bieden, is niet alles ook daadwerkelijk beschikbaar.

Voor veel ontwerpers zijn er lettertypen op hun computer geïnstalleerd die essentieel zijn voor hun werk. Bijvoorbeeld lettertypen voor bedrijfslogo's of speciale lettertypen voor CAD en andere ontwerptoepassingen.

Met de API voor toegang tot lettertypen, die een proefversie start in Chrome 87, kan een site nu de geïnstalleerde lettertypen opsommen, zodat gebruikers toegang krijgen tot alle lettertypen op hun systeem.

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

Sites kunnen op lagere niveaus verbinding maken om toegang te krijgen tot de lettertypebytes, waardoor ze hun eigen OpenType-indeling kunnen implementeren of vectorfilters of transformaties op de tekenvormen kunnen uitvoeren.

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

Bekijk Tom's artikel Geavanceerde typografie gebruiken met lokale lettertypen op web.dev. Hierin staan ​​alle details en de link naar de Origin Trial zodat je het zelf kunt uitproberen.

En meer

• Overdraagbare stromen - ReadableStream , WritableStream en TransformStream -objecten kunnen nu als argumenten aan postMessage() worden doorgegeven.
• We hebben de meest gedetailleerde flow-relative functies van de CSS Logical Properties and Values-specificatie geïmplementeerd, inclusief afkortingen en offsets om deze logische eigenschappen en waarden gemakkelijker te schrijven. Zo kan één enkele margin-block eigenschap aparte margin-block-start en margin-block-end regels vervangen.
• Er zijn nieuwe @font-face beschrijvingen toegevoegd aan ascent-override , descent-override en line-gap-override om de statistieken van het lettertype te overschrijven.
• Er zijn diverse nieuwe eigenschappen text-decoration en underline .
• Er zijn een aantal wijzigingen die verband houden met isolatie tussen oorsprongen.

Verder lezen

Dit zijn slechts enkele van de belangrijkste hoogtepunten. Bekijk de onderstaande links voor aanvullende wijzigingen in Chrome 87.

• Wat is er nieuw in Chrome DevTools (87)
• Chrome 87-verouderde en verwijderde versies
• ChromeStatus.com-updates voor Chrome 87
• Wat is er nieuw in JavaScript in Chrome 87
• Wijzigingslijst voor Chromium-bronrepository

Abonneren

Wilt u op de hoogte blijven van onze video's? Abonneer u dan op ons Chrome Developers YouTube-kanaal . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage en zodra Chrome 88 uitkomt, vertel ik u wat er nieuw is in Chrome!