Das HTML-Element <usermedia>

Mari Viana

Minh Le

Veröffentlicht: 29. Juni 2026

Nach der Einführung des <geolocation>-Elements in Chrome 144 ist das nächste funktionale Steuerelement in der Suite der Capability-Elemente das HTML-Element <usermedia>. Dieses Element ist ab Chrome 151 verfügbar und markiert die nächste Phase der Umstellung von allgemeinen Berechtigungsanfragen auf gezielte und funktionale Steuerelemente für den Zugriff auf Kamera- und Mikrofonstreams. Durch die Umstellung von skriptgesteuerten Aufforderungen auf eine deklarative und nutzeraktivierte Erfahrung reduziert <usermedia> den Boilerplate-Code, verbessert die Sicherheit und bietet einen nahtlosen Wiederherstellungspfad für Nutzer, die den Zugriff zuvor abgelehnt haben. So wird das langjährige Problem mit Berechtigungen effektiv gelöst.

Von der Berechtigungsverwaltung zur Funktionskontrolle

Das <usermedia>-Element ist das nächste spezielle Steuerelement, das in der Suite „Capability Elements“ eingeführt wird, nachdem <geolocation> erfolgreich eingeführt wurde. Durch diese Umstellung vom ursprünglichen und generischen <permission>-Vorschlag – Teil der PEPC-Initiative – kann der Browser die einzigartigen Komplexitäten und Verhaltensweisen verschiedener Hardwarefunktionen effektiver verarbeiten. Während sich der ursprüngliche Vorschlag hauptsächlich auf die Verwaltung von Berechtigungsstatus wie „Zulassen“ und „Ablehnen“ konzentrierte, fungieren Capability-Elemente als Datenvermittler.

Das <geolocation>-Element stellt Ihrer Website ein Standortobjekt zur Verfügung und <usermedia> verwaltet den gesamten Ablauf für den Kamera- und Mikrofonzugriff. Es erfasst die Nutzerabsicht, verwaltet den Browser-Prompt und stellt das MediaStream-Objekt für die Anwendung bereit. Durch diese Änderung sind keine separaten getUserMedia()-Aufrufe mehr erforderlich. Die Implementierung wird vereinfacht und der Browser erhält ein vertrauenswürdiges Signal für die Absicht des Nutzers.

Konzeptvalidierung

Die Daten aus dem ersten Origin Trial haben gezeigt, dass die kontextbezogenen und nutzerinitiierten Berechtigungssteuerungen die Erfolgsraten der Nutzer deutlich verbessern.

• Cisco hat beobachtet, dass Nutzer, die Berechtigungen anfangs abgelehnt haben, mit den alten Aufforderungen nur mit einer Wahrscheinlichkeit von etwa 10% Berechtigungen erteilt haben. Mit dem neuen Element stieg diese Rate jedoch auf über 65%.
• Zoom verzeichnete eine Reduzierung von 46,9% bei Fehlern beim Erfassen von Kamera- oder Mikrofondaten, z. B. Blockierungen auf Systemebene, da das Element verwendet wurde, um Nutzer durch die Wiederherstellung zu führen.
• Bei Google Meet gab es 17% weniger Feedback zum Thema „Mikrofon funktioniert nicht“ und eine Steigerung von 131% bei der erfolgreichen Wiederherstellung der Berechtigung für Nutzer, die den Zugriff ursprünglich abgelehnt hatten.

Warum sollte das <usermedia>-Element verwendet werden?

Das <usermedia>-Element baut auf den von <geolocation> festgelegten Mustern auf und geht auf die zentralen Herausforderungen beim Anfordern leistungsstarker Funktionen ein. Media-Anfragen basieren auf imperativen JavaScript-Aufrufen, die häufig Aufforderungen außerhalb des Kontextes auslösen. Wenn Sie Ihre Website versehentlich blockieren, müssen Sie tief in die Browsereinstellungen eintauchen, um diese Entscheidung rückgängig zu machen. Das ist eine „Berechtigungslücke“, die oft dazu führt, dass Funktionen nicht mehr genutzt werden.

Das <usermedia>-Element bietet folgende Vorteile:

• Eindeutige Intention und Timing:Da die Aufforderung erst nach einem physischen Tippen auf ein vom Browser gesteuertes Element angezeigt wird, ist sie ein zuverlässiges Signal für die Intention. So kann der Browser automatische stille Blöcke umgehen, die häufig dazu führen, dass typische durch Skript ausgelöste Anfragen fehlschlagen.
• Vereinfachte Wiederherstellung:Wenn der Zugriff zuvor verweigert wurde, wird durch Tippen auf das Element ein spezieller Wiederherstellungsvorgang ausgelöst, mit dem Sie Ihre Kamera oder Ihr Mikrofon sofort auf der Seite reaktivieren können, ohne komplexe Browsereinstellungen aufrufen zu müssen.
• Direkter Streamzugriff:Als Datenvermittler stellt das Element den Media-Stream direkt zur Verfügung. Dadurch wird der Boilerplate-Code reduziert, der zum Verwalten von Callbacks und Fehlerstatus in Ihrer Anwendung erforderlich ist.

Implementierung

Die Einbindung des Elements erfordert deutlich weniger Boilerplate-Code als die alte JavaScript API. Gemäß dem deklarativen Muster, das durch das <geolocation>-Element festgelegt wird, können Sie das <usermedia>-Tag in Ihren HTML-Code einfügen und Hardwareanforderungen mit der setConstraints()-Methode konfigurieren.

<usermedia id="media-ctrl">
  <button>Enable camera and microphone</button>
</usermedia>

const el = document.getElementById('media-ctrl');

// Specify hardware preferences before user interaction:
el.setConstraints({
    video: { width: 1280, height: 720 },
    audio: { echoCancellation: true }
});

// Handle successful stream acquisition:
el.addEventListener('stream', () => {
  videoPreview.srcObject = el.stream;
});

// Handle stream acquisition failure:
el.addEventListener('error', () => {
  console.error(`Access failed: ${el.error?.name}`);
});

// Handle prompt cancellation or dismissal:
el.addEventListener('cancel', () => {
  console.log('Permission prompt was dismissed by the user.');
});

Wichtige Attribute und Eigenschaften

• stream: Eine schreibgeschützte Property, die das MediaStream-Objekt bereitstellt, sobald der Nutzer den Zugriff gewährt hat.
• setConstraints(): Eine Methode, mit der Entwickler Hardwareeinstellungen wie deviceId oder Auflösung vor der Nutzerinteraktion aktualisieren können.
• error: Eine schreibgeschützte Property, die bei einem Fehler oder einer Ablehnung der Anfrage ein DOMException (z. B. ein NotAllowedError) zurückgibt.
• onstream: Ein Event-Handler, der sofort ausgelöst wird, sobald die Media-Tracks abgerufen werden.
• onerror: Ein Event-Handler, der ausgelöst wird, wenn ein Versuch, einen Stream zu erhalten, fehlschlägt.
• oncancel: Ein Event-Handler, der ausgelöst wird, wenn der Nutzer die Berechtigungsaufforderung während der Akquisition abbricht oder schließt.

Stileinschränkungen

Um das Vertrauen der Nutzer zu erhalten und irreführende Designmuster zu verhindern, gelten für das <usermedia>-Element dieselben strengen Stilbeschränkungen wie für andere Capability-Elemente:

• Lesbarkeit:Der Browser prüft, ob Text- und Hintergrundfarben einen ausreichenden Kontrast (mindestens 3:1) aufweisen, damit die Anfrage immer lesbar ist. Sie müssen den Alphakanal (opacity) auf 1 festlegen, damit das Element nicht täuschend transparent ist.
• Größe und Abstand:Der Browser erzwingt Mindest- und Höchstwerte für width, height und font-size. Dadurch werden negative Ränder oder Umriss-Offsets deaktiviert, um zu verhindern, dass das Element visuell verdeckt wird.
• Visuelle Integrität:Der Browser begrenzt verzerrende Effekte. transform unterstützt beispielsweise nur 2D-Übersetzungen und proportionale Skalierung.
• CSS-Pseudoklassen:Das Element unterstützt zustandsbasiertes Styling, z. B. :granted (wird aktiviert, sobald die Berechtigung aktiv ist und der Stream abgerufen wird), sowie Standardinteraktionszustände wie :hover und :active.

Progressive Enhancement und Migrationsstrategie

Gemäß dem von <geolocation> festgelegten Designmuster ist das <usermedia>-Element so konzipiert, dass die Leistung bei Bedarf reibungslos herabgesetzt wird. Browser, die das Element nicht unterstützen, behandeln es als HTMLUnknownElement und rendern seine untergeordneten Elemente. So können Sie allen Nutzern eine Fallback-Lösung anbieten.

Benutzerdefiniertes Fallback-Muster

So können Sie die Unterstützung für das <usermedia>-Element in JavaScript programmatisch erkennen:

if ('HTMLUserMediaElement' in window) {
  // Use modern <usermedia> element logic
} else {
  // Fallback to legacy getUserMedia() API
}

Verwenden Sie diese Erkennungslogik, um dem <usermedia>-Element eine Standardschaltfläche hinzuzufügen, mit der die alte getUserMedia()-API ausgelöst wird:

<usermedia id="stream-handler">
    <button id="fallback-stream-handler">
        Enable Camera and Mic
    </button>
</usermedia>

// Function for handling video/audio streams:
function handleStream (event) {
  /* ... */
}

if ('HTMLUserMediaElement' in window) {
  // In this case, we have <usermedia> element support:
  const streamHandler = document.getElementById('stream-handler');

  streamHandler.addEventListener('stream', event => {
    handleStream(event);
  });
} else {
  // <usermedia> element support is missing, so fall back instead:
  const fallbackStreamHandler = document.getElementById('fallback-stream-handler');

  fallbackStreamHandler.addEventListener('click', event => {
    navigator.mediaDevices.getUserMedia({video: true, audio: true}).then(handleStream);
  });
}

Migration für Teilnehmer des Ursprungstests

Für Entwickler, die das experimentelle und generische <permission>-Element während des Ursprungstests integriert haben, ist der Übergang zu <usermedia> minimal.

1. Tag-Aktualisierung:Ersetzen Sie <permission type="camera microphone"> durch <usermedia>, damit alle Selektoren, die auf die vorherigen <permission>-Elemente ausgerichtet sind, stattdessen das <usermedia>-Element verwenden.
2. Funktionserkennung:Aktualisierungsprüfungen von HTMLPermissionElement zu HTMLUserMediaElement

Roadmap

Das <usermedia>-Element verarbeitet kombinierte Audio- und Videoanfragen. Die Roadmap für zukünftige Capability-Elemente umfasst Folgendes:

• <camera>: Konzentriert sich speziell auf Szenarien, in denen nur Videos verwendet werden.
• <microphone>: Konzentriert sich speziell auf Szenarien, in denen nur Audioinhalte verwendet werden.

Sie können sehen, wie diese funktionsspezifischen Elemente Entwicklern helfen, intuitivere und vertrauenswürdigere Media-Anwendungen zu entwickeln. Weitere Informationen finden Sie im technischen Leitfaden zu Capability-Elementen.

Weitere Informationen

• Capability-Elemente: <usermedia>-Elemente
• Spezifikation
• Das <geolocation>-HTML-Element