Meeting Device Check Patterns

Camera Blocked

A static camera blocked notice shows Camera blocked permission, Join without video fallback, Available preview audio, and Blocked preview status.

Program

A blocked camera notice should show a fallback without querying browser permissions.

camera_blocked_notice.html
Visuals: captured from real browser rendering
<section class="camera-blocked" aria-labelledby="camera-blocked-title"><h2 id="camera-blocked-title">Camera blocked notice</h2><div class="blocked-card" aria-label="Static camera blocked preview"><span>Video blocked</span><span>Audio preview</span></div><dl>
  <div><dt>Permission</dt><dd>Camera blocked</dd></div>
  <div><dt>Fallback</dt><dd>Join without video</dd></div><div><dt>Audio</dt><dd>Available preview</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Blocked preview</span></dd></div></dl>
  <p class="check">Learner check: the fallback is visible without querying permissions.</p>
  <p class="note">Static camera blocked notice only; no getUserMedia, getDisplayMedia, enumerateDevices, Permissions API, MediaStream, media capture, camera preview, microphone meter, screen-share picker, browser prompt, device labels, storage, cookie, route, API, network, script, event listener, form submit, input, textarea, contenteditable, analytics, timer, object URL, download, service worker, account/session behavior, live meeting join, live share, or live submission runs.</p></section>
<style>
  .camera-blocked { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #b45309; padding: 12px; background: #fffbeb; }
  .blocked-card { display: grid; gap: 6px; width: 180px; min-height: 86px; align-content: center; justify-items: center; border: 1px solid #b45309; background: #ffffff; color: #0f172a; font-weight: 700; }
  .blocked-card span { border-radius: 999px; background: #fde68a; padding: 3px 10px; }
  .camera-blocked dl { display: grid; gap: 8px; margin: 0; }
  .camera-blocked dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .camera-blocked dt { color: #475569; }
  .camera-blocked dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #fde68a; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the camera blocked notice.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Show permission row.

    The permission state is exact pinned data.
    The permission state is exact pinned data.

  3. Show fallback and audio rows.

    The fallback and audio state are exact pinned data.
    The fallback and audio state are exact pinned data.

  4. Render blocked-preview status.

    The status badge says this is a blocked preview.
    The status badge says this is a blocked preview.

  5. Check blocked-camera readback.

    The check says the fallback is visible without querying permissions.
    The check says the fallback is visible without querying permissions.

  6. Check camera blocked honesty.

    Permission, fallback, audio state, status, and no live join.
    Permission, fallback, audio state, status, and no live join.
step flow step(1) labels the source, step(2) shows the permission state, step(3) shows fallback and audio rows, step(4) shows blocked-preview status, step(5) checks the blocked-camera readback, and step(6) checks the honesty note.
blocked camera readback The section heading names the camera blocked notice surface.
blocked rows Permission, Fallback, Audio, and Status values are exact pinned data.
no permission query The lesson should not imply getUserMedia, getDisplayMedia, enumerateDevices, Permissions API, MediaStream, media capture, camera previews, microphone meters, screen-share pickers, browser prompts, device labels, storage, cookies, routes, APIs, networks, scripts, event listeners, form submits, inputs, textareas, contenteditable surfaces, analytics, timers, object URLs, downloads, service workers, account/session behavior, live meeting joins, live shares, or live submissions.