Deze pagina is vertaald door de Cloud Translation API.

Nieuw in Chroom 87

Pete LePage

Chrome 87 begint nu stabiel te worden.

Dit is wat u moet weten:

Chrome Dev Summit is terug op 9 en 10 december.
U kunt nu pannen, kantelen en zoomen op webcams die dit ondersteunen.
Voor bereikaanvragen en servicemedewerkers zijn niet zoveel oplossingen nodig.
De API voor lettertypetoegang start de oorspronkelijke proefversie.
En er is nog veel meer .

Ik ben Pete LePage , ik werk en fotografeer vanuit huis. Laten we erin duiken en 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 zijn 8e hoofdstuk. Maar deze keer komen we naar jou toe. We brengen de nieuwste updates, veel nieuwe inhoud en veel Chromies.

Er zijn een heleboel geweldige lezingen , workshops, spreekuren, enz., en we zijn aanwezig in de YouTube-chat om je vragen te beantwoorden. Lees meer en ontdek hoe u 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 kan worden gericht. Maar het zijn niet alleen fraaie conferentiecamera's die PTZ ondersteunen - pannen, kantelen, zoomen - veel webcams ondersteunen dit ook.

Vanaf Chrome 87 kunt u, nadat een gebruiker toestemming heeft verleend, nu 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.
}

Toestemmingsprompt voor PTZ

Vervolgens zal de gebruiker, net als bij alle andere krachtige API’s, toestemming moeten verlenen 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. Hierdoor wordt de gebruiker gevraagd 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.
}

Ten slotte zal een aanroep van MediaStreamTrack.getSettings() u vertellen wat 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 verleend, kunt u videoTrack.applyConstraints() aanroepen om het pannen, kantelen en zoomen 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);
  });
}

Persoonlijk ben ik erg enthousiast over PTZ, dus ik kan mijn rommelige keuken verbergen, maar je moet de video bekijken om dat te zien!

Francois heeft een geweldige post Controle camera pannen, kantelen en zoomen op web.dev met codevoorbeelden, volledige details over de beste manier om toestemming te vragen, en een demo, zodat u het kunt uitproberen en kunt zien of uw webcam PTZ ondersteunt.

Bereikaanvragen en servicemedewerkers

HTTP-bereikverzoeken , die al enkele jaren beschikbaar zijn in de belangrijkste browsers, stellen servers in staat de gevraagde gegevens in stukjes naar de client te sturen. Dit is vooral handig voor grote mediabestanden, waarbij de gebruikerservaring wordt verbeterd door vloeiender afspelen, verbeterd scrubben en betere pauze- en hervatfuncties.

Historisch gezien werkten bereikaanvragen en servicemedewerkers niet goed samen, waardoor ontwikkelaars gedwongen werden om oplossingen te bedenken. Vanaf Chrome 87 werkt het doorgeven van bereikverzoeken aan het netwerk vanuit een servicemedewerker 'gewoon'.

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

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

Origin-proefversie: API voor toegang tot lettertypen

Schermafbeelding van de Photopea-beeldeditor

Het is geweldig om ontwerp-apps zoals Figma, Gravit Designer en Photopea naar het internet te brengen, en we zien er nog veel meer aankomen. Hoewel het internet een overvloed aan lettertypen kan bieden, is niet alles beschikbaar op internet.

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

Met de Font Access API, die een origin-proefperiode start in Chrome 87, kan een site nu de geïnstalleerde lettertypen opsommen, waardoor 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)

En sites kunnen op lagere niveaus inhaken om toegang te krijgen tot de lettertypebytes, waardoor ze hun eigen OpenType-lay-outimplementatie kunnen uitvoeren, of vectorfilters of transformaties op de glyph-vormen 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 Gebruik geavanceerde typografie met lokale lettertypen op web.dev met alle details, en de link naar de Origin-proefversie, zodat je het zelf kunt proberen.

En meer

Overdraagbare streams - ReadableStream , WritableStream en TransformStream objecten kunnen nu als argumenten worden doorgegeven aan postMessage() .
We hebben de meest gedetailleerde flow-relative kenmerken van de CSS Logical Properties and Values-specificatie geïmplementeerd, inclusief afkortingen en offsets, om deze logische eigenschappen en waarden een beetje gemakkelijker te maken om te schrijven. Een enkele margin-block kan bijvoorbeeld afzonderlijke regels margin-block-start en margin-block-end vervangen.
Er zijn nieuwe @font-face -descriptors toegevoegd aan ascent-override , descent-override en line-gap-override om de metrieken van het lettertype te overschrijven.
Er zijn verschillende nieuwe text-decoration en underline .
En er zijn een aantal veranderingen gerelateerd aan isolatie tussen verschillende oorsprong.

Verder lezen

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

Wil je op de hoogte blijven van onze video's, abonneer je dan op ons Chrome Developers YouTube-kanaal en je ontvangt een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage, en zodra Chrome 88 uitkomt, ben ik hier om je te vertellen: wat er nieuw is in Chrome!