v150 · Web APIs · Media

Attribute Explorer

Configure the <usermedia> capture request, watch the generated setConstraints() code update live, then activate the native element when supported or its fallback button when not.

Checking <usermedia> support…

<usermedia> stream constraints

video constraint

audio constraint

facingMode constraint

element info

element defined—

tracks requested—

API fallback—

Generated native element setup:

Equivalent getUserMedia() call:

stream obtained—

video tracks—

audio tracks—

video label—

fallback pattern

<!-- Declarative approach: browser controls the permission prompt -->
<usermedia id="capture">
  <!-- Fallback: shown when <usermedia> is not supported -->
  <button id="fallback-btn">Grant camera access</button>
</usermedia>

<script>
  const capture = document.getElementById('capture');
  const constraints = { video: { facingMode: "user" }, audio: {} };

  if (
    typeof HTMLUserMediaElement !== 'undefined' &&
    capture instanceof HTMLUserMediaElement &&
    typeof capture.setConstraints === 'function'
  ) {
    capture.setConstraints(constraints);
    capture.addEventListener('stream', () => {
      video.srcObject = capture.stream;
    });
  } else {
    // Fallback: use getUserMedia()
    document.getElementById('fallback-btn').addEventListener('click', async () => {
      const stream = await navigator.mediaDevices.getUserMedia(constraints);
      video.srcObject = stream;
    });
  }
</script>

implementation reference

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

fallback pattern

see also

implementation reference