Présentation de l'élément HTML <usermedia>

Mari Viana

Minh Le

Publié le : 29 juin 2026

Après le lancement de l'élément <geolocation> dans Chrome 144, le prochain contrôle fonctionnel de la suite Éléments de capacité est l'élément HTML <usermedia>. Disponible à partir de Chrome 151, cet élément marque la prochaine phase de la transition des demandes d'autorisation génériques vers des contrôles ciblés et fonctionnels pour accéder aux flux de caméras et de microphones. En passant des invites déclenchées par script à une expérience déclarative et activée par l'utilisateur, <usermedia> réduit le code passe-partout, améliore la sécurité et offre un chemin de récupération fluide pour les utilisateurs qui ont précédemment refusé l'accès, ce qui résout efficacement le problème d'autorisation de longue date.

De la gestion des autorisations au contrôle des fonctionnalités

L'élément <usermedia> est le prochain contrôle spécialisé à être lancé dans la suite d'éléments de capacité, après l'introduction réussie de <geolocation>. Cette transition de la proposition <permission> d'origine et générique, qui fait partie de l'initiative PEPC, permet au navigateur de gérer plus efficacement les complexités et les comportements uniques des différentes capacités matérielles. Alors que la proposition initiale se concentrait principalement sur la gestion des états d'autorisation (autorisé ou refusé, par exemple), les éléments de capacité fonctionnent comme des médiateurs de données.

L'élément <geolocation> fournit un objet de localisation à votre site, et <usermedia> gère l'ensemble du flux d'accès à l'appareil photo et au micro. Il capture l'intention utilisateur, gère l'invite du navigateur et fournit l'objet MediaStream à l'application. Ce changement élimine le besoin d'appels getUserMedia() distincts, simplifie l'implémentation et garantit que le navigateur dispose d'un signal fiable de l'intention de l'utilisateur.

Validation du concept

Les données réelles de l'essai d'origine initial ont montré que les contrôles d'autorisation contextuels et initiés par l'utilisateur améliorent considérablement les taux de réussite des utilisateurs.

• Cisco a observé que les utilisateurs qui avaient initialement refusé les autorisations n'étaient qu'à 10% susceptibles d'accorder les autorisations à l'aide des anciennes invites, mais que ce taux passait à plus de 65% avec le nouvel élément.
• Zoom a signalé une baisse de 46,9% des erreurs de capture de l'appareil photo ou du micro, telles que les bloqueurs au niveau du système, en utilisant l'élément pour guider les utilisateurs dans la récupération.
• Google Meet a enregistré une baisse de 17% des commentaires "Microphone ne fonctionne pas" et une augmentation de 131% du nombre d'utilisateurs ayant réussi à récupérer l'autorisation d'accès après l'avoir initialement refusée.

Pourquoi utiliser l'élément <usermedia> ?

En s'appuyant sur les modèles établis par <geolocation>, l'élément <usermedia> s'attaque aux principaux défis liés à la demande de fonctionnalités puissantes. Les requêtes média reposent sur des appels JavaScript impératifs qui déclenchent souvent des invites hors contexte. Si vous bloquez accidentellement votre site, vous devez parcourir les paramètres du navigateur en détail pour revenir en arrière. Cette "faille d'autorisation" conduit souvent à l'abandon de fonctionnalités.

L'élément <usermedia> résout ces problèmes en fournissant les éléments suivants :

• Intention et timing clairs : l'invite n'apparaît qu'après un appui physique sur un élément contrôlé par le navigateur, ce qui fournit un signal d'intention fiable. Cela permet au navigateur de contourner les blocages silencieux automatiques qui entraînent souvent l'échec des requêtes déclenchées par des scripts classiques.
• Récupération simplifiée : si l'accès a déjà été refusé, appuyer sur l'élément déclenche un flux de récupération spécialisé qui vous permet de réactiver instantanément votre caméra ou votre micro sur la page, sans avoir à parcourir des paramètres du navigateur complexes.
• Accès direct au flux : en tant que médiateur de données, l'élément expose directement le flux multimédia. Cela réduit le code récurrent nécessaire pour gérer les rappels et les états d'erreur dans votre application.

Implémentation

L'intégration de l'élément nécessite beaucoup moins de code réutilisable que l'ancienne API JavaScript. En suivant le modèle déclaratif établi par l'élément <geolocation>, vous pouvez ajouter la balise <usermedia> à votre code HTML et configurer les exigences matérielles avec la méthode setConstraints().

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

Attributs et propriétés clés

• stream : propriété en lecture seule qui fournit l'objet MediaStream une fois que l'utilisateur a accordé l'accès.
• setConstraints() : méthode qui permet aux développeurs de mettre à jour les préférences matérielles, telles que deviceId ou la résolution, avant l'interaction de l'utilisateur.
• error : propriété en lecture seule qui renvoie un DOMException (par exemple, un NotAllowedError) si la requête échoue ou est ignorée.
• onstream : gestionnaire d'événements qui se déclenche immédiatement une fois les pistes multimédias acquises.
• onerror : gestionnaire d'événements qui se déclenche lorsqu'une tentative d'acquisition de flux échoue.
• oncancel : gestionnaire d'événements qui se déclenche lorsque l'utilisateur annule ou ferme l'invite d'autorisation lors de l'acquisition.

Contraintes de style

Pour garantir la confiance des utilisateurs et éviter les schémas de conception trompeurs, l'élément <usermedia> applique les mêmes restrictions de style strictes que les autres éléments de capacité :

• Lisibilité : le navigateur vérifie que le contraste entre les couleurs du texte et de l'arrière-plan est suffisant (au moins 3:1) pour que la demande soit toujours lisible. Vous devez définir le canal alpha (opacity) sur 1 pour éviter que l'élément ne soit trompeusement transparent.
• Taille et espacement : le navigateur applique des limites minimales et maximales pour width, height et font-size. Il désactive les marges négatives ou les décalages de contour pour éviter que l'élément ne soit visuellement masqué.
• Intégrité visuelle : le navigateur limite les effets de distorsion. Par exemple, transform n'accepte que les translations 2D et la mise à l'échelle proportionnelle.
• Pseudo-classes CSS : l'élément est compatible avec le style basé sur l'état, tel que :granted (qui s'active une fois l'autorisation active et le flux acquis), ainsi qu'avec les états d'interaction standards tels que :hover et :active.

Amélioration progressive et stratégie de migration

En suivant le modèle de conception établi par <geolocation>, l'élément <usermedia> est conçu pour se dégrader de manière optimale. Les navigateurs qui ne prennent pas en charge l'élément le traiteront comme un HTMLUnknownElement et afficheront ses enfants. Cela vous permet de proposer une expérience de secours à tous les utilisateurs.

Modèle de remplacement personnalisé

Détectez de manière programmatique la compatibilité de l'élément <usermedia> en JavaScript :

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

Utilisez cette logique de détection pour ajouter un bouton standard à l'intérieur de l'élément <usermedia> afin de déclencher l'ancienne API getUserMedia() :

<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 pour les participants à la phase d'évaluation de l'origine

Pour les développeurs qui ont intégré l'élément <permission> expérimental et générique pendant la phase d'évaluation, la transition vers <usermedia> devrait être minime.

1. Mise à jour du tag : remplacez <permission type="camera microphone"> par <usermedia> pour vous assurer que tous les sélecteurs ciblant les éléments <permission> précédents sont mis à jour pour utiliser l'élément <usermedia> à la place.
2. Détection des fonctionnalités : vérifications des mises à jour de HTMLPermissionElement à HTMLUserMediaElement

La feuille de route

Alors que l'élément <usermedia> gère les requêtes audio et vidéo combinées, la feuille de route pour les futurs éléments de capacité inclut :

• <camera> : se concentre spécifiquement sur les scénarios vidéo uniquement.
• <microphone> : se concentre spécifiquement sur les scénarios audio uniquement.

Vous pouvez voir comment ces éléments spécifiques aux fonctionnalités aident les développeurs à créer des expériences multimédias plus intuitives et fiables. Pour en savoir plus, consultez le guide technique sur les éléments de capacité.

Liens associés

• Éléments de capacité : explication de l'élément <usermedia>
• Spécification
• Présentation de l'élément HTML <geolocation>