Inizia ora l'implementazione di Chrome 87 nella versione stabile.
Tieni presente quanto segue:
- Il Chrome Dev Summit si terrà il 9 e il 10 dicembre.
- Ora puoi controllare la panoramica, l'inclinazione e lo zoom sulle webcam che la supportano.
- Le richieste di intervallo e i service worker non richiedono molte soluzioni alternative.
- L'API font access avvia la prova dell'origine.
- E ce ne sono molti altri.
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
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.
}
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
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
eTransformStream
ora possono essere passati come argomenti apostMessage()
. - 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 regolemargin-block-start
emargin-block-end
separate. - I nuovi descrittori
@font-face
sono stati aggiunti aascent-override
,descent-override
eline-gap-override
per sostituire le metriche del carattere. - Esistono diverse nuove proprietà
text-decoration
eunderline
. - 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.
- Novità di Chrome DevTools (87)
- Ritiri e rimozioni di Chrome 87
- Aggiornamenti di ChromeStatus.com per Chrome 87
- Novità di JavaScript in Chrome 87
- Elenco delle modifiche al repository di origine di Chromium
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.