diff --git a/eslint.config.js b/eslint.config.js
index b0de9e92..31db9ab1 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -73,6 +73,7 @@ export default [
         navigator: 'readonly',
         MediaRecorder: 'readonly',
         MediaStream: 'readonly',
+        MediaStreamTrack: 'readonly',
         MediaStreamConstraints: 'readonly',
         AudioContext: 'readonly',
         AudioBuffer: 'readonly',
@@ -108,6 +109,7 @@ export default [
         IntersectionObserver: 'readonly',
         IntersectionObserverEntry: 'readonly',
         MutationObserver: 'readonly',
+        ResizeObserver: 'readonly',
         // IndexedDB
         indexedDB: 'readonly',
         IDBDatabase: 'readonly',
@@ -118,6 +120,7 @@ export default [
         // DOM types
         Element: 'readonly',
         Document: 'readonly',
+        DOMException: 'readonly',
         ScrollBehavior: 'readonly',
         // Types
         PermissionName: 'readonly',
diff --git a/package.json b/package.json
index 412a022f..25219bbe 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mieweb/ui",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "A themeable, accessible React component library built with Tailwind CSS",
   "author": "Medical Informatics Engineering, Inc.",
   "license": "SEE LICENSE IN LICENSE",
diff --git a/src/components/LiveWaveform/LiveWaveform.stories.tsx b/src/components/LiveWaveform/LiveWaveform.stories.tsx
new file mode 100644
index 00000000..9a91bc35
--- /dev/null
+++ b/src/components/LiveWaveform/LiveWaveform.stories.tsx
@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import * as React from 'react';
+import { LiveWaveform } from './LiveWaveform';
+
+const meta: Meta<typeof LiveWaveform> = {
+  title: 'Components/Images & Media/LiveWaveform',
+  component: LiveWaveform,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A real-time volume visualizer for an active capture \`MediaStream\`.
+
+Unlike \`AudioRecorder\`, \`LiveWaveform\` owns no microphone — it visualizes a
+stream you already have (e.g. from \`getUserMedia\` / \`getDisplayMedia\` or a
+recording pipeline), so it can share the recorder's stream without contending
+for the device. Bars are vertically centered and the color defaults to the
+active brand's \`--color-primary-500\`.
+
+\`\`\`tsx
+import { LiveWaveform } from '@mieweb/ui';
+
+<LiveWaveform stream={captureStream} active={isRecording} height={56} />
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof LiveWaveform>;
+
+/**
+ * Synthetic demo: builds an oscillator-backed stream so the waveform animates
+ * without requesting microphone permission.
+ */
+function SyntheticWaveform({
+  height,
+  color,
+}: {
+  height?: number;
+  color?: string;
+}) {
+  const [active, setActive] = React.useState(false);
+  const [stream, setStream] = React.useState<MediaStream | null>(null);
+  const cleanupRef = React.useRef<(() => void) | null>(null);
+
+  const toggle = () => {
+    if (active) {
+      cleanupRef.current?.();
+      cleanupRef.current = null;
+      setStream(null);
+      setActive(false);
+      return;
+    }
+
+    const ctx = new AudioContext();
+    const oscillator = ctx.createOscillator();
+    const lfo = ctx.createOscillator();
+    const lfoGain = ctx.createGain();
+    const destination = ctx.createMediaStreamDestination();
+
+    oscillator.type = 'sawtooth';
+    oscillator.frequency.value = 220;
+    lfo.frequency.value = 4;
+    lfoGain.gain.value = 120;
+    lfo.connect(lfoGain).connect(oscillator.frequency);
+    oscillator.connect(destination);
+    oscillator.start();
+    lfo.start();
+
+    cleanupRef.current = () => {
+      oscillator.stop();
+      lfo.stop();
+      void ctx.close();
+    };
+
+    setStream(destination.stream);
+    setActive(true);
+  };
+
+  React.useEffect(() => () => cleanupRef.current?.(), []);
+
+  return (
+    <div className="flex w-80 flex-col items-center gap-4">
+      <div className="bg-muted h-14 w-full overflow-hidden rounded-lg">
+        <LiveWaveform
+          stream={stream}
+          active={active}
+          height={height}
+          color={color}
+        />
+      </div>
+      <button
+        type="button"
+        onClick={toggle}
+        className="bg-primary-800 rounded-md px-4 py-2 text-sm text-white"
+      >
+        {active ? 'Stop' : 'Play tone'}
+      </button>
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: () => <SyntheticWaveform height={56} />,
+};
+
+export const CustomColor: Story = {
+  render: () => <SyntheticWaveform height={56} color="#ef4444" />,
+};
+
+export const Idle: Story = {
+  args: { stream: null, active: false, height: 56 },
+  render: (args) => (
+    <div className="bg-muted h-14 w-80 overflow-hidden rounded-lg">
+      <LiveWaveform {...args} />
+    </div>
+  ),
+};
diff --git a/src/components/LiveWaveform/LiveWaveform.tsx b/src/components/LiveWaveform/LiveWaveform.tsx
new file mode 100644
index 00000000..78aeb33e
--- /dev/null
+++ b/src/components/LiveWaveform/LiveWaveform.tsx
@@ -0,0 +1,159 @@
+import * as React from 'react';
+import { cn } from '../../utils/cn';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface LiveWaveformProps {
+  /** Active capture stream to visualize; `null` renders an empty canvas. */
+  stream: MediaStream | null;
+  /** Whether the visualizer should animate (false clears the canvas). */
+  active: boolean;
+  /** Canvas height in pixels. */
+  height?: number;
+  /**
+   * Bar color. Defaults to the theme's `--color-primary-500` (falling back to
+   * `#27aae1`), so it adapts to the active brand without configuration.
+   */
+  color?: string;
+  /** Number of bars to render across the width. */
+  bars?: number;
+  /** Additional class names for the canvas. */
+  className?: string;
+}
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+/** Resolve the bar color, preferring the explicit prop then the theme token. */
+function resolveBarColor(color?: string): string {
+  if (color) return color;
+  if (typeof window === 'undefined') return '#27aae1';
+  const themeColor = getComputedStyle(document.documentElement)
+    .getPropertyValue('--color-primary-500')
+    .trim();
+  return themeColor || '#27aae1';
+}
+
+// ============================================================================
+// LiveWaveform
+// ============================================================================
+
+/**
+ * LiveWaveform — real-time volume visualizer for an active capture stream.
+ *
+ * Connects a Web Audio `AnalyserNode` to the provided `MediaStream` and draws
+ * evenly-spaced, vertically-centered rounded bars that fill the width of their
+ * container. It owns no microphone of its own, so it can safely share a
+ * recorder's stream without contending for the device.
+ *
+ * @example
+ * ```tsx
+ * <LiveWaveform stream={captureStream} active={isRecording} height={56} />
+ * ```
+ */
+export const LiveWaveform: React.FC<LiveWaveformProps> = ({
+  stream,
+  active,
+  height = 64,
+  color,
+  bars = 48,
+  className,
+}) => {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null);
+
+  React.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const clear = () => {
+      const ctx = canvas.getContext('2d');
+      ctx?.clearRect(0, 0, canvas.width, canvas.height);
+    };
+
+    if (!stream || !active || stream.getAudioTracks().length === 0) {
+      clear();
+      return;
+    }
+
+    const fillColor = resolveBarColor(color);
+    const audioCtx = new AudioContext();
+    const source = audioCtx.createMediaStreamSource(stream);
+    const analyser = audioCtx.createAnalyser();
+    analyser.fftSize = 256;
+    analyser.smoothingTimeConstant = 0.8;
+    source.connect(analyser);
+
+    const bufferLength = analyser.frequencyBinCount;
+    const data = new Uint8Array(bufferLength);
+    let raf = 0;
+
+    const resize = () => {
+      const dpr = window.devicePixelRatio || 1;
+      const w = canvas.clientWidth || 300;
+      const h = canvas.clientHeight || height;
+      canvas.width = Math.round(w * dpr);
+      canvas.height = Math.round(h * dpr);
+    };
+    resize();
+    const ro =
+      typeof ResizeObserver !== 'undefined' ? new ResizeObserver(resize) : null;
+    ro?.observe(canvas);
+
+    const draw = () => {
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+      const dpr = window.devicePixelRatio || 1;
+      const w = canvas.width / dpr;
+      const h = canvas.height / dpr;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, w, h);
+
+      analyser.getByteFrequencyData(data);
+
+      const gap = 2;
+      const barWidth = Math.max(2, (w - gap * (bars - 1)) / bars);
+      const mid = h / 2;
+      // Sample the voice-relevant low-to-mid bins spread across the bar count.
+      const usableBins = Math.max(1, Math.floor(bufferLength * 0.7));
+
+      ctx.fillStyle = fillColor;
+      for (let i = 0; i < bars; i += 1) {
+        const bin = Math.floor((i / bars) * usableBins);
+        const v = data[bin] / 255;
+        const barHeight = Math.max(barWidth, v * h * 0.9);
+        const x = i * (barWidth + gap);
+        const y = mid - barHeight / 2;
+        if (typeof ctx.roundRect === 'function') {
+          ctx.beginPath();
+          ctx.roundRect(x, y, barWidth, barHeight, barWidth / 2);
+          ctx.fill();
+        } else {
+          ctx.fillRect(x, y, barWidth, barHeight);
+        }
+      }
+
+      raf = requestAnimationFrame(draw);
+    };
+    draw();
+
+    return () => {
+      cancelAnimationFrame(raf);
+      ro?.disconnect();
+      source.disconnect();
+      void audioCtx.close();
+    };
+  }, [stream, active, color, bars, height]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      data-slot="live-waveform"
+      className={cn('h-full w-full', className)}
+      style={{ height }}
+      aria-hidden="true"
+    />
+  );
+};
diff --git a/src/components/LiveWaveform/index.ts b/src/components/LiveWaveform/index.ts
new file mode 100644
index 00000000..418cdb65
--- /dev/null
+++ b/src/components/LiveWaveform/index.ts
@@ -0,0 +1 @@
+export { LiveWaveform, type LiveWaveformProps } from './LiveWaveform';
diff --git a/src/index.ts b/src/index.ts
index 2e009d60..f87b7035 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -78,6 +78,7 @@ export * from './components/InvoicePaymentPage';
 // InvoiceView exports InvoiceLineItem which conflicts with InvoicePaymentPage
 export { InvoiceView, type InvoiceViewProps } from './components/InvoiceView';
 export * from './components/LanguageSelector';
+export * from './components/LiveWaveform';
 export * from './components/LoadingPage';
 export * from './components/Markdown';
 export * from './components/MedicationList';
@@ -187,6 +188,9 @@ export {
 } from './components/WebChartReportViewer';
 export * from './components/WebsiteInput';
 
+// Media capture (microphone / screen recording strategies)
+export * from './media/capture';
+
 // Hooks
 export * from './hooks';
 
diff --git a/src/media/capture/MicrophoneCapture.ts b/src/media/capture/MicrophoneCapture.ts
new file mode 100644
index 00000000..646c9f6d
--- /dev/null
+++ b/src/media/capture/MicrophoneCapture.ts
@@ -0,0 +1,46 @@
+/**
+ * MicrophoneCapture — microphone-only capture via getUserMedia.
+ *
+ * Records a single audio track to a WebM/Opus (or MP4 fallback) container.
+ */
+import { pickSupportedMimeType, toCaptureError } from './mime';
+import type { CaptureResult, RecordingCapture } from './types';
+
+const AUDIO_MIME_CANDIDATES = [
+  'audio/webm;codecs=opus',
+  'audio/webm',
+  'audio/mp4',
+] as const;
+const AUDIO_MIME_FALLBACK = 'audio/webm';
+
+export class MicrophoneCapture implements RecordingCapture {
+  private stream: MediaStream | null = null;
+
+  async start(): Promise<CaptureResult> {
+    let stream: MediaStream;
+    try {
+      stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    } catch (err: unknown) {
+      throw toCaptureError(
+        err,
+        'Microphone permission was denied. Allow microphone access and try again.',
+        'Failed to access the microphone.'
+      );
+    }
+    this.stream = stream;
+    return {
+      stream,
+      mimeType: pickSupportedMimeType(
+        AUDIO_MIME_CANDIDATES,
+        AUDIO_MIME_FALLBACK
+      ),
+      mediaType: 'audio',
+      audioCaptured: true,
+    };
+  }
+
+  stop(): void {
+    this.stream?.getTracks().forEach((track) => track.stop());
+    this.stream = null;
+  }
+}
diff --git a/src/media/capture/ScreenCapture.ts b/src/media/capture/ScreenCapture.ts
new file mode 100644
index 00000000..57234775
--- /dev/null
+++ b/src/media/capture/ScreenCapture.ts
@@ -0,0 +1,138 @@
+/**
+ * ScreenCapture — screen/window capture with mixed system + microphone audio.
+ *
+ * Behavior:
+ *   1. getDisplayMedia({ video, audio }) for the screen/window (+ system audio
+ *      where the browser supports it).
+ *   2. Best-effort getUserMedia({ audio }) for the microphone; a denial here is
+ *      non-fatal — recording continues with whatever audio is available.
+ *   3. All audio tracks are mixed into one track via an AudioContext +
+ *      MediaStreamAudioDestinationNode, then combined with the screen video
+ *      track into a single MediaStream.
+ *   4. If no audio track is granted at all, fall back to video-only.
+ *
+ * getDisplayMedia usage is intentionally isolated here so an alternative
+ * strategy (e.g. a native mobile capture) can implement RecordingCapture without
+ * inheriting browser display-capture assumptions.
+ */
+import { pickSupportedMimeType, toCaptureError } from './mime';
+import type { CaptureResult, RecordingCapture } from './types';
+
+const VIDEO_AV_MIME_CANDIDATES = [
+  'video/webm;codecs=vp8,opus',
+  'video/webm;codecs=vp9,opus',
+  'video/webm',
+  'video/mp4',
+] as const;
+
+const VIDEO_ONLY_MIME_CANDIDATES = [
+  'video/webm;codecs=vp8',
+  'video/webm;codecs=vp9',
+  'video/webm',
+  'video/mp4',
+] as const;
+
+const VIDEO_MIME_FALLBACK = 'video/webm';
+
+export class ScreenCapture implements RecordingCapture {
+  private displayStream: MediaStream | null = null;
+  private micStream: MediaStream | null = null;
+  private audioContext: AudioContext | null = null;
+  private outputStream: MediaStream | null = null;
+
+  async start(): Promise<CaptureResult> {
+    // 1. Screen/window + system audio (system audio support is browser-dependent).
+    let displayStream: MediaStream;
+    try {
+      displayStream = await navigator.mediaDevices.getDisplayMedia({
+        video: true,
+        audio: true,
+      });
+    } catch (err: unknown) {
+      throw toCaptureError(
+        err,
+        'Screen recording permission was denied. Choose a screen or window and try again.',
+        'Failed to start screen capture.'
+      );
+    }
+    this.displayStream = displayStream;
+
+    const videoTrack = displayStream.getVideoTracks()[0];
+    if (!videoTrack) {
+      this.stop();
+      throw new Error('The selected source did not provide a video track.');
+    }
+
+    // 2. Best-effort microphone capture (non-fatal on denial).
+    let micStream: MediaStream | null = null;
+    try {
+      micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      this.micStream = micStream;
+    } catch {
+      micStream = null;
+    }
+
+    // 3. Collect and mix all available audio tracks into a single track.
+    const audioTracks = [
+      ...displayStream.getAudioTracks(),
+      ...(micStream ? micStream.getAudioTracks() : []),
+    ];
+
+    const outputTracks: MediaStreamTrack[] = [videoTrack];
+    let audioCaptured = false;
+
+    if (audioTracks.length > 0) {
+      try {
+        const audioContext = new AudioContext();
+        this.audioContext = audioContext;
+        const destination = audioContext.createMediaStreamDestination();
+        for (const track of audioTracks) {
+          audioContext
+            .createMediaStreamSource(new MediaStream([track]))
+            .connect(destination);
+        }
+        const mixedAudioTracks = destination.stream.getAudioTracks();
+        if (mixedAudioTracks.length > 0) {
+          outputTracks.push(...mixedAudioTracks);
+          audioCaptured = true;
+        }
+      } catch {
+        // Audio mixing failed — release the partial AudioContext and continue
+        // with video only rather than dropping the already-granted screen
+        // capture. start() still resolves, so the caller owns and can stop it.
+        if (this.audioContext && this.audioContext.state !== 'closed') {
+          void this.audioContext.close();
+        }
+        this.audioContext = null;
+      }
+    }
+
+    // 4. Combine into a single stream (video-only when no audio was granted).
+    const outputStream = new MediaStream(outputTracks);
+    this.outputStream = outputStream;
+
+    const mimeType = audioCaptured
+      ? pickSupportedMimeType(VIDEO_AV_MIME_CANDIDATES, VIDEO_MIME_FALLBACK)
+      : pickSupportedMimeType(VIDEO_ONLY_MIME_CANDIDATES, VIDEO_MIME_FALLBACK);
+
+    return {
+      stream: outputStream,
+      mimeType,
+      mediaType: 'video',
+      audioCaptured,
+    };
+  }
+
+  stop(): void {
+    this.displayStream?.getTracks().forEach((track) => track.stop());
+    this.micStream?.getTracks().forEach((track) => track.stop());
+    this.outputStream?.getTracks().forEach((track) => track.stop());
+    if (this.audioContext && this.audioContext.state !== 'closed') {
+      void this.audioContext.close();
+    }
+    this.displayStream = null;
+    this.micStream = null;
+    this.outputStream = null;
+    this.audioContext = null;
+  }
+}
diff --git a/src/media/capture/index.ts b/src/media/capture/index.ts
new file mode 100644
index 00000000..b4b3e75d
--- /dev/null
+++ b/src/media/capture/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Capture-strategy factory and public exports.
+ *
+ * `createCapture` selects a browser capture strategy for the requested mode.
+ * The returned `RecordingCapture` acquires a `MediaStream` + recorder MIME type;
+ * everything downstream (MediaRecorder, upload) stays strategy-agnostic.
+ */
+import { MicrophoneCapture } from './MicrophoneCapture';
+import { ScreenCapture } from './ScreenCapture';
+import type { CaptureMode, RecordingCapture } from './types';
+
+export type { CaptureMode, CaptureResult, RecordingCapture } from './types';
+export { pickSupportedMimeType, toCaptureError } from './mime';
+export { MicrophoneCapture } from './MicrophoneCapture';
+export { ScreenCapture } from './ScreenCapture';
+
+/** Build the capture strategy for the given mode. */
+export function createCapture(mode: CaptureMode): RecordingCapture {
+  return mode === 'screen' ? new ScreenCapture() : new MicrophoneCapture();
+}
diff --git a/src/media/capture/mime.ts b/src/media/capture/mime.ts
new file mode 100644
index 00000000..12613930
--- /dev/null
+++ b/src/media/capture/mime.ts
@@ -0,0 +1,40 @@
+/**
+ * Shared helpers for capture strategies.
+ */
+
+/**
+ * Return the first MIME type in `candidates` that the platform's MediaRecorder
+ * can produce, falling back to `fallback` when none are supported (or when
+ * MediaRecorder is unavailable, e.g. SSR).
+ */
+export function pickSupportedMimeType(
+  candidates: readonly string[],
+  fallback: string
+): string {
+  if (typeof MediaRecorder !== 'undefined') {
+    for (const candidate of candidates) {
+      if (MediaRecorder.isTypeSupported(candidate)) return candidate;
+    }
+  }
+  return fallback;
+}
+
+/**
+ * Normalize an unknown capture error into a clear, user-surfaceable Error.
+ * Permission denials from getUserMedia/getDisplayMedia raise NotAllowedError.
+ */
+export function toCaptureError(
+  err: unknown,
+  deniedMessage: string,
+  genericMessage: string
+): Error {
+  if (
+    typeof DOMException !== 'undefined' &&
+    err instanceof DOMException &&
+    (err.name === 'NotAllowedError' || err.name === 'SecurityError')
+  ) {
+    return new Error(deniedMessage);
+  }
+  if (err instanceof Error) return err;
+  return new Error(genericMessage);
+}
diff --git a/src/media/capture/types.ts b/src/media/capture/types.ts
new file mode 100644
index 00000000..db25262a
--- /dev/null
+++ b/src/media/capture/types.ts
@@ -0,0 +1,36 @@
+/**
+ * Capture-strategy abstraction for building a recording pipeline.
+ *
+ * A RecordingCapture owns the acquisition of a MediaStream and the selection of
+ * a compatible recorder MIME type. Everything downstream (MediaRecorder
+ * timeslicing, upload, commit/abandon) is strategy-agnostic and shared across
+ * capture modes.
+ *
+ * Implementations:
+ *   - MicrophoneCapture — getUserMedia({ audio: true })
+ *   - ScreenCapture     — getDisplayMedia + optional mic, mixed via AudioContext
+ */
+
+/** Capture mode selected by the user before recording starts. */
+export type CaptureMode = 'microphone' | 'screen';
+
+/** Result of acquiring a capture stream. */
+export interface CaptureResult {
+  /** The stream to feed into MediaRecorder. */
+  stream: MediaStream;
+  /** Full MediaRecorder MIME type (may include a `;codecs=` clause). */
+  mimeType: string;
+  /** Whether the payload carries video ('video') or audio only ('audio'). */
+  mediaType: 'audio' | 'video';
+  /** True when at least one audio track was captured (false = video-only fallback). */
+  audioCaptured: boolean;
+}
+
+/**
+ * A pluggable capture strategy. `start()` acquires the stream and resolves the
+ * recorder MIME type; `stop()` releases all resources (tracks, AudioContext).
+ */
+export interface RecordingCapture {
+  start(): Promise<CaptureResult>;
+  stop(): void;
+}
diff --git a/tsup.config.ts b/tsup.config.ts
index dbcc24e1..9bd81b45 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -29,6 +29,7 @@ export default defineConfig({
     'components/FloatingWindow/index': 'src/components/FloatingWindow/index.ts',
     'components/Input/index': 'src/components/Input/index.ts',
     'components/Label/index': 'src/components/Label/index.ts',
+    'components/LiveWaveform/index': 'src/components/LiveWaveform/index.ts',
     'components/Markdown/index': 'src/components/Markdown/index.ts',
     'components/Modal/index': 'src/components/Modal/index.ts',
     'components/Pagination/index': 'src/components/Pagination/index.ts',