Ti presentiamo l'elemento HTML <usermedia>

Mari Viana

Minh Le

Pubblicato: 29 giugno 2026

In seguito al lancio dell'elemento<geolocation> in Chrome 144, il successivo controllo funzionale nella suite di elementi di funzionalità è l'elemento HTML <usermedia>. Disponibile a partire da Chrome 151, questo elemento segna la fase successiva della transizione dalle richieste di autorizzazione generiche ai controlli mirati e funzionali per l'accesso ai flussi di fotocamera e microfono. Passando dai prompt attivati da script a un'esperienza dichiarativa e attivata dall'utente, <usermedia> riduce il codice boilerplate, migliora la sicurezza e fornisce un percorso di recupero senza interruzioni per gli utenti che hanno negato l'accesso in precedenza, risolvendo di fatto il problema delle autorizzazioni di lunga data.

Dalla gestione delle autorizzazioni al controllo delle funzionalità

L'elemento <usermedia> è il prossimo controllo specializzato che verrà lanciato nella suite di elementi di funzionalità, dopo l'introduzione di <geolocation>. Questa transizione dalla proposta <permission> originale e generica, parte dell'iniziativa PEPC, consente al browser di gestire in modo più efficace le complessità e i comportamenti unici delle diverse funzionalità hardware. Mentre la proposta iniziale si concentrava principalmente sulla gestione degli stati delle autorizzazioni, ad esempio consentire o negare, gli elementi di funzionalità fungono da mediatori dei dati.

L'elemento <geolocation> fornisce un oggetto posizione al tuo sito e <usermedia> gestisce l'intero flusso per l'accesso alla fotocamera e al microfono. Acquisisce l'intent dell'utente, gestisce la richiesta del browser e fornisce l'oggetto MediaStream all'applicazione. Questo cambiamento elimina la necessità di chiamate getUserMedia() separate, semplifica l'implementazione e garantisce che il browser disponga di un segnale attendibile dell'intenzione dell'utente.

Convalida del concetto

I dati reali della prova dell'origine iniziale hanno dimostrato che i controlli delle autorizzazioni contestuali e avviati dall'utente migliorano significativamente i tassi di successo degli utenti.

• Cisco ha osservato che gli utenti che inizialmente hanno negato le autorizzazioni avevano solo circa il 10% di probabilità di concedere correttamente le autorizzazioni utilizzando le richieste legacy, ma questo tasso è salito a oltre il 65% con il nuovo elemento.
• Zoom ha segnalato una diminuzione del 46,9% degli errori di acquisizione della videocamera o del microfono, ad esempio i blocchi a livello di sistema, utilizzando l'elemento per guidare gli utenti nel recupero;
• Google Meet ha registrato una riduzione del 17% dei feedback relativi al "microfono non funzionante" e un aumento del 131% del recupero delle autorizzazioni per gli utenti che inizialmente avevano negato l'accesso.

Perché utilizzare l'elemento <usermedia>?

Basandosi sui pattern stabiliti da <geolocation>, l'elemento <usermedia> affronta le sfide principali della richiesta di funzionalità avanzate. Le richieste multimediali si basano su chiamate JavaScript imperative che spesso attivano prompt fuori contesto. Se blocchi accidentalmente il tuo sito, per annullare la decisione devi navigare in profondità nelle impostazioni del browser, un "buco di autorizzazione" che spesso porta a funzionalità abbandonate.

L'elemento <usermedia> risolve questi problemi fornendo quanto segue:

• Intento e tempistica chiari:poiché il prompt viene visualizzato solo dopo un tocco fisico su un elemento controllato dal browser, fornisce un segnale affidabile di intento. In questo modo, il browser ignora i blocchi automatici silenziosi che spesso causano l'esito negativo delle richieste attivate da script tipiche.
• Recupero semplificato:se l'accesso è stato negato in precedenza, toccando l'elemento si attiva un flusso di recupero specializzato che ti consente di riattivare la videocamera o il microfono istantaneamente sulla pagina, senza dover navigare in impostazioni del browser complesse.
• Accesso diretto al flusso: in qualità di mediatore dei dati, l'elemento espone direttamente lo stream multimediale. In questo modo si riduce il codice boilerplate necessario per gestire i callback e gli stati di errore nell'applicazione.

Implementazione

L'integrazione dell'elemento richiede molte meno boilerplate rispetto all'API JavaScript legacy. Seguendo il pattern dichiarativo stabilito dall'elemento <geolocation>, puoi aggiungere il tag <usermedia> al tuo codice HTML e configurare i requisiti hardware con il metodo 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.');
});

Attributi e proprietà chiave

• stream: una proprietà di sola lettura che fornisce l'oggetto MediaStream una volta che l'utente ha concesso l'accesso.
• setConstraints(): un metodo che consente agli sviluppatori di aggiornare le preferenze hardware, ad esempio deviceId o la risoluzione, prima dell'interazione dell'utente.
• error: una proprietà di sola lettura che restituisce un DOMException (ad esempio, un NotAllowedError) se la richiesta non va a buon fine o viene chiusa.
• onstream: un gestore di eventi che viene attivato immediatamente dopo l'acquisizione delle tracce multimediali.
• onerror: un gestore di eventi che viene attivato quando un tentativo di acquisizione dello stream non va a buon fine.
• oncancel: un gestore di eventi che si attiva quando l'utente annulla o chiude la richiesta di autorizzazione durante l'acquisizione.

Vincoli di stile

Per garantire la fiducia degli utenti e prevenire pattern di progettazione ingannevoli, l'elemento <usermedia> applica le stesse rigide limitazioni di stile degli altri elementi di funzionalità:

• Leggibilità:il browser controlla che i colori del testo e dello sfondo abbiano un contrasto sufficiente (almeno 3:1) per garantire che la richiesta sia sempre leggibile. Devi impostare il canale alfa (opacity) su 1 per evitare che l'elemento sia trasparente in modo ingannevole.
• Dimensioni e spaziatura:il browser impone limiti minimi e massimi per width, height e font-size. Disattiva i margini negativi o gli offset del contorno per evitare che l'elemento venga oscurato visivamente.
• Integrità visiva:il browser limita gli effetti di distorsione. Ad esempio, transform supporta solo le traslazioni 2D e il ridimensionamento proporzionale.
• Pseudo-classi CSS:l'elemento supporta lo stile basato sullo stato, ad esempio :granted (che si attiva quando l'autorizzazione è attiva e lo stream è acquisito), nonché stati di interazione standard come :hover e :active.

Strategia di potenziamento progressivo e migrazione

Seguendo il pattern di progettazione stabilito da <geolocation>, l'elemento <usermedia> è progettato per eseguire la riduzione controllata. I browser che non supportano l'elemento lo tratteranno come un HTMLUnknownElement e ne eseguiranno il rendering degli elementi secondari. In questo modo puoi fornire un'esperienza di riserva per tutti gli utenti.

Pattern di riserva personalizzato

Rileva programmaticamente il supporto dell'elemento <usermedia> in JavaScript:

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

Utilizza questa logica di rilevamento per aggiungere un pulsante standard all'interno dell'elemento <usermedia> per attivare l'API getUserMedia() legacy:

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

Migrazione per i partecipanti alla prova dell'origine

Per gli sviluppatori che hanno integrato l'elemento sperimentale e generico <permission> durante la prova dell'origine, la transizione a <usermedia> è progettata per essere minima.

1. Aggiornamento tag:sostituisci <permission type="camera microphone"> con <usermedia> per assicurarti che tutti i selettori che hanno come target gli elementi <permission> precedenti vengano aggiornati in modo da utilizzare l'elemento <usermedia> invece.
2. Rilevamento funzionalità: aggiorna i controlli da HTMLPermissionElement a HTMLUserMediaElement

La roadmap futura

Mentre l'elemento <usermedia> gestisce le richieste combinate di audio e video, la roadmap per i futuri elementi di funzionalità include:

• <camera>: si concentra in modo specifico sugli scenari solo video.
• <microphone>: si concentra in modo specifico sugli scenari solo audio.

Puoi vedere come questi elementi specifici delle funzionalità aiutano gli sviluppatori a creare esperienze multimediali più intuitive e affidabili. Per saperne di più, consulta la guida tecnica sugli elementi delle funzionalità.

Link correlati

• Elementi di funzionalità: <usermedia> spiegazione dell'elemento
• Specifiche
• Introduzione dell'elemento HTML <geolocation>