v149 · HTML · Media

Event Sequence

When a user interacts with a <usermedia> element, the browser fires a precise sequence of events: the click activates the element, the browser prompts for permission, and then either an activate event (with the stream) or an error event fires. Step through each phase to see the full event lifecycle.

click
User taps or clicks the <usermedia> element. This is the user activation that the browser requires before showing a permission prompt.
event.type: "click", isTrusted: true
browser permission prompt
The browser shows its native permission UI. No JS event fires here — the browser is in control.
Navigator permission dialog: "example.com wants to use your camera and microphone"
activate (granted)
If the user grants access, an activate event fires with event.stream set to the live MediaStream.
event.stream: MediaStream { id: "…", active: true, tracks: [video, audio] }
error (denied / no device)
If denied or no device is available, an error event fires instead of activate.
event.error: DOMException { name: "NotAllowedError", message: "Permission denied" }
stream assigned to <video>
Inside the activate handler, set video.srcObject = event.stream to display the live feed.
videoElement.srcObject = event.stream; // video starts playing
stop
When the user or page stops the stream, MediaStreamTrack.stop() fires ended events on each track.
track.addEventListener("ended", …) on each MediaStreamTrack
Simulate the sequence
// Press a Simulate button to walk through the event sequence…
stream—
tracks—
last event—
Run an error path, then simulate the recovery click to see how a visible element can reopen browser-controlled capture UI.

see also