Neu in Chrome 87

Pete LePage

Twitter GitHub Glitch Mastodon Startseite

Chrome 87 wird als stabile Version eingeführt.

Dazu sollten Sie Folgendes wissen:

• Der Chrome Dev Summit findet am 9. und 10. Dezember wieder statt.
• Bei entsprechenden Webcams können Sie jetzt das Schwenken, Neigen und Zoomen steuern.
• Für Bereichsanfragen und Service Worker sind weniger Behelfslösungen erforderlich.
• Die Font Access API startet ihren Ursprungstest.
• Und es gibt noch viele weitere.

Ich bin Pete LePage, arbeite von zu Hause aus und lasse uns ansehen, was es für Entwickler bei Chrome 87 Neues gibt.

Chrome Dev Summit

Am 9. und 10. Dezember findet wieder der Chrome Dev Summit statt und sein 8. Kapitel beginnt. Aber diesmal geht es um Sie. Es gibt die neuesten Updates, viele neue Inhalte und viele Chrome-Nutzer.

Es gibt jede Menge großartige Vorträge, Workshops, Sprechstunden usw. Im YouTube-Chat werden wir deine Fragen beantworten. Hier findest du weitere Informationen dazu, wie du nicht nur Videos ansehen, sondern auch mitmachen kannst.

Kamera schwenken, neigen, zoomen

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

Ab Chrome 87 können Nutzer, die eine Berechtigung erteilt haben, die PTZ-Funktionen einer Kamera steuern.

Die Funktionserkennung unterscheidet sich ein wenig von der, die Sie wahrscheinlich kennen. Sie müssen navigator.mediaDevices.getSupportedConstraints() aufrufen, um festzustellen, ob der Browser die PTZ unterstützt.

const supports = navigator.mediaDevices.getSupportedConstraints();

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

Wie bei allen anderen leistungsstarken APIs muss der Nutzer dann der Kamera, aber auch der PTZ-Funktionalität eine Berechtigung erteilen.

Wenn Sie die Berechtigung für die PTZ-Funktion anfordern möchten, rufen Sie navigator.mediaDevices.getUserMedia() mit den PTZ-Einschränkungen auf. Dadurch wird der Nutzer aufgefordert, sowohl normale Kamera- als auch Kameraberechtigungen mit PTZ-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.
}

Durch einen Aufruf von MediaStreamTrack.getSettings() erfahren Sie, 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 finde die PTZ wirklich sehr spannend, sodass ich meine unübersichtliche Küche verstecken kann, aber ihr seht euch das Video an, um das zu sehen!

Francois hat einen tollen Beitrag zum Thema Kameraschwenken, Neigen und Zoomen der Kamera steuern auf web.dev veröffentlicht. Er enthält Codebeispiele, beschreibt, wie Sie die Berechtigung am besten anfordern, und eine Demo, damit Sie es ausprobieren und testen können, ob Ihre Webcam PTZ unterstützt.

Bereichsanfragen und Service Worker

Mit HTTP-Bereichsanfragen, die seit mehreren Jahren in den wichtigsten Browsern verfügbar sind, können Server angeforderte Daten in Blöcken an den Client senden. Dies ist besonders bei großen Mediendateien nützlich, bei denen die Nutzerfreundlichkeit durch eine reibungslosere Wiedergabe, ein verbessertes Scrubbing und bessere Pausen- und Fortsetzungsfunktionen verbessert wird.

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

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

Eine Erläuterung der Probleme mit Bereichsanfragen und den Neuerungen in Chrome 87 finden Sie in Jeffs Artikel Bereichsanfragen in einem Service Worker verarbeiten auf web.dev.

Ursprungstest: Font Access API

Es ist toll, Design-Apps wie Figma, Gravit Designer und Photopea im Web zu nutzen, und es werden immer mehr. Das Web bietet eine Fülle von Schriftarten, aber nicht alle sind im Web verfügbar.

Viele Designer haben auf ihrem Computer einige Schriftarten installiert, die für ihre Arbeit wichtig sind. z. B. Schriftarten für das Firmenlogo oder spezielle Schriftarten für CAD und andere Designanwendungen.

Mit der Font Access API, die einen Ursprungstest in Chrome 87 startet, kann eine Website jetzt die installierten Schriftarten auflisten, sodass Nutzer auf alle Schriftarten in ihrem System zugreifen können.

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

Außerdem können Websites sich auf niedrigeren Ebenen verknüpfen, um Zugriff auf die Schriftartbyte zu erhalten, sodass sie ihre eigene OpenType-Layoutimplementierung oder Vektorfilter oder -transformationen für die Symbolformen durchführen können.

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

Sieh dir Toms Artikel Use advanced typeography with local fonts (Erweiterte Typografie mit lokalen Schriftarten verwenden) auf web.dev mit allen Details und dem Link zum Ursprungstest an, damit du es selbst ausprobieren kannst.

Und noch 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 Attribute und Werte implementiert, einschließlich Kurzschreibweisen und Offsets, um das Schreiben dieser logischen Eigenschaften und Werte zu vereinfachen. So können beispielsweise durch eine einzelne margin-block-Property separate margin-block-start- und margin-block-end-Regeln ersetzt werden.
• ascent-override, descent-override und line-gap-override wurden neue @font-face-Deskriptoren hinzugefügt, um Messwerte für die Schriftart zu überschreiben.
• Es gibt mehrere neue text-decoration- und underline-Properties.
• Außerdem gibt es eine Reihe von Änderungen in Bezug auf die ursprungsübergreifende Isolierung.

Weitere Informationen

Hier sind nur einige der wichtigsten Punkte aufgeführt. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 87.

• Das ist neu in den Chrome-Entwicklertools (87)
• Chrome 87 wird eingestellt und entfernt
• ChromeStatus.com: Updates für Chrome 87
• Neuerungen bei JavaScript in Chrome 87
• Liste mit Änderungen des Chromium-Quell-Repositorys

Abonnieren

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Sie werden per E-Mail benachrichtigt, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 88 veröffentlicht wird, melde ich mich, um Ihnen mitzuteilen, was es Neues in Chrome gibt!