Introductie van het HTML-element

Mari Viana

Minh Le

Gepubliceerd: 29 juni 2026

Na de introductie van het <geolocation> -element in Chrome 144 is het volgende functionele besturingselement in de reeks Capability Elements het HTML-element <usermedia> . Dit element, beschikbaar vanaf Chrome 151, markeert de volgende fase in de overgang van generieke toestemmingsverzoeken naar gerichte en functionele besturingselementen voor toegang tot camera- en microfoonstreams. Door af te stappen van scriptgestuurde prompts naar een declaratieve en door de gebruiker geactiveerde ervaring, vermindert <usermedia> de hoeveelheid boilerplate-code, verbetert het de beveiliging en biedt het een naadloos herstelpad voor gebruikers die eerder de toegang hebben geweigerd, waarmee het aloude toegangsprobleem effectief wordt opgelost.

Van toegangsbeheer tot capaciteitscontrole

Het <usermedia> -element is de volgende gespecialiseerde besturingselement dat wordt gelanceerd in de Capability Elements-suite, na de succesvolle introductie van <geolocation> . Deze overgang van het oorspronkelijke en generieke <permission> -voorstel – onderdeel van het PEPC-initiatief – stelt de browser in staat om de unieke complexiteit en het gedrag van verschillende hardwaremogelijkheden effectiever af te handelen. Waar het eerdere voorstel zich voornamelijk richtte op het beheren van toestemmingsstatussen, zoals toestaan ​​versus weigeren, fungeren Capability Elements als data-bemiddelaars.

Het <geolocation> -element levert een locatieobject aan uw site, en <usermedia> beheert het volledige proces voor toegang tot de camera en microfoon. Het registreert de intentie van de gebruiker, beheert de prompt in de browser en levert het MediaStream object aan de applicatie. Deze verschuiving elimineert de noodzaak voor afzonderlijke getUserMedia() aanroepen, vereenvoudigt de implementatie en zorgt ervoor dat de browser een betrouwbaar signaal ontvangt over de intentie van de gebruiker.

Validatie van het concept

Uit praktijkgegevens van de eerste Origin-proef bleek dat de contextuele en door de gebruiker geïnitieerde toestemmingscontroles de succespercentages van gebruikers aanzienlijk verbeteren.

• Cisco constateerde dat gebruikers die aanvankelijk toestemming weigerden, slechts in ongeveer 10% van de gevallen succesvol toestemming verleenden met behulp van de oude prompts, maar dat percentage steeg naar meer dan 65% met het nieuwe element.
• Zoom meldde een afname van 46,9% in fouten bij het opnemen van camera- of microfoonproblemen, zoals blokkeringen op systeemniveau, door het element te gebruiken om gebruikers te begeleiden bij het herstelproces;
• Google Meet zag een afname van 17% in meldingen als "microfoon werkt niet" en een toename van 131% in het succesvol herstellen van toegangsrechten voor gebruikers die aanvankelijk de toegang hadden geweigerd.

Waarom het <usermedia> -element gebruiken?

Voortbouwend op de patronen die zijn vastgesteld door <geolocation> , pakt het <usermedia> -element de kernuitdagingen aan van het aanvragen van krachtige functionaliteiten. Mediaverzoeken zijn afhankelijk van imperatieve JavaScript-aanroepen die vaak prompts uit de context activeren. Als u per ongeluk uw site blokkeert, vereist het terugdraaien van die beslissing dat u diep in de browserinstellingen moet duiken, een "toegangsgat" dat vaak leidt tot het niet gebruiken van functionaliteiten.

Het <usermedia> -element lost deze problemen op door het volgende te bieden:

• Duidelijke intentie en timing: Omdat de prompt pas verschijnt na een fysieke tik op een door de browser beheerd element, geeft deze een betrouwbaar signaal van intentie. Hierdoor kan de browser geautomatiseerde stille blokkeringen omzeilen die er vaak voor zorgen dat typische, door scripts geactiveerde verzoeken mislukken.
• Vereenvoudigd herstel: Als de toegang eerder was geweigerd, activeert het tikken op het element een speciaal herstelproces waarmee u uw camera of microfoon direct op de pagina opnieuw kunt inschakelen, zonder door complexe browserinstellingen te hoeven navigeren.
• Directe toegang tot de stream: Als datamediator stelt het element de mediastream direct beschikbaar. Dit vermindert de hoeveelheid standaardcode die nodig is voor het afhandelen van callbacks en foutmeldingen in uw applicatie.

Uitvoering

Het integreren van dit element vereist aanzienlijk minder standaardcode dan de oude JavaScript API. Door het declaratieve patroon van het <geolocation> -element te volgen, kunt u de <usermedia> -tag aan uw HTML toevoegen en de hardwarevereisten configureren met de setConstraints() methode.

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

Belangrijkste kenmerken en eigenschappen

• stream : Een alleen-lezen eigenschap die het MediaStream object beschikbaar stelt zodra de gebruiker succesvol toegang heeft verleend.
• setConstraints() : Een methode waarmee ontwikkelaars hardwarevoorkeuren, zoals deviceId of resolutie, kunnen bijwerken voordat de gebruiker ermee interactie heeft.
• error : Een alleen-lezen eigenschap die een DOMException (bijvoorbeeld een NotAllowedError ) retourneert als het verzoek mislukt of wordt afgewezen.
• onstream : Een gebeurtenishandler die direct wordt geactiveerd zodra de mediabestanden zijn verkregen.
• onerror : Een gebeurtenishandler die wordt geactiveerd wanneer een poging tot streamacquisitie mislukt.
• oncancel : Een gebeurtenisafhandelaar die wordt geactiveerd wanneer de gebruiker de toestemmingsprompt tijdens het verkrijgen van toegang annuleert of sluit.

Stijlbeperkingen

Om het vertrouwen van de gebruiker te waarborgen en misleidende ontwerppatronen te voorkomen, hanteert het <usermedia> -element dezelfde strikte stijlbeperkingen als andere Capability-elementen:

• Leesbaarheid: De browser controleert de tekst- en achtergrondkleuren op voldoende contrast (minimaal 3:1) om ervoor te zorgen dat het verzoek altijd leesbaar is. U moet het alfakanaal ( opacity ) op 1 instellen om te voorkomen dat het element misleidend transparant wordt.
• Grootte en afstand: De browser dwingt minimale en maximale grenzen af ​​voor width , height en font-size . Negatieve marges of omtrekverschuivingen worden uitgeschakeld om te voorkomen dat het element visueel wordt verduisterd.
• Visuele integriteit: De browser beperkt vervormende effecten. transform ondersteunt bijvoorbeeld alleen 2D-verschuivingen en proportionele schaling.
• CSS-pseudoklassen: Het element ondersteunt op status gebaseerde styling, zoals :granted (dat wordt geactiveerd zodra toestemming is verleend en de stream is verkregen), evenals standaard interactiestatussen zoals :hover en :active .

Strategie voor progressieve verbetering en migratie

Volgens het ontwerppatroon van <geolocation> is het <usermedia> -element zo gebouwd dat het ook in andere browsers goed werkt. Browsers die het element niet ondersteunen, behandelen het als een HTMLUnknownElement en renderen de onderliggende elementen. Hierdoor kunt u een alternatieve weergave bieden voor alle gebruikers.

Aangepast terugvalpatroon

Detecteer programmatisch de ondersteuning voor het <usermedia> -element in JavaScript:

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

Gebruik deze detectielogica om een ​​standaardknop toe te voegen binnen het <usermedia> -element, waarmee de verouderde getUserMedia() API wordt geactiveerd:

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

Migratie voor deelnemers aan het Origin Trial

Voor ontwikkelaars die tijdens de Origin-proef de experimentele en generieke <permission> -elementen hebben geïntegreerd, is de overgang naar <usermedia> zo ontworpen dat deze minimaal is.

1. Tag-update: Vervang <permission type="camera microphone"> door <usermedia> om ervoor te zorgen dat alle selectors die verwijzen naar de vorige <permission> -elementen, worden bijgewerkt om in plaats daarvan het <usermedia> -element te gebruiken.
2. Functiedetectie: Update controles van HTMLPermissionElement naar HTMLUserMediaElement

De routekaart voor de toekomst

Hoewel het <usermedia> -element gecombineerde audio- en videoverzoeken afhandelt, omvat de roadmap voor toekomstige Capability Elements het volgende:

• <camera> : Richt zich specifiek op scenario's met alleen video.
• <microphone> : Richt zich specifiek op scenario's met alleen audio.

Je kunt zien hoe deze functionaliteitsspecifieke elementen ontwikkelaars helpen bij het creëren van intuïtievere en betrouwbaardere media-ervaringen. Zie de technische handleiding 'Capability Elements' voor meer informatie.

Gerelateerde links

• Mogelijkheidselementen: <usermedia> element uitleg
• Specificatie
• Introductie van het HTML-element <geolocation>