Novità di Chrome 87

Inizia ora l'implementazione di Chrome 87 nella versione stabile.

Tieni presente quanto segue:

Mi chiamo Pete LePage e lavoro e faccio foto da casa, analizziamo le novità di Chrome 87 per gli sviluppatori.

Summit degli sviluppatori di Chrome

Logo Chrome Dev Summit

Il Chrome Dev Summit torna il 9 e il 10 dicembre con l'8° capitolo. Ma questa volta ci stiamo rivolgendo a te. Stiamo introducendo tutti gli ultimi aggiornamenti, un sacco di nuovi contenuti e una grande quantità di Chromie.

Ci sono tantissimi grandi dibattiti, workshop, sessioni di consulenza e così via, e saremo lieti di rispondere alle tue domande nella chat di YouTube. Scopri di più e scopri come puoi partecipare e non solo guardare i tuoi video.

Panoramica, inclinazione, zoom della videocamera

La maggior parte delle sale riunioni di Google dispone di videocamere con funzionalità di panoramica, inclinazione e zoom, in modo che la videocamera possa puntare sulle persone nella stanza. Il PTZ non è supportato solo dalle sofisticate videocamere per conferenze, ad esempio panoramica, inclinazione e zoom: è supportato anche da molte web cam.

A partire da Chrome 87, una volta che un utente ha concesso l'autorizzazione, puoi controllare le funzionalità PTZ su una videocamera.

Il rilevamento delle funzionalità è un po' diverso da quello a cui sei abituato. Devi chiamare il numero navigator.mediaDevices.getSupportedConstraints() per verificare se il browser supporta la modalità PTZ.

const supports = navigator.mediaDevices.getSupportedConstraints();

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

Richiesta di autorizzazione per PTZ

Quindi, come tutte le altre API potenti, l'utente dovrà concedere l'autorizzazione alla videocamera, ma anche alla funzionalità PTZ.

Per richiedere l'autorizzazione per la funzionalità PTZ, chiama navigator.mediaDevices.getUserMedia() con i vincoli PTZ. In questo modo verrà richiesto all'utente di concedere le autorizzazioni sia per la videocamera normale che per quella 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.
}

Infine, una chiamata al numero MediaStreamTrack.getSettings() ti comunicherà ciò che è supportato dalla videocamera.

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

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

Una volta che l'utente ha concesso l'autorizzazione, puoi chiamare videoTrack.applyConstraints() per regolare panoramica, inclinazione e zoom.

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

Personalmente, adoro il PTZ, posso nascondere la mia cucina caotica, ma dovrai guardare il video per vederlo.

Francesco ha pubblicato un ottimo post su Controllo della panoramica, dell'inclinazione e dello zoom della videocamera su web.dev con esempi di codice, completa i dettagli del modo migliore per richiedere l'autorizzazione e una demo che ti consente di provarla e vedere se la tua webcam supporta il PTZ.

Richieste di intervallo e service worker

Le richieste di intervallo HTTP, disponibili nei principali browser da diversi anni, consentono ai server di inviare i dati richiesti al client in blocchi. Questa funzionalità è particolarmente utile per i file multimediali di grandi dimensioni, in cui l'esperienza utente viene migliorata grazie a una riproduzione più fluida, uno scrubbing migliorato e funzioni di pausa e ripristino migliori.

Storicamente, le richieste di intervallo e i service worker non funzionavano bene insieme, costringendo gli sviluppatori a creare soluzioni alternative. A partire da Chrome 87, il passaggio di richieste di intervalli alla rete dall'interno di un service worker è sufficiente.

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

Per una spiegazione dei problemi relativi alle richieste di intervallo e di cosa è cambiato in Chrome 87, vedi l'articolo di Jeff Gestire le richieste di intervallo in un service worker su web.dev.

Prova dell'origine: API Font Access

Screenshot dell'editor di immagini di Photopea

Portare sul web app di progettazione come Figma, Gravit Designer e Photopea è fantastico e ce ne sono molte altre in arrivo. Sebbene il web abbia la possibilità di offrire molti caratteri, non tutto è disponibile sul web.

Per molti designer, i caratteri installati sul computer sono fondamentali per il loro lavoro. Ad esempio, caratteri del logo aziendale o caratteri specializzati per CAD e altre applicazioni di design.

Con l'API Font Access, che avvia una prova dell'origine in Chrome 87, un sito ora può enumerare i caratteri installati, fornendo agli utenti l'accesso a tutti i caratteri sul loro sistema.


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

Inoltre, i siti possono collegarsi ai livelli inferiori per accedere ai byte dei caratteri, consentendo di eseguire la propria implementazione del layout OpenType o di eseguire filtri vettoriali o trasformazioni, sulle forme glifi.

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

Consulta l'articolo di Tom su come utilizzare la tipografia avanzata con caratteri locali sul sito web.dev con tutti i dettagli e il link alla prova dell'origine per provarlo in autonomia.

E altro ancora

  • Flussi trasferibili: gli oggetti ReadableStream, WritableStream e TransformStream ora possono essere passati come argomenti a postMessage().
  • Abbiamo implementato le funzionalità flow-relative più granulari delle specifiche per i valori e le proprietà logiche CSS, inclusi comandi abbreviati e offset per rendere un po' più facili da scrivere queste proprietà e questi valori logici. Ad esempio, una singola proprietà margin-block può sostituire regole margin-block-start e margin-block-end separate.
  • I nuovi descrittori @font-face sono stati aggiunti a ascent-override, descent-override e line-gap-override per sostituire le metriche del carattere.
  • Esistono diverse nuove proprietà text-decoration e underline.
  • Sono state apportate diverse modifiche all'isolamento multiorigine.

Per approfondire

Vengono illustrati solo alcuni dei punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 87.

Iscriviti

Se vuoi tenerti sempre al corrente sui nostri video, iscriviti al nostro canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che viene lanciato un nuovo video.

Mi chiamo Pete LePage e, non appena uscirà Chrome 88, sarò qui per dirti le novità di Chrome.