v149 · HTML · Media

Capability Elements <usermedia>

Chrome 151 ships the <usermedia> HTML element — a declarative, browser-controlled button for requesting camera and microphone access. It replaces ad-hoc JavaScript permission flows with a semantic, secure, and user-friendly in-page element.

concepts

  1. Element vs. JS API

    Side-by-side comparison of the declarative <usermedia> element against the imperative getUserMedia() JavaScript call — same capability, two different paradigms, showing how the element handles constraints, events, and stream lifecycle.

  2. Stream Controller

    A practical media capture UI using <usermedia> — request camera or microphone access, see the live stream, toggle mute/unmute, and inspect the streamready and userchangedenabled events as they fire.

  3. Constraints Builder

    Visual form for configuring video (facing mode, resolution, frame rate) and audio (echo cancellation, noise suppression, sample rate) constraints. Generates the <script type="permissionconstraints"> block for <usermedia> and the equivalent getUserMedia() call side by side.

  4. Camera Permission Flow

    A video calling onboarding flow with two approach tabs: <usermedia> element vs. getUserMedia(). Feature-detects HTMLUserMediaElement, probes camera availability, tracks permission state transitions, and shows the mid-session track-ended recovery path.

  5. Event Sequence

    Visualise the full event lifecycle of a <usermedia> interaction: click, permission prompt, then activate (with stream) or error (denied). Step through the granted and denied paths with animated timeline steps and a live event log.

  6. Constraint Presets

    Seven ready-made constraint profiles — Video Call, Podcast, Selfie Cam, Screen Share, Voice Only, Low Latency, and an overconstrained 8K Cinema probe. Select a preset to see the <script type="permissionconstraints"> block, the equivalent getUserMedia() call, and a table explaining why each constraint is set the way it is.

why it shipped

The navigator.mediaDevices.getUserMedia() API requires developers to build their own permission request UI, manage stream state manually, and reason carefully about user activation. A malicious or careless site can present misleading button text that tricks users into granting camera or microphone access without understanding what they're consenting to. The <usermedia> element changes this: the browser controls the button's label, icon, and appearance, so users always know exactly what clicking it will do. Constraints are declared inline using a <script type="permissionconstraints"> child element rather than composed in JavaScript, making the intent readable in markup. The element also exposes the stream and mute state as first-class properties, so toggling tracks is a single property assignment rather than iterating MediaStreamTrack objects.

references