Capability Elements: <usermedia> MVP

concepts

1. Usermedia Demo

   Shows the <usermedia> element in action — click to activate it and observe how it requests camera/microphone access as part of the click interaction, then delivers the stream to a <video> element.

2. Permission Flow

   Compares the user experience of the old getUserMedia() JavaScript approach (permission prompt fires at arbitrary JS call time) vs the new <usermedia> declarative approach where the browser controls the prompt as part of element activation.

3. Attribute Explorer

   Configure setConstraints() for a mounted <usermedia> element and watch the generated native setup update in real time. Activate the native element when supported or its fallback content when not, then inspect the returned MediaStream.

4. Stream Capture Demo

   End-to-end media capture demo using <usermedia>. Activate the element or fallback controls, preview the stream, inspect track settings, enumerate devices after permission, and capture a still frame — all driven through the element's stream event when native support is present.

5. Fallback Experience

   All five capability element states — idle, pending, granted, denied, and unsupported — simulated with real getUserMedia() calls and appropriate fallback UI for each. Shows the contrast with the old JS approach that required manual state management and error handling.

6. Constraint Configurator

   Build the full constraint set for a <usermedia> element interactively: video resolution (320×240–4K), frame rate (15–60 fps), facing mode (front/back), audio echo cancellation, noise suppression, auto gain, and sample rate. The mounted element receives setConstraints() updates while the fallback button runs the equivalent getUserMedia() call.

   Interactive Constraints Live camera

why it shipped

The getUserMedia() API requires JavaScript and can trigger permission prompts in response to any code path — including timers and callbacks — not just direct user gestures. Browsers try to restrict prompts to user-gesture contexts, but the definition of "user gesture" is complex and leaks through in practice. The <usermedia> element ties the permission request to an actual element activation (click, Enter key) that the browser fully controls, resulting in clearer UX and more predictable permission timing.

the API

<!-- Declarative camera/mic access -->
<usermedia id="capture">
  <!-- Fallback for unsupported browsers -->
  <button onclick="startCamera()">Start camera</button>
</usermedia>

<video id="preview" autoplay></video>

<script>
  const um = document.getElementById('capture');
  um.setConstraints({ video: {}, audio: {} });

  // 'stream' fires when user activates the element and access succeeds
  um.addEventListener('stream', () => {
    const stream = um.stream;              // MediaStream
    document.getElementById('preview').srcObject = stream;
  });

  // 'error' fires if permission denied
  um.addEventListener('error', event => {
    console.error('Media access denied:', event.error);
  });
</script>

references

• ChromeStatus entry
• MDN — Media Capture and Streams API
• MDN — getUserMedia()