Neu in Chrome 87

Pete LePage

Chrome 87 wird jetzt in der stabilen Version eingeführt.

Dazu sollten Sie Folgendes wissen:

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

Chrome Dev Summit

Logo: Chrome Dev Summit

Am 9. und 10. Dezember findet das Chrome Dev Summit zum achten Mal statt. Dieses Mal kommen wir aber zu Ihnen. Wir haben die neuesten Updates, viele neue Inhalte und jede Menge Chromies für dich.

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

Schwenken, Neigen und Zoomen der Kamera

Die meisten Konferenzräume bei Google sind mit Kameras ausgestattet, die geschwenkt, geneigt und gezoomt werden können, sodass die Kamera auf die Personen im Raum gerichtet werden kann. Aber nicht nur hochwertige Konferenzkameras unterstützen PTZ (Schwenken, Neigen, Zoomen), sondern auch viele Webcams.

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

Die Funktionserkennung unterscheidet sich etwas von dem, was Sie wahrscheinlich gewohnt sind. Sie müssen navigator.mediaDevices.getSupportedConstraints() anrufen, um zu prüfen, ob der Browser PTZ unterstützt.

const supports = navigator.mediaDevices.getSupportedConstraints();

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

Berechtigungsaufforderung 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-Funktionalität anfordern möchten, rufen Sie navigator.mediaDevices.getUserMedia() mit den PTZ-Einschränkungen auf. Der Nutzer wird dann aufgefordert, sowohl die reguläre Kameraberechtigung als auch die Kameraberechtigung mit PTZ-Funktion 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.
}

Ein Aufruf von MediaStreamTrack.getSettings() gibt dir schließlich Auskunft darüber, 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, können Sie 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&>#39;, async () = {
    const opts = { advanced: [{ pan: input.value }] };
    await videoTrack.applyConstraints(opts);
  });
}

Ich persönlich freue mich sehr auf die PTZ-Funktion, damit ich meine unaufgeräumte Küche verbergen kann. Aber das müsst ihr euch im Video ansehen.

Francois hat auf web.dev einen tollen Beitrag zum Steuern von Schwenken, Neigen und Zoomen der Kamera veröffentlicht. Er enthält Codebeispiele, vollständige Details zur besten Methode zum Anfordern der Berechtigung und eine Demo, damit Sie die Funktion ausprobieren und sehen können, ob Ihre Webcam PTZ unterstützt.

Bereichsanfragen und Service Worker

HTTP-Bereichsanfragen, die seit mehreren Jahren in den wichtigsten Browsern verfügbar sind, ermöglichen es Servern, angeforderte Daten in Blöcken an den Client zu senden. Das ist besonders bei großen Mediendateien nützlich, da die Nutzerfreundlichkeit durch eine flüssigere Wiedergabe, ein besseres Scrubbing und verbesserte Funktionen zum Pausieren und Fortsetzen verbessert wird.

Bisher haben Bereichsanfragen und Service Worker nicht gut zusammengearbeitet, sodass Entwickler Workarounds erstellen mussten. Ab Chrome 87 werden Bereichsanfragen, die von einem Service Worker an das Netzwerk weitergeleitet werden, einfach funktionieren.

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

Eine Erklärung der Probleme mit Bereichsanfragen und der Ä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 im Web verfügbar zu machen, ist großartig und wir sehen, dass noch viel mehr kommt. Im Web sind zwar viele Schriftarten verfügbar, aber nicht alle.

Viele Designer haben auf ihrem Computer Schriftarten installiert, die für ihre Arbeit unerlässlich 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 als Origin Trial eingeführt wird, 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 Glyphenformen 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);
}

Im Artikel Use advanced typography with local fonts auf web.dev finden Sie alle Details und den Link zum Origin Trial, damit Sie die Funktion selbst ausprobieren können.

Und vieles mehr

  • Übertragbare Streams: Die Objekte ReadableStream, WritableStream und TransformStream können jetzt als Argumente an postMessage() übergeben werden.
  • Wir haben die detailliertesten flow-relative-Funktionen der CSS Logical Properties and Values-Spezifikation implementiert, einschließlich der Kurzschreibweisen und Offsets, um das Schreiben dieser logischen Eigenschaften und Werte zu vereinfachen. Beispiel: Ein einzelnes margin-block-Attribut kann separate margin-block-start- und margin-block-end-Regeln ersetzen.
  • @font-face-Deskriptoren wurden ascent-override, descent-override und line-gap-override hinzugefügt, um Messwerte der Schriftart zu überschreiben.
  • Es gibt mehrere neue text-decoration- und underline-Attribute.
  • Außerdem gibt es eine Reihe von Änderungen im Zusammenhang mit der ursprungsübergreifenden Isolation.

Weitere Informationen

Dies sind nur einige der wichtigsten Neuerungen. 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, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und sobald Chrome 88 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.