Neu in Chrome 87

Pete LePage

Die stabile Version von Chrome 87 wird schrittweise eingeführt.

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage und arbeite und filme von zu Hause aus. Sehen wir uns an, was in Chrome 87 für Entwickler neu ist.

Chrome Dev Summit

Logo des Chrome Dev Summit

Am 9. und 10. Dezember findet das 8. Chrome Dev Summit statt. Aber dieses Mal kommen wir zu dir. Wir bieten die neuesten Updates, viele neue Inhalte und jede Menge Chromies.

Es gibt jede Menge interessante Vorträge, Workshops, Sprechstunden usw. und wir sind im YouTube-Chat, um eure Fragen zu beantworten. Weitere Informationen und wie du nicht nur zuschauen, sondern auch mitmachen kannst

Kamera schwenken, neigen, zoomen

Die meisten Konferenzräume bei Google haben Kameras mit Schwenk-, Neige- und Zoomfunktionen, damit die Kamera auf die Personen im Raum gerichtet werden kann. Aber nicht nur schicke Konferenzkameras unterstützen die PTZ – Schwenken, Neigen und Zoomen – auch viele Webcams unterstützen diese Funktion.

Sobald ein Nutzer die Berechtigung erteilt hat, können Sie ab Chrome 87 die PTZ-Funktionen einer Kamera steuern.

Die Funktionsweise der Feature-Erkennung unterscheidet sich ein wenig von dem, was Sie wahrscheinlich gewohnt sind. Sie müssen navigator.mediaDevices.getSupportedConstraints() aufrufen, um zu prüfen, ob der Browser die PTZ unterstützt.

const supports = navigator.mediaDevices.getSupportedConstraints();

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

Berechtigungsanfrage für PTZ

Wie bei allen anderen leistungsstarken APIs muss der Nutzer dann die Berechtigung für die Kamera, aber auch für die PTZ-Funktion erteilen.

Wenn Sie die Berechtigung für die PTZ-Funktion anfordern möchten, rufen Sie navigator.mediaDevices.getUserMedia() mit den PTZ-Einschränkungen auf. Daraufhin wird der Nutzer aufgefordert, sowohl der normalen Kamera als auch der Kamera mit PTZ-Funktion Berechtigungen zu erteilen.


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

Schließlich erfahren Sie über einen Aufruf von MediaStreamTrack.getSettings(), was die Kamera unterstützt.

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

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

Sobald der Nutzer die Berechtigung erteilt hat, kannst du videoTrack.applyConstraints() aufrufen, um Schwenken, Neigen und Zoomen anzupassen.

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

Ich persönlich bin von der PTZ begeistert, also kann ich meine chaotische Küche verstecken, aber Sie müssen sich das Video ansehen,

Francois hat einen tollen Artikel Control camera pan, tilt, and zoom (Kamera schwenken, neigen und zoomen) auf web.dev mit Codebeispielen, ausführlichen Informationen zur besten Methode zum Anfordern der Berechtigung und einer Demo veröffentlicht, mit der Sie ausprobieren können, ob Ihre Webcam PTZ unterstützt.

Bereichsanfragen und Service Worker

Mit HTTP-Bereichsanfragen, die seit einigen Jahren in den wichtigsten Browsern verfügbar sind, können Server angeforderte Daten in Teilen an den Client senden. Dies ist besonders nützlich bei großen Mediendateien, bei denen die Nutzererfahrung durch eine flüssigere Wiedergabe, verbessertes Scrubbing und bessere Funktionen zum Anhalten und Fortsetzen verbessert wird.

In der Vergangenheit arbeiteten Bereichsanforderungen und Service-Worker nicht gut zusammen, was Entwickler dazu zwingt, Behelfslösungen zu erstellen. Ab Chrome 87 funktioniert die Übergabe von Bereichsanfragen aus einem Service Worker an das Netzwerk einfach.

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

Eine Erklärung zu den Problemen mit Bereichsanfragen und den Änderungen in Chrome 87 finden Sie im Artikel Handling range requests in a service worker von Jeff auf web.dev.

Origin Trial: Font Access API

Screenshot des Bildeditors Photopea

Design-Apps wie Figma, Gravit Designer und Photopea ins Web zu bringen, ist toll und wir werden noch viel mehr ins Web holen. Das Web bietet zwar eine Fülle von Schriftarten, aber nicht alle sind verfügbar.

Viele Designer haben auf ihrem Computer Schriftarten installiert, die für ihre Arbeit entscheidend sind. Dazu gehören beispielsweise Schriftarten für Firmenlogos oder spezielle Schriftarten für CAD- und andere Designanwendungen.

Mit der Font Access API, die in Chrome 87 einen Test für Ursprünge startet, kann eine Website jetzt die installierten Schriftarten auflisten und Nutzern Zugriff auf alle Schriftarten auf ihrem System gewähren.


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

Websites können sich auf niedrigeren Ebenen einklinken, um auf die Schriftart-Bytes zuzugreifen. So können sie ihre eigene OpenType-Layoutimplementierung vornehmen oder Vektorfilter oder ‑transformationen auf die Schriftzeichenformen anwenden.

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

Lies Toms Artikel Erweiterte Typografie mit lokalen Schriftarten verwenden auf web.dev mit allen Details und dem Link zum Origin-Test, damit du es selbst ausprobieren kannst.

Und vieles mehr

  • Übertragbare Streams – ReadableStream-, WritableStream- und TransformStream-Objekte können jetzt als Argumente an postMessage() übergeben werden.
  • Wir haben die detailliertesten flow-relative-Funktionen der CSS-Spezifikation für logische Eigenschaften und Werte implementiert, einschließlich Abkürzungen und Offsets, um die Eingabe dieser logischen Eigenschaften und Werte etwas zu vereinfachen. So kann beispielsweise eine einzelne margin-block-Property separate margin-block-start- und margin-block-end-Regeln ersetzen.
  • ascent-override, descent-override und line-gap-override wurden neue @font-face-Deskriptoren hinzugefügt, um die Schriftschnitt-Messwerte zu überschreiben.
  • Es gibt mehrere neue text-decoration- und underline-Properties.
  • Außerdem gibt es eine Reihe von Änderungen im Zusammenhang mit der plattformübergreifenden Isolation.

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 87.

Abonnieren

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Sie erhalten dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 88 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.