Der Zugriff auf Kamera und Mikrofon läuft im Web seit Jahren über eine einzige JavaScript-Funktion. Das Chrome-Team schlägt jetzt einen anderen Weg vor: ein eigenes HTML-Element, das die Freigabe direkt ins Markup holt. Für Videocall-Tools, Bewerbungsportale und jede Web-App mit Aufnahmefunktion ändert sich damit die Grundlage.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Das HTML-Element usermedia verlagert den Kamera- und Mikrofonzugriff vom Skript in die Seitenstruktur und koppelt den Berechtigungsdialog an einen echten Klick. Statt getUserMedia im Code aufzurufen, platzieren Entwickler künftig einen deklarativen Tag mit einem vom Browser kontrollierten Button. Vorgestellt hat das Chrome-Team <usermedia> als Nachfolger des Elements geolocation, das seit Chrome 144 nach demselben Muster arbeitet.

Das Wichtigste in Kürze

  • Das Element usermedia ersetzt den imperativen getUserMedia-Aufruf durch deklaratives Markup mit einem browsereigenen Freigabe-Button.
  • Der Berechtigungsdialog erscheint erst nach einer echten Nutzeraktion, was ein verlässliches Einwilligungssignal liefert.
  • Cisco meldet im Vorabtest einen Sprung der Freigabe-Erfolgsquote von rund 10 auf über 65 Prozent.
  • Der Standard steckt noch im Origin Trial (Chrome 151), Firefox und Safari haben sich nicht festgelegt.

Was macht das Element usermedia anders als getUserMedia?

Eine Videotürklingel und eine gravierte Metallplatte mit der Aufschrift „Bitte klingeln: Kamera und Mikro“ sind nebeneinander an einer weißen Wand befestigt. Auf der Platte sind zusätzlich ein Glocken-, Kamera- und Mikrofonsymbol zu sehen. Unter der Platte klebt ein gelber Haftnotizzettel mit der handschriftlichen Aufschrift: „Der Hund hört *alles*.“
Browser übernimmt MediaStream-Abflauf deklarativ: Klick startet Prompt, setConstraints regelt Hardware-Anforderungen, stream-Eigenschaft liefert MediaStream-Objekt mit Events

Deklarativ statt imperativ. Der Browser übernimmt den kompletten Ablauf: Klick, Prompt, Übergabe des Medienstreams. Ein Tag genügt, ein Button steckt als Kindelement darin, und die Hardware-Wünsche liefert die Methode setConstraints. Nach erfolgreicher Freigabe stellt die Eigenschaft stream das MediaStream-Objekt bereit, dazu feuern die Events stream, error und cancel. Der klassische Callback-Salat aus der getUserMedia-Welt entfällt.

Klick als Vertrauenssignal. Der Berechtigungsdialog springt ausschließlich nach einem echten Klick auf den vom Browser kontrollierten Button an. Diese Nutzeraktivierung gibt dem Browser laut Chrome-Team ein verlässliches Signal echter Absicht. Das schließt die Lücke, dass Skripte den Dialog aus dem Nichts auslösen und Nutzer reflexhaft blockieren. Wie moderne Web-Standards Boilerplate abbauen, zeigt sich auch andernorts, etwa wenn modernes CSS 150 Zeilen JavaScript spart oder Tooltip-Bibliotheken durch native Bordmittel überflüssig werden.

Löst das Element ein echtes Problem?

Eine Legofigur auf einer Leiter betätigt einen Lichtschalter mit dem Text „Nur du entscheidest“
Der Berechtigungsdialog springt erst an, wenn der Nutzer selbst den Schalter umlegt.

Das Berechtigungsloch. Ja, und die Zahlen sind deutlich. Nach einer einmaligen Ablehnung findet kaum jemand den Weg zurück durch die Browser-Einstellungen. Genau hier setzt das Element an: Cisco beobachtete im Origin Trial einen Anstieg der Freigabe von rund 10 auf über 65 Prozent, Zoom meldet 46,9 Prozent weniger Aufnahmefehler, Google Meet 17 Prozent weniger Meldungen über ein angeblich defektes Mikrofon.

Der Kamerazugriff wandert dorthin, wo er hingehört: an einen sichtbaren Knopf, den der Nutzer bewusst drückt.

— Markus Seyfferth, Chefredakteur Dr. Web

Ein Muster, kein Einzelfall. <usermedia> steht in einer Reihe: Nach dem Element geolocation sind spezialisierte Elemente wie camera und microphone geplant, alle als browserseitige Vermittler. Der Ansatz geht auf das frühere generische permission-Element aus der PEPC-Initiative zurück. Diese Standard-Bewegung zurück zur Deklaration kennt die Szene bereits, siehe die Debatten um das Comeback der Server-Session beim Login oder die neue HTTP-Methode QUERY. Grundsätzliches zu Schnittstellen liefert unser Ratgeber API verstehen und nutzen.

Was bedeutet das für Webentwickler im DACH-Raum?

Oranges Mikrofon-Kamera-Gerät mit rotem Bollenhut vor weißem Hintergrund
W3C Media Capture Extensions in Chrome 151 als Origin Trial verfügbar. Firefox und Safari zeigen Interesse. Feature-Detection über HTMLUserMediaElement für Fallback auf getUserMedia

Noch kein Verlass. Der Standard liegt bei den W3C Media Capture Extensions, ist aber erst als Origin Trial in Chrome 151 verfügbar. Firefox und Safari signalisieren Interesse ohne Zusage. In der Ankündigung des Chrome-Teams steht die Feature-Detection über HTMLUserMediaElement, damit ältere Browser sauber auf getUserMedia zurückfallen.

DSGVO-Pluspunkt. Der klickgebundene Prompt liefert ein dokumentierbares Einwilligungssignal und passt damit zum Datenschutz. Drei Schritte lohnen sich vor dem Einsatz:

  • Das eigene Videocall- oder Bewerbungstool auf die Fallback-Logik testen und per Feature-Detection absichern.
  • Die Datenschutzerklärung an die klickbasierte Zugriffslogik anpassen.
  • getUserMedia als Rückfallebene behalten, solange Firefox und Safari nicht liefern.

Zum Auffrischen des HTML-Fundaments liefern HTML5 ist tot, HTML lebt und die Frage nach dem modernen CSS-Reset den Kontext.

Mehr Newshunger?

Eine stilisierte Kamera mit usermedia Schriftzug und einem Smiley im Objektiv auf weißem Grund
Modernes CSS übernimmt Funktionen, für die früher JavaScript-Bibliotheken nötig waren. Resets werden obsolet
4,1 16 Bewertungen

Wie hat Ihnen dieser Artikel gefallen?