Meeting Device Check Patterns

Join Preview

A static meeting join preview shows Design review, camera off preview, muted microphone, and Ready to join preview status.

Program

A join preview can show the intended camera and microphone state before any device access starts.

device_join_preview.html
Visuals: captured from real browser rendering
<section class="join-preview" aria-labelledby="join-preview-title"><h2 id="join-preview-title">Device join preview</h2><div class="preview-tile" aria-label="Static meeting device preview"><span>Camera off</span><span>Mic muted</span></div><dl>
  <div><dt>Meeting</dt><dd>Design review</dd></div>
  <div><dt>Camera</dt><dd>Off preview</dd></div><div><dt>Microphone</dt><dd>Muted</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Ready to join preview</span></dd></div></dl>
  <p class="check">Learner check: the join state is visible before any device access.</p>
  <p class="note">Static meeting join preview 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>
  .join-preview { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .preview-tile { display: grid; gap: 6px; width: 180px; min-height: 86px; align-content: center; justify-items: center; border: 1px solid #0f766e; background: #ffffff; color: #0f172a; font-weight: 700; }
  .preview-tile span { border-radius: 999px; background: #ccfbf1; padding: 3px 10px; }
  .join-preview dl { display: grid; gap: 8px; margin: 0; }
  .join-preview dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .join-preview dt { color: #475569; }
  .join-preview dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the join preview.

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

  2. Show meeting row.

    The meeting name is exact pinned data.
    The meeting name is exact pinned data.

  3. Show camera and microphone rows.

    The camera and microphone states are exact pinned data.
    The camera and microphone states are exact pinned data.

  4. Render ready-to-join-preview status.

    The status badge says this is a ready-to-join preview.
    The status badge says this is a ready-to-join preview.

  5. Check join preview readback.

    The check says the join state is visible before any device access.
    The check says the join state is visible before any device access.

  6. Check join preview honesty.

    Meeting, device states, status, and no live join.
    Meeting, device states, status, and no live join.
step flow step(1) labels the source, step(2) shows the meeting, step(3) shows camera and microphone rows, step(4) shows ready-to-join-preview status, step(5) checks the join preview readback, and step(6) checks the honesty note.
join preview readback The section heading names the device join preview surface.
device rows Meeting, Camera, Microphone, and Status values are exact pinned data.
no device access 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.