Usermedia Capability Element, is a declarative, user-activated control for accessing the starting and interacting with media streams. This addresses the long-standing problem of permission prompts being triggered directly from JavaScript without a strong signal of user intent. By embedding a browser-controlled element in the page, the user's click provides a clear, intentional signal. This enables a much better prompt UX and, crucially, provides a simple recovery path for users who have previously denied the permission. Note: This feature was previously developed and tested in an Origin Trial as the more generic <permission> element. Based on feedback from developers and other browser vendors, it has evolved into capability-specific elements to provide a more tailored and powerful developer experience.
The current web permission model for interacting with user media relies on JavaScript-triggered prompts, giving the user agent no strong signal of user intent. This results in out-of-context prompts, user frustration, and difficult-to-recover-from denial states. We propose the <usermedia> element, or a suite of elements. This will be semantic HTML control with browser-controlled content and strict styling constraints. These constraints are fundamental to the security model, ensuring a very high level of confidence in the user's intent when making a permission decision at both the site and OS level. Crucially, the <usermedia> element evolves beyond simply managing permissions; it streamlines the entire journey by also facilitating starting and interacting with media streams. This often eliminates the need for separate JavaScript API calls, simplifying implementation and creating a more seamless user flow. By providing a clear, consistent, in-page control, this element solves significant user problems related to context blindness and "permission regret," offering a simple recovery path from a previously denied state. The combination of a user-initiated element and a subsequent browser-controlled confirmation UI enhances intent capture, improves accessibility, and prevents manipulative patterns, providing a significantly better experience for both users and developers.
Samples: https://tungnh28.github.io/pepc
Explainers: https://github.com/w3c/mediacapture-extensions/blob/main/media-capture-elements-explainer.md