demo · v144

Usermedia Element

Pick a kind and tap start — the page grabs a media stream the way the declarative <usermedia> element will. The element is still behind a flag; the demo falls back to navigator.mediaDevices so you see the equivalent UX everywhere.

The native <usermedia> element is behind a flag. Enable chrome://flags/#enable-experimental-web-platform-features to try it directly. This page emulates the behaviour using navigator.mediaDevices.getUserMedia so the demo runs everywhere.
camera idle
state: idle

the API

<!-- declarative form (chrome 144, behind a flag) -->
<usermedia kind="video" id="cam">Tap to record</usermedia>
<script>
  cam.addEventListener('capture', (e) => videoEl.srcObject = e.stream);
</script>

// imperative equivalent (today)
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
videoEl.srcObject = stream;

see also