Novità di Chrome 87

Pete LePage

Stiamo iniziando a rendere disponibile Chrome 87 nella versione stabile.

Tieni presente quanto segue:

• Il Chrome Dev Summit è di nuovo in programma il 9 e 10 dicembre.
• Ora puoi controllare panoramica, inclinazione e zoom sulle webcam che la supportano.
• Le richieste di intervallo e i service worker non richiedono molte soluzioni alternative.
• L'API Accesso ai caratteri inizia la prova dell'origine.
• E non è tutto.

Il mio nome è Pete LePage, che lavora e scatta da casa. Vediamo le novità di Chrome 87 per gli sviluppatori.

Chrome Dev Summit

Il Chrome Dev Summit torna il 9 e 10 dicembre con l'ottavo capitolo. Ma questa volta veniamo da te. Troverai tutti gli aggiornamenti più recenti, moltissimi nuovi contenuti e tanti giochi per Chrome.

Ci saranno tantissimi interessanti talk, workshop, orari di apertura e altro ancora. Inoltre, saremo nella chat di YouTube per rispondere alle tue domande. Scopri di più e scopri come non solo guardare, ma anche partecipare.

Panoramica, inclinazione e zoom della fotocamera

La maggior parte delle sale riunioni di Google è dotata di videocamere con funzionalità di panoramica, inclinazione e zoom, in modo che la videocamera possa essere rivolta verso le persone nella stanza. Tuttavia, le funzioni PTZ (pannello, inclinazione, zoom) supportano la funzione PTZ anche molte webcam.

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

Il rilevamento di elementi è un po' diverso da quello che probabilmente conosci. Dovrai chiamare navigator.mediaDevices.getSupportedConstraints() per verificare se il browser supporta PTZ.

const supports = navigator.mediaDevices.getSupportedConstraints();

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

Poi, come per tutte le altre API efficaci, 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. L'utente verrà invitato a concedere le autorizzazioni sia per la videocamera standard sia per la videocamera con 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 a MediaStreamTrack.getSettings() ti indicherà cosa supporta la 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 la panoramica, l'inclinazione e lo 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, sono molto entusiasta della funzionalità PTZ, che mi permette di nascondere la mia cucina disordinata, ma per scoprirlo dovrai guardare il video.

Francois ha pubblicato un post molto utile su come controllare panoramica, inclinazione e zoom della videocamera su web.dev con esempi di codice, fornisci dettagli completi per ottenere l'autorizzazione e una demo che ti consentirà di provarla e vedere se la tua webcam supporta la tecnologia PTZ.

Richieste di intervallo e worker di servizio

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

In passato, 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 delle richieste di intervallo alla rete dall'interno di un worker di servizio "funziona e basta".

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 alle modifiche apportate in Chrome 87, consulta l'articolo di Jeff Gestione delle richieste di intervallo in un servizio worker su web.dev.

Prova Origin: API di accesso ai caratteri

È fantastico poter portare app di design come Figma, Gravit Designer e Photopea sul web e ne vedremo molte altre. Sebbene il web abbia la capacità di offrire una vasta gamma di caratteri, non tutti sono disponibili.

Molti designer hanno installato sul computer alcuni caratteri fondamentali per il loro lavoro. Ad esempio, i caratteri dei loghi aziendali o caratteri specializzati per CAD e altre applicazioni di progettazione.

Con l'API di accesso ai caratteri, che avvia una prova dell'origine in Chrome 87, un sito ora può enumerare i caratteri installati, dando 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 eseguire il collegamento a livelli inferiori per accedere ai byte dei caratteri, consentendo di eseguire la propria implementazione del layout OpenType o di eseguire filtri o trasformazioni vettoriali sulle forme dei 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 Utilizzare la tipografia avanzata con i caratteri locali su web.dev per tutti i dettagli e il link alla prova dell'origine per provarlo tu stesso.

E altro ancora

• Flussi trasferibili - Ora gli oggetti ReadableStream, WritableStream e TransformStream possono essere passati come argomenti a postMessage().
• Abbiamo implementato le funzionalità flow-relative più granulari delle specifiche CSS per le proprietà e i valori logici, tra cui le abbreviazioni e gli offset, per semplificare la scrittura di queste proprietà e valori logici. Ad esempio, una singola proprietà margin-block può sostituire regole margin-block-start e margin-block-end separate.
• A ascent-override, descent-override e line-gap-override sono stati aggiunti nuovi descrittori @font-face per sostituire le metriche del carattere.
• Esistono diverse nuove proprietà text-decoration e underline.
• Esistono anche una serie di modifiche relative all'isolamento cross-origin.

Per approfondire

Sono riportati solo alcuni punti salienti. Consulta i link di seguito per altre modifiche in Chrome 87.

• Novità di Chrome DevTools (87)
• Ritiro e rimozioni in Chrome 87
• Aggiornamenti di ChromeStatus.com per Chrome 87
• Novità di JavaScript in Chrome 87
• Elenco delle modifiche al repository di codice sorgente di Chromium

Iscriviti

Se vuoi rimanere al passo con i nostri video, iscriviti al nostro canale YouTube per sviluppatori di Chrome e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Sono Pete LePage e, non appena verrà rilasciato Chrome 88, sarò qui per dirti tutte le novità di Chrome.