v149 · HTML · Media · demo
Camera Permission Flow
A video calling onboarding flow built around the <usermedia> capability element. Compare the declarative stream button with the classic getUserMedia() prompt, probe camera availability before the click, and watch what happens when an active track ends mid-session.
Element lineage: this feature evolved from the broader
<permission> origin-trial work into the capability-specific <usermedia> element for camera and microphone streams.
Checking <usermedia> element support…
Camera not active
Use the element or fallback button to request the preview stream
-
1
App loads;
<usermedia>is feature-detected and device availability is probed. -
2
User activates
<usermedia>browser shows trusted capture UI and starts the stream. -
3
streamreadyfireselement.streamis attached to the preview and track listeners are registered. - 4 Permission denied, camera missing, or track endedthe element returns to an inert recovery state.
Capture could not start
Use the recovery guidance below, then try the element again.
Chrome: Settings Privacy and security Site settings Camera
Permission and element state
camera
prompt
microphone
prompt
<usermedia>
checking…
approach
<usermedia> element
Device and stream traps
video inputs
not probed
audio inputs
not probed
stream
inactive
last track event
none
No events yet.
<!-- Chrome 149+ declarative approach -->
<usermedia id="camera-flow" onstreamready="handleStream()" onerror="handleError()">
<script type="permissionconstraints">
{ "video": true, "audio": true }
</script>
</usermedia>
<script>
const um = document.querySelector("usermedia");
function handleStream() {
videoEl.srcObject = um.stream;
um.stream.getTracks().forEach(track => {
track.addEventListener("ended", handleRevokedMidSession);
});
}
async function probeCameraBeforeClick() {
const devices = await navigator.mediaDevices.enumerateDevices();
if (!devices.some(device => device.kind === "videoinput")) {
showNotFoundErrorGuidance();
}
}
</script>
see also
- Constraints Builder — configure
<usermedia>constraints - Element Explorer — compare
<usermedia>and JavaScript capture - Stream Controller — manage active media streams
- Back to feature index
- ChromeStatus entry
- WICG usermedia element explainer