v150 · Web APIs · Usermedia Demo

Usermedia Demo

The <usermedia> element is a native browser control that requests camera and microphone access as part of a recognised user activation — the browser controls the permission flow, not JavaScript timing.

Checking <usermedia> element support…

declarative camera access

Click the button to request camera access via <usermedia>

Camera stream will appear here
status: idle video tracks: — audio tracks: —
Click the native element or fallback button to see events…

code

<!-- <usermedia> element — Chrome 150+ -->
<usermedia id="um">
  <button id="fallback">Start camera fallback</button>
</usermedia>
<video id="preview" autoplay muted></video>

<script>
  const um = document.getElementById('um');
  const video = document.getElementById('preview');
  let activeStream = null;

  if (
    typeof HTMLUserMediaElement !== 'undefined' &&
    um instanceof HTMLUserMediaElement &&
    typeof um.setConstraints === 'function'
  ) {
    um.setConstraints({ video: {}, audio: {} });
  }

  // The element exposes its stream after successful user activation.
  um.addEventListener('stream', () => {
    activeStream = um.stream;
    video.srcObject = activeStream;
  });

  um.addEventListener('error', () => {
    console.error(um.error?.name, um.error?.message);
  });

  // To stop: stop all tracks
  function stopStream() {
    activeStream?.getTracks().forEach(t => t.stop());
    video.srcObject = null;
    activeStream = null;
  }
</script>

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗