feat: add frame caching demo documentation

2026-05-19 16:19:55 +08:00
commit 3ffeb1ae62
18 changed files with 4002 additions and 0 deletions
--- a/web/.env.local.example
+++ b/web/.env.local.example
@@ -0,0 +1 @@
+NEXT_PUBLIC_VIDEO_URL=http://localhost:8080/video.h264
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -0,0 +1,461 @@
+:root {
+  color-scheme: dark;
+  --bg: #07101d;
+  --bg-soft: #0d1828;
+  --panel: rgba(12, 19, 33, 0.82);
+  --panel-strong: rgba(16, 25, 41, 0.94);
+  --border: rgba(255, 255, 255, 0.1);
+  --text: #eef4ff;
+  --muted: #a9bbd5;
+  --accent: #70d6ff;
+  --accent-strong: #35b8ff;
+  --accent-warm: #f4b860;
+  --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-height: 100%;
+  margin: 0;
+}
+
+body {
+  color: var(--text);
+  background:
+    radial-gradient(circle at top left, rgba(112, 214, 255, 0.18), transparent 32%),
+    radial-gradient(circle at 80% 18%, rgba(244, 184, 96, 0.12), transparent 28%),
+    linear-gradient(180deg, #07101d 0%, #040912 100%);
+  font-family: var(--font-body), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+a {
+  color: inherit;
+}
+
+.viewer-shell {
+  position: relative;
+  min-height: 100vh;
+  padding: 32px;
+  overflow: hidden;
+}
+
+.viewer-shell::before,
+.viewer-shell::after {
+  content: "";
+  position: absolute;
+  inset: auto;
+  width: 420px;
+  height: 420px;
+  border-radius: 999px;
+  filter: blur(72px);
+  opacity: 0.32;
+  pointer-events: none;
+}
+
+.viewer-shell::before {
+  top: -100px;
+  right: -120px;
+  background: rgba(112, 214, 255, 0.24);
+}
+
+.viewer-shell::after {
+  bottom: -120px;
+  left: -120px;
+  background: rgba(244, 184, 96, 0.18);
+}
+
+.viewer-inner {
+  position: relative;
+  z-index: 1;
+  max-width: 1440px;
+  margin: 0 auto;
+  display: grid;
+  gap: 20px;
+}
+
+.hero-card,
+.panel-card {
+  border: 1px solid var(--border);
+  background: var(--panel);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(16px);
+}
+
+.hero-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.85fr);
+  gap: 20px;
+  padding: 28px;
+  border-radius: 28px;
+}
+
+.eyebrow {
+  margin: 0 0 12px;
+  color: var(--accent);
+  font-family: var(--font-mono), monospace;
+  font-size: 12px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.hero-title {
+  margin: 0;
+  font-family: var(--font-display), var(--font-body), sans-serif;
+  font-size: clamp(2rem, 4vw, 4rem);
+  line-height: 1.02;
+}
+
+.hero-copy p {
+  margin: 14px 0 0;
+  max-width: 68ch;
+  color: var(--muted);
+  line-height: 1.7;
+}
+
+.hero-metrics {
+  display: grid;
+  gap: 12px;
+  align-content: start;
+}
+
+.metric {
+  padding: 16px 18px;
+  border-radius: 20px;
+  background: var(--panel-strong);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.metric-label {
+  margin: 0 0 8px;
+  color: var(--muted);
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.metric-value {
+  margin: 0;
+  font-family: var(--font-mono), monospace;
+  font-size: 16px;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.metric-note {
+  margin: 8px 0 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.panel-card {
+  padding: 22px;
+  border-radius: 24px;
+}
+
+.toolbar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 14px;
+  align-items: end;
+}
+
+.toolbar-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.field {
+  display: grid;
+  gap: 10px;
+}
+
+.field-label,
+.status-label {
+  color: var(--muted);
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.field-input {
+  width: 100%;
+  padding: 14px 16px;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  color: var(--text);
+  background: rgba(3, 8, 18, 0.72);
+  outline: none;
+  transition: border-color 0.18s ease, box-shadow 0.18s ease;
+}
+
+.field-input:focus {
+  border-color: rgba(112, 214, 255, 0.55);
+  box-shadow: 0 0 0 4px rgba(112, 214, 255, 0.12);
+}
+
+.primary-button,
+.ghost-button {
+  border: 0;
+  border-radius: 16px;
+  padding: 14px 18px;
+  cursor: pointer;
+  transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease;
+}
+
+.primary-button {
+  background: linear-gradient(135deg, var(--accent-strong), #7f8cff);
+  color: #04111b;
+  font-weight: 700;
+  min-width: 132px;
+}
+
+.ghost-button {
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.primary-button:hover,
+.ghost-button:hover {
+  transform: translateY(-1px);
+}
+
+.primary-button:disabled,
+.ghost-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.toolbar-actions .ghost-button {
+  min-width: 132px;
+}
+
+.status-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  margin-top: 18px;
+  align-items: center;
+}
+
+.status-copy {
+  color: var(--muted);
+  line-height: 1.6;
+}
+
+.progress-track {
+  margin-top: 18px;
+  height: 10px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--accent), var(--accent-warm));
+  width: 0%;
+  transition: width 0.2s ease;
+}
+
+.gallery-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+  margin: 20px 0 14px;
+}
+
+.gallery-title {
+  margin: 0;
+  font-family: var(--font-display), var(--font-body), sans-serif;
+  font-size: 18px;
+}
+
+.gallery-meta {
+  color: var(--muted);
+  font-family: var(--font-mono), monospace;
+  font-size: 13px;
+}
+
+.player-card {
+  margin-top: 18px;
+  padding: 18px;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.scrubber {
+  margin-top: 16px;
+  padding: 14px 16px;
+  border-radius: 18px;
+  background: rgba(2, 5, 11, 0.42);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.scrubber-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.scrubber-label {
+  color: var(--muted);
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.scrubber-value {
+  color: var(--text);
+  font-family: var(--font-mono), monospace;
+  font-size: 13px;
+}
+
+.scrubber-input {
+  width: 100%;
+  height: 28px;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+  accent-color: var(--accent-strong);
+}
+
+.scrubber-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.scrubber-input::-webkit-slider-runnable-track {
+  height: 8px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(112, 214, 255, 0.9), rgba(244, 184, 96, 0.85));
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.scrubber-input::-webkit-slider-thumb {
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  margin-top: -7px;
+  border-radius: 999px;
+  border: 2px solid rgba(5, 9, 18, 0.92);
+  background: #eef4ff;
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
+}
+
+.scrubber-input::-moz-range-track {
+  height: 8px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(112, 214, 255, 0.9), rgba(244, 184, 96, 0.85));
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.scrubber-input::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  border: 2px solid rgba(5, 9, 18, 0.92);
+  background: #eef4ff;
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
+}
+
+.player-surface {
+  min-height: 240px;
+}
+
+.playback-canvas {
+  display: block;
+  width: 100%;
+  max-height: 72vh;
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: #02050b;
+}
+
+.player-placeholder {
+  min-height: 240px;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  border-radius: 18px;
+  border: 1px dashed rgba(255, 255, 255, 0.14);
+  color: var(--muted);
+  text-align: center;
+  background: rgba(2, 5, 11, 0.72);
+}
+
+.pager {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.pager button {
+  appearance: none;
+  min-width: 44px;
+  padding: 10px 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.05);
+  cursor: pointer;
+  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
+}
+
+.pager button.active {
+  border-color: rgba(112, 214, 255, 0.5);
+  background: rgba(112, 214, 255, 0.14);
+}
+
+.pager button:hover:not(:disabled) {
+  transform: translateY(-1px);
+  border-color: rgba(112, 214, 255, 0.35);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.empty-state,
+.error-state,
+.loading-state {
+  padding: 28px 18px;
+  border-radius: 18px;
+  border: 1px dashed rgba(255, 255, 255, 0.14);
+  color: var(--muted);
+  text-align: center;
+}
+
+.error-state {
+  color: #ffd2cf;
+  border-color: rgba(255, 134, 120, 0.3);
+  background: rgba(255, 87, 64, 0.08);
+}
+
+@media (max-width: 920px) {
+  .viewer-shell {
+    padding: 18px;
+  }
+
+  .hero-card,
+  .toolbar,
+  .status-row {
+    grid-template-columns: 1fr;
+  }
+}
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -0,0 +1,42 @@
+import type { Metadata } from "next";
+import { IBM_Plex_Mono, Noto_Sans_SC, Space_Grotesk } from "next/font/google";
+import "./globals.css";
+
+const display = Space_Grotesk({
+  subsets: ["latin"],
+  variable: "--font-display",
+  display: "swap",
+});
+
+const body = Noto_Sans_SC({
+  subsets: ["latin"],
+  weight: ["400", "500", "700"],
+  variable: "--font-body",
+  display: "swap",
+});
+
+const mono = IBM_Plex_Mono({
+  subsets: ["latin"],
+  weight: ["400", "500"],
+  variable: "--font-mono",
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: "H.264 Frame Viewer",
+  description: "Rust backend + Next.js frontend for H.264 frame extraction",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="zh-CN">
+      <body className={`${display.variable} ${body.variable} ${mono.variable}`}>
+        {children}
+      </body>
+    </html>
+  );
+}
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -0,0 +1,5 @@
+import VideoFrameViewer from "@/components/VideoFrameViewer";
+
+export default function Page() {
+  return <VideoFrameViewer />;
+}
--- a/web/components/VideoFrameViewer.tsx
+++ b/web/components/VideoFrameViewer.tsx
--- a/web/lib/frame-store.ts
+++ b/web/lib/frame-store.ts
@@ -0,0 +1,400 @@
+const DB_NAME = "video-process-frame-store-v1";
+const DB_VERSION = 1;
+const STORE_NAME = "sessions";
+const LEGACY_CACHE_NAME = "video-process-frame-manifests-v1";
+
+export interface CachedFrameRecord {
+  index: number;
+  width: number;
+  height: number;
+  timestampUs: number;
+  blob: Blob;
+}
+
+export interface CachedFrameSession {
+  version: 1;
+  url: string;
+  sourceSize: number | null;
+  codec: string;
+  frameCount: number;
+  keyFrameCount: number;
+  frames: CachedFrameRecord[];
+}
+
+interface LegacyFrameThumb {
+  index: number;
+  src: string;
+  width: number;
+  height: number;
+  timestampUs: number;
+}
+
+interface LegacyFrameManifest {
+  version: 1;
+  url: string;
+  sourceSize: number | null;
+  codec: string;
+  frameCount: number;
+  keyFrameCount: number;
+  frames: LegacyFrameThumb[];
+}
+
+export async function readCachedFrameSession(url: string): Promise<CachedFrameSession | null> {
+  const stored = await readSessionFromIndexedDb(url);
+  if (stored) {
+    return stored;
+  }
+
+  const legacy = await readLegacyFrameManifest(url);
+  if (!legacy) {
+    return null;
+  }
+
+  try {
+    await writeCachedFrameSession(legacy);
+    await deleteLegacyFrameManifest(url);
+  } catch {
+    // Migration is best-effort.
+  }
+
+  return legacy;
+}
+
+export async function writeCachedFrameSession(session: CachedFrameSession): Promise<void> {
+  const normalized = normalizeCachedFrameSession(session);
+  if (!normalized) {
+    throw new Error("无效的帧缓存会话。");
+  }
+
+  if (typeof indexedDB === "undefined") {
+    return;
+  }
+
+  await runStoreOperation("readwrite", (store) => store.put(normalized));
+}
+
+export async function clearCachedFrameSession(url: string): Promise<void> {
+  if (typeof indexedDB !== "undefined") {
+    try {
+      await runStoreOperation("readwrite", (store) => store.delete(url));
+    } catch {
+      // IndexedDB is best-effort.
+    }
+  }
+
+  await deleteLegacyFrameManifest(url);
+}
+
+function normalizeCachedFrameSession(value: unknown, expectedUrl?: string): CachedFrameSession | null {
+  if (!isRecord(value)) {
+    return null;
+  }
+
+  if (value.version !== 1 || typeof value.url !== "string") {
+    return null;
+  }
+
+  if (expectedUrl && value.url !== expectedUrl) {
+    return null;
+  }
+
+  if (
+    !isNullableNumber(value.sourceSize) ||
+    typeof value.codec !== "string" ||
+    !isNonNegativeInteger(value.frameCount) ||
+    !isNonNegativeInteger(value.keyFrameCount) ||
+    !Array.isArray(value.frames)
+  ) {
+    return null;
+  }
+
+  const frames = value.frames.map(normalizeCachedFrameRecord);
+  if (frames.some((frame) => frame === null)) {
+    return null;
+  }
+
+  const normalizedFrames = frames as CachedFrameRecord[];
+  if (normalizedFrames.length !== value.frameCount) {
+    return null;
+  }
+
+  normalizedFrames.sort((left, right) => left.index - right.index);
+
+  return {
+    version: 1,
+    url: value.url,
+    sourceSize: value.sourceSize,
+    codec: value.codec,
+    frameCount: value.frameCount,
+    keyFrameCount: value.keyFrameCount,
+    frames: normalizedFrames,
+  };
+}
+
+function normalizeCachedFrameRecord(value: unknown): CachedFrameRecord | null {
+  if (!isRecord(value)) {
+    return null;
+  }
+
+  if (
+    !isNonNegativeInteger(value.index) ||
+    !isPositiveInteger(value.width) ||
+    !isPositiveInteger(value.height) ||
+    !isNonNegativeInteger(value.timestampUs) ||
+    !(value.blob instanceof Blob)
+  ) {
+    return null;
+  }
+
+  return {
+    index: value.index,
+    width: value.width,
+    height: value.height,
+    timestampUs: value.timestampUs,
+    blob: value.blob,
+  };
+}
+
+async function readSessionFromIndexedDb(url: string): Promise<CachedFrameSession | null> {
+  if (typeof indexedDB === "undefined") {
+    return null;
+  }
+
+  try {
+    const record = await runStoreOperation("readonly", (store) => store.get(url));
+    return normalizeCachedFrameSession(record, url);
+  } catch {
+    return null;
+  }
+}
+
+async function readLegacyFrameManifest(url: string): Promise<CachedFrameSession | null> {
+  if (typeof caches === "undefined") {
+    return null;
+  }
+
+  try {
+    const cache = await caches.open(LEGACY_CACHE_NAME);
+    const cached = await cache.match(url);
+    if (!cached) {
+      return null;
+    }
+
+    const parsed = (await cached.json()) as unknown;
+    const legacy = normalizeLegacyFrameManifest(parsed, url);
+    if (!legacy) {
+      return null;
+    }
+
+    const frames = await Promise.all(
+      legacy.frames.map(async (frame) => ({
+        index: frame.index,
+        width: frame.width,
+        height: frame.height,
+        timestampUs: frame.timestampUs,
+        blob: dataUrlToBlob(frame.src),
+      })),
+    );
+
+    frames.sort((left, right) => left.index - right.index);
+
+    return {
+      version: 1,
+      url: legacy.url,
+      sourceSize: legacy.sourceSize,
+      codec: legacy.codec,
+      frameCount: legacy.frameCount,
+      keyFrameCount: legacy.keyFrameCount,
+      frames,
+    };
+  } catch {
+    return null;
+  }
+}
+
+async function deleteLegacyFrameManifest(url: string): Promise<void> {
+  if (typeof caches === "undefined") {
+    return;
+  }
+
+  try {
+    const cache = await caches.open(LEGACY_CACHE_NAME);
+    await cache.delete(url);
+  } catch {
+    // Cache Storage is best-effort.
+  }
+}
+
+function normalizeLegacyFrameManifest(value: unknown, expectedUrl?: string): LegacyFrameManifest | null {
+  if (!isRecord(value)) {
+    return null;
+  }
+
+  if (value.version !== 1 || typeof value.url !== "string") {
+    return null;
+  }
+
+  if (expectedUrl && value.url !== expectedUrl) {
+    return null;
+  }
+
+  if (
+    !isNullableNumber(value.sourceSize) ||
+    typeof value.codec !== "string" ||
+    !isNonNegativeInteger(value.frameCount) ||
+    !isNonNegativeInteger(value.keyFrameCount) ||
+    !Array.isArray(value.frames)
+  ) {
+    return null;
+  }
+
+  const frames = value.frames.map((frame) => {
+    if (!isRecord(frame)) {
+      return null;
+    }
+
+    if (
+      !isNonNegativeInteger(frame.index) ||
+      typeof frame.src !== "string" ||
+      !isPositiveInteger(frame.width) ||
+      !isPositiveInteger(frame.height) ||
+      !isNonNegativeInteger(frame.timestampUs)
+    ) {
+      return null;
+    }
+
+    return {
+      index: frame.index,
+      src: frame.src,
+      width: frame.width,
+      height: frame.height,
+      timestampUs: frame.timestampUs,
+    };
+  });
+
+  if (frames.some((frame) => frame === null)) {
+    return null;
+  }
+
+  const normalizedFrames = frames as LegacyFrameThumb[];
+  if (normalizedFrames.length !== value.frameCount) {
+    return null;
+  }
+
+  normalizedFrames.sort((left, right) => left.index - right.index);
+
+  return {
+    version: 1,
+    url: value.url,
+    sourceSize: value.sourceSize,
+    codec: value.codec,
+    frameCount: value.frameCount,
+    keyFrameCount: value.keyFrameCount,
+    frames: normalizedFrames,
+  };
+}
+
+function dataUrlToBlob(dataUrl: string): Blob {
+  const separatorIndex = dataUrl.indexOf(",");
+  if (!dataUrl.startsWith("data:") || separatorIndex === -1) {
+    throw new Error("无效的数据 URL。");
+  }
+
+  const header = dataUrl.slice(5, separatorIndex);
+  const payload = dataUrl.slice(separatorIndex + 1);
+  const isBase64 = header.endsWith(";base64");
+  const mimeType = isBase64 ? header.slice(0, -7) || "application/octet-stream" : header || "application/octet-stream";
+
+  if (!isBase64) {
+    return new Blob([decodeURIComponent(payload)], { type: mimeType });
+  }
+
+  const binary = atob(payload);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index += 1) {
+    bytes[index] = binary.charCodeAt(index);
+  }
+
+  return new Blob([bytes], { type: mimeType });
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function isNullableNumber(value: unknown): value is number | null {
+  return value === null || typeof value === "number";
+}
+
+function isNonNegativeInteger(value: unknown): value is number {
+  return typeof value === "number" && Number.isInteger(value) && value >= 0;
+}
+
+function isPositiveInteger(value: unknown): value is number {
+  return typeof value === "number" && Number.isInteger(value) && value > 0;
+}
+
+function openDatabase(): Promise<IDBDatabase> {
+  if (typeof indexedDB === "undefined") {
+    return Promise.reject(new Error("当前浏览器不支持 IndexedDB。"));
+  }
+
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME, { keyPath: "url" });
+      }
+    };
+
+    request.onerror = () => {
+      reject(request.error ?? new Error("打开 IndexedDB 失败。"));
+    };
+
+    request.onsuccess = () => {
+      const db = request.result;
+      db.onversionchange = () => db.close();
+      resolve(db);
+    };
+  });
+}
+
+function runStoreOperation<T>(
+  mode: IDBTransactionMode,
+  operation: (store: IDBObjectStore) => IDBRequest<T>,
+): Promise<T> {
+  return openDatabase().then(
+    (db) =>
+      new Promise<T>((resolve, reject) => {
+        const transaction = db.transaction(STORE_NAME, mode);
+        const store = transaction.objectStore(STORE_NAME);
+        let result: T | undefined;
+        let requestError: Error | null = null;
+
+        const request = operation(store);
+        request.onsuccess = () => {
+          result = request.result;
+        };
+        request.onerror = () => {
+          requestError = request.error ?? new Error("IndexedDB 请求失败。");
+          transaction.abort();
+        };
+
+        transaction.oncomplete = () => {
+          db.close();
+          resolve(result as T);
+        };
+
+        transaction.onabort = () => {
+          db.close();
+          reject(requestError ?? transaction.error ?? new Error("IndexedDB 事务已中止。"));
+        };
+
+        transaction.onerror = () => {
+          requestError = requestError ?? transaction.error ?? request.error ?? new Error("IndexedDB 事务失败。");
+        };
+      }),
+  );
+}
--- a/web/lib/h264.ts
+++ b/web/lib/h264.ts
@@ -0,0 +1,514 @@
+export interface H264AccessUnit {
+  type: "key" | "delta";
+  data: Uint8Array;
+}
+
+export interface FrameThumb {
+  index: number;
+  src: string;
+  width: number;
+  height: number;
+  timestampUs: number;
+}
+
+export interface ParsedH264 {
+  codec: string;
+  description: Uint8Array;
+  accessUnits: H264AccessUnit[];
+  frameCount: number;
+  keyFrameCount: number;
+}
+
+export interface H264DecoderConfig {
+  codec: string;
+  description: Uint8Array;
+}
+
+export interface H264StreamChunk {
+  accessUnits: H264AccessUnit[];
+  config?: H264DecoderConfig;
+  frameCount: number;
+  keyFrameCount: number;
+  bufferedBytes: number;
+  done: boolean;
+}
+
+interface RawNalUnit {
+  type: number;
+  data: Uint8Array;
+}
+
+export function parseH264AnnexB(bytes: Uint8Array): ParsedH264 {
+  const parser = new H264AnnexBStreamParser();
+  const first = parser.push(bytes);
+  const last = parser.flush();
+  const accessUnits = [...first.accessUnits, ...last.accessUnits];
+  const config = first.config ?? last.config;
+
+  if (!config) {
+    throw new Error("没有找到 SPS / PPS，无法配置 WebCodecs 解码器。");
+  }
+
+  const codec = config.codec;
+  const description = config.description;
+  const keyFrameCount = accessUnits.filter((unit) => unit.type === "key").length;
+
+  return {
+    codec,
+    description,
+    accessUnits,
+    frameCount: accessUnits.length,
+    keyFrameCount,
+  };
+}
+
+export class H264AnnexBStreamParser {
+  private buffer: Uint8Array<ArrayBufferLike> = new Uint8Array(0);
+  private spsUnits: Uint8Array[] = [];
+  private ppsUnits: Uint8Array[] = [];
+  private currentSlices: Uint8Array[] = [];
+  private currentIsKey = false;
+  private currentHasVcl = false;
+  private frameCount = 0;
+  private keyFrameCount = 0;
+  private config: H264DecoderConfig | null = null;
+  private configSignature = "";
+
+  push(chunk: Uint8Array): H264StreamChunk {
+    this.append(chunk);
+    return this.drain(false);
+  }
+
+  flush(): H264StreamChunk {
+    return this.drain(true);
+  }
+
+  private append(chunk: Uint8Array) {
+    if (chunk.length === 0) {
+      return;
+    }
+
+    const merged = new Uint8Array(this.buffer.length + chunk.length);
+    merged.set(this.buffer, 0);
+    merged.set(chunk, this.buffer.length);
+    this.buffer = merged;
+  }
+
+  private drain(final: boolean): H264StreamChunk {
+    const accessUnits: H264AccessUnit[] = [];
+
+    while (true) {
+      const starts = findStartCodes(this.buffer);
+
+      if (starts.length === 0) {
+        this.buffer = final ? new Uint8Array(0) : keepTail(this.buffer);
+        break;
+      }
+
+      if (starts[0].index > 0) {
+        this.buffer = this.buffer.slice(starts[0].index);
+        continue;
+      }
+
+      const processCount = final ? starts.length : starts.length - 1;
+      if (processCount <= 0) {
+        break;
+      }
+
+      for (let index = 0; index < processCount; index += 1) {
+        const start = starts[index];
+        const next = starts[index + 1];
+        const nalStart = start.index + start.length;
+        const nalEnd = next ? next.index : this.buffer.length;
+
+        if (nalEnd <= nalStart) {
+          continue;
+        }
+
+        const nal = {
+          type: this.buffer[nalStart] & 0x1f,
+          data: copyBytes(this.buffer.subarray(nalStart, nalEnd)),
+        };
+
+        const flushed = this.processNal(nal);
+        if (flushed) {
+          accessUnits.push(flushed);
+        }
+      }
+
+      if (final) {
+        this.buffer = new Uint8Array(0);
+        break;
+      }
+
+      this.buffer = this.buffer.slice(starts[processCount].index);
+    }
+
+    const finalAccessUnit = final ? this.flushCurrentAccessUnit() : null;
+    if (finalAccessUnit) {
+      accessUnits.push(finalAccessUnit);
+    }
+
+    const config = this.ensureConfig();
+
+    return {
+      accessUnits,
+      config: config ?? undefined,
+      frameCount: this.frameCount,
+      keyFrameCount: this.keyFrameCount,
+      bufferedBytes: this.buffer.length,
+      done: final && this.buffer.length === 0,
+    };
+  }
+
+  private processNal(nal: RawNalUnit): H264AccessUnit | null {
+    if (nal.type === 7) {
+      if (!containsBytes(this.spsUnits, nal.data)) {
+        this.spsUnits.push(nal.data);
+        this.configSignature = "";
+        this.config = null;
+      }
+      return null;
+    }
+
+    if (nal.type === 8) {
+      if (!containsBytes(this.ppsUnits, nal.data)) {
+        this.ppsUnits.push(nal.data);
+        this.configSignature = "";
+        this.config = null;
+      }
+      return null;
+    }
+
+    if (nal.type !== 1 && nal.type !== 5) {
+      return null;
+    }
+
+    const firstMbInSlice = readFirstMbInSlice(nal.data);
+    if (firstMbInSlice === 0 && this.currentHasVcl) {
+      const flushed = this.flushCurrentAccessUnit();
+      this.currentSlices = [nal.data];
+      this.currentHasVcl = true;
+      this.currentIsKey = nal.type === 5;
+      return flushed;
+    }
+
+    this.currentSlices.push(nal.data);
+    this.currentHasVcl = true;
+    this.currentIsKey = this.currentIsKey || nal.type === 5;
+    return null;
+  }
+
+  private flushCurrentAccessUnit(): H264AccessUnit | null {
+    if (this.currentSlices.length === 0) {
+      this.currentHasVcl = false;
+      this.currentIsKey = false;
+      return null;
+    }
+
+    const accessUnit: H264AccessUnit = {
+      type: this.currentIsKey ? "key" : "delta",
+      data: concatNalPayloads(this.currentSlices),
+    };
+
+    this.frameCount += 1;
+    if (accessUnit.type === "key") {
+      this.keyFrameCount += 1;
+    }
+
+    this.currentSlices = [];
+    this.currentHasVcl = false;
+    this.currentIsKey = false;
+    return accessUnit;
+  }
+
+  private ensureConfig(): H264DecoderConfig | null {
+    if (this.spsUnits.length === 0 || this.ppsUnits.length === 0) {
+      return null;
+    }
+
+    const signature = `${this.spsUnits.map(bytesToHex).join("|")}::${this.ppsUnits
+      .map(bytesToHex)
+      .join("|")}`;
+    if (this.config && this.configSignature === signature) {
+      return this.config;
+    }
+
+    this.config = {
+      codec: codecStringFromSps(this.spsUnits[0]),
+      description: buildAvcDecoderConfigRecord(this.spsUnits, this.ppsUnits),
+    };
+    this.configSignature = signature;
+    return this.config;
+  }
+}
+
+function findStartCodes(bytes: Uint8Array): Array<{ index: number; length: number }> {
+  const starts: Array<{ index: number; length: number }> = [];
+
+  for (let index = 0; index < bytes.length - 3; index += 1) {
+    if (bytes[index] !== 0 || bytes[index + 1] !== 0) {
+      continue;
+    }
+
+    if (bytes[index + 2] === 1) {
+      starts.push({ index, length: 3 });
+      index += 2;
+      continue;
+    }
+
+    if (index < bytes.length - 4 && bytes[index + 2] === 0 && bytes[index + 3] === 1) {
+      starts.push({ index, length: 4 });
+      index += 3;
+    }
+  }
+
+  return starts;
+}
+
+function keepTail(bytes: Uint8Array): Uint8Array {
+  if (bytes.length <= 3) {
+    return bytes.slice();
+  }
+
+  return bytes.slice(bytes.length - 3);
+}
+
+function extractNalUnits(bytes: Uint8Array): RawNalUnit[] {
+  const starts: Array<{ index: number; length: number }> = [];
+
+  for (let index = 0; index < bytes.length - 3; index += 1) {
+    if (bytes[index] !== 0 || bytes[index + 1] !== 0) {
+      continue;
+    }
+
+    if (bytes[index + 2] === 1) {
+      starts.push({ index, length: 3 });
+      index += 2;
+      continue;
+    }
+
+    if (index < bytes.length - 4 && bytes[index + 2] === 0 && bytes[index + 3] === 1) {
+      starts.push({ index, length: 4 });
+      index += 3;
+    }
+  }
+
+  if (starts.length === 0) {
+    throw new Error("没有找到 Annex-B start code。");
+  }
+
+  const nalUnits: RawNalUnit[] = [];
+
+  for (let i = 0; i < starts.length; i += 1) {
+    const start = starts[i];
+    const next = starts[i + 1];
+    const nalStart = start.index + start.length;
+    const nalEnd = next ? next.index : bytes.length;
+
+    if (nalEnd <= nalStart) {
+      continue;
+    }
+
+    const data = bytes.subarray(nalStart, nalEnd);
+    nalUnits.push({
+      type: data[0] & 0x1f,
+      data,
+    });
+  }
+
+  return nalUnits;
+}
+
+function readFirstMbInSlice(nalData: Uint8Array): number {
+  if (nalData.length < 2) {
+    return 0;
+  }
+
+  const rbsp = removeEmulationPreventionBytes(nalData.subarray(1));
+  const reader = new BitReader(rbsp);
+  return reader.readUE();
+}
+
+function codecStringFromSps(sps: Uint8Array): string {
+  if (sps.length < 4) {
+    throw new Error("SPS 长度不足，无法生成 codec 字符串。");
+  }
+
+  const profile = sps[1].toString(16).padStart(2, "0");
+  const compatibility = sps[2].toString(16).padStart(2, "0");
+  const level = sps[3].toString(16).padStart(2, "0");
+
+  return `avc1.${profile}${compatibility}${level}`;
+}
+
+function buildAvcDecoderConfigRecord(
+  spsUnits: Uint8Array[],
+  ppsUnits: Uint8Array[],
+): Uint8Array {
+  const spsList = uniqueByContent(spsUnits);
+  const ppsList = uniqueByContent(ppsUnits);
+
+  let size = 7;
+  for (const sps of spsList) {
+    size += 2 + sps.length;
+  }
+  size += 1;
+  for (const pps of ppsList) {
+    size += 2 + pps.length;
+  }
+
+  const record = new Uint8Array(size);
+  let offset = 0;
+
+  record[offset++] = 1;
+  record[offset++] = spsList[0][1];
+  record[offset++] = spsList[0][2];
+  record[offset++] = spsList[0][3];
+  record[offset++] = 0xff;
+  record[offset++] = 0xe0 | spsList.length;
+
+  for (const sps of spsList) {
+    writeUint16(record, offset, sps.length);
+    offset += 2;
+    record.set(sps, offset);
+    offset += sps.length;
+  }
+
+  record[offset++] = ppsList.length;
+
+  for (const pps of ppsList) {
+    writeUint16(record, offset, pps.length);
+    offset += 2;
+    record.set(pps, offset);
+    offset += pps.length;
+  }
+
+  return record;
+}
+
+function concatNalPayloads(units: Uint8Array[]): Uint8Array {
+  let size = 0;
+  for (const unit of units) {
+    size += 4 + unit.length;
+  }
+
+  const output = new Uint8Array(size);
+  let offset = 0;
+
+  for (const unit of units) {
+    writeUint32(output, offset, unit.length);
+    offset += 4;
+    output.set(unit, offset);
+    offset += unit.length;
+  }
+
+  return output;
+}
+
+function removeEmulationPreventionBytes(data: Uint8Array): Uint8Array {
+  const output: number[] = [];
+  let zeroCount = 0;
+
+  for (const byte of data) {
+    if (zeroCount >= 2 && byte === 0x03) {
+      zeroCount = 0;
+      continue;
+    }
+
+    output.push(byte);
+    zeroCount = byte === 0x00 ? zeroCount + 1 : 0;
+  }
+
+  return Uint8Array.from(output);
+}
+
+function uniqueByContent(units: Uint8Array[]): Uint8Array[] {
+  const seen = new Set<string>();
+  const result: Uint8Array[] = [];
+
+  for (const unit of units) {
+    const key = bytesToHex(unit);
+    if (seen.has(key)) {
+      continue;
+    }
+
+    seen.add(key);
+    result.push(unit);
+  }
+
+  return result;
+}
+
+function containsBytes(units: Uint8Array[], candidate: Uint8Array): boolean {
+  const candidateKey = bytesToHex(candidate);
+  return units.some((unit) => bytesToHex(unit) === candidateKey);
+}
+
+function copyBytes(bytes: Uint8Array): Uint8Array {
+  return bytes.slice();
+}
+
+function bytesToHex(bytes: Uint8Array): string {
+  let output = "";
+  for (const byte of bytes) {
+    output += byte.toString(16).padStart(2, "0");
+  }
+  return output;
+}
+
+function writeUint16(target: Uint8Array, offset: number, value: number) {
+  target[offset] = (value >> 8) & 0xff;
+  target[offset + 1] = value & 0xff;
+}
+
+function writeUint32(target: Uint8Array, offset: number, value: number) {
+  target[offset] = (value >>> 24) & 0xff;
+  target[offset + 1] = (value >>> 16) & 0xff;
+  target[offset + 2] = (value >>> 8) & 0xff;
+  target[offset + 3] = value & 0xff;
+}
+
+class BitReader {
+  private readonly data: Uint8Array;
+  private byteIndex = 0;
+  private bitIndex = 7;
+
+  constructor(data: Uint8Array) {
+    this.data = data;
+  }
+
+  readBit(): number {
+    if (this.byteIndex >= this.data.length) {
+      return 0;
+    }
+
+    const bit = (this.data[this.byteIndex] >> this.bitIndex) & 1;
+    this.bitIndex -= 1;
+
+    if (this.bitIndex < 0) {
+      this.bitIndex = 7;
+      this.byteIndex += 1;
+    }
+
+    return bit;
+  }
+
+  readBits(count: number): number {
+    let value = 0;
+    for (let index = 0; index < count; index += 1) {
+      value = (value << 1) | this.readBit();
+    }
+    return value;
+  }
+
+  readUE(): number {
+    let zeroCount = 0;
+    while (this.readBit() === 0 && zeroCount < 31) {
+      zeroCount += 1;
+    }
+
+    const suffix = zeroCount > 0 ? this.readBits(zeroCount) : 0;
+    return (1 << zeroCount) - 1 + suffix;
+  }
+}
--- a/web/lib/video-cache.ts
+++ b/web/lib/video-cache.ts
@@ -0,0 +1,45 @@
+const CACHE_NAME = "video-process-h264-v1";
+
+export async function openCachedVideoResponse(
+  url: string,
+  signal: AbortSignal,
+): Promise<{ response: Response; cacheState: "hit" | "miss" }> {
+  if (typeof caches !== "undefined") {
+    const cache = await caches.open(CACHE_NAME);
+    const cached = await cache.match(url);
+    if (cached) {
+      return { response: cached, cacheState: "hit" };
+    }
+  }
+
+  const response = await fetch(url, {
+    signal,
+    cache: "no-store",
+  });
+
+  if (!response.ok) {
+    throw new Error(`请求失败：${response.status} ${response.statusText}`);
+  }
+
+  if (typeof caches !== "undefined") {
+    const cache = await caches.open(CACHE_NAME);
+    cache.put(url, response.clone()).catch(() => {
+      // Cache Storage is best-effort.
+    });
+  }
+
+  return { response, cacheState: "miss" };
+}
+
+export async function clearCachedVideoResponse(url: string): Promise<void> {
+  if (typeof caches === "undefined") {
+    return;
+  }
+
+  try {
+    const cache = await caches.open(CACHE_NAME);
+    await cache.delete(url);
+  } catch {
+    // Cache Storage is best-effort.
+  }
+}
--- a/web/next-env.d.ts
+++ b/web/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
--- a/web/next.config.mjs
+++ b/web/next.config.mjs
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+export default nextConfig;
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -0,0 +1,496 @@
+{
+  "name": "video-frame-viewer",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "video-frame-viewer",
+      "dependencies": {
+        "next": "^14.2.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
+      },
+      "devDependencies": {
+        "@types/node": "^20.14.0",
+        "@types/react": "^18.3.0",
+        "@types/react-dom": "^18.3.0",
+        "typescript": "^5.5.4"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "14.2.35",
+      "resolved": "https://registry.npmmirror.com/@next/env/-/env-14.2.35.tgz",
+      "integrity": "sha512-DuhvCtj4t9Gwrx80dmz2F4t/zKQ4ktN8WrMwOuVzkJfBilwAwGr6v16M5eI8yCuZ63H9TTuEU09Iu2HqkzFPVQ==",
+      "license": "MIT"
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmmirror.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.33.tgz",
+      "integrity": "sha512-HqYnb6pxlsshoSTubdXKu15g3iivcbsMXg4bYpjL2iS/V6aQot+iyF4BUc2qA/J/n55YtvE4PHMKWBKGCF/+wA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmmirror.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.33.tgz",
+      "integrity": "sha512-8HGBeAE5rX3jzKvF593XTTFg3gxeU4f+UWnswa6JPhzaR6+zblO5+fjltJWIZc4aUalqTclvN2QtTC37LxvZAA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmmirror.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.33.tgz",
+      "integrity": "sha512-JXMBka6lNNmqbkvcTtaX8Gu5by9547bukHQvPoLe9VRBx1gHwzf5tdt4AaezW85HAB3pikcvyqBToRTDA4DeLw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmmirror.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.33.tgz",
+      "integrity": "sha512-Bm+QulsAItD/x6Ih8wGIMfRJy4G73tu1HJsrccPW6AfqdZd0Sfm5Imhgkgq2+kly065rYMnCOxTBvmvFY1BKfg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmmirror.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.33.tgz",
+      "integrity": "sha512-FnFn+ZBgsVMbGDsTqo8zsnRzydvsGV8vfiWwUo1LD8FTmPTdV+otGSWKc4LJec0oSexFnCYVO4hX8P8qQKaSlg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmmirror.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.33.tgz",
+      "integrity": "sha512-345tsIWMzoXaQndUTDv1qypDRiebFxGYx9pYkhwY4hBRaOLt8UGfiWKr9FSSHs25dFIf8ZqIFaPdy5MljdoawA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmmirror.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.33.tgz",
+      "integrity": "sha512-nscpt0G6UCTkrT2ppnJnFsYbPDQwmum4GNXYTeoTIdsmMydSKFz9Iny2jpaRupTb+Wl298+Rh82WKzt9LCcqSQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmmirror.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.33.tgz",
+      "integrity": "sha512-pc9LpGNKhJ0dXQhZ5QMmYxtARwwmWLpeocFmVG5Z0DzWq5Uf0izcI8tLc+qOpqxO1PWqZ5A7J1blrUIKrIFc7Q==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmmirror.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.33.tgz",
+      "integrity": "sha512-nOjfZMy8B94MdisuzZo9/57xuFVLHJaDj5e/xrduJp9CV2/HrfxTRH2fbyLe+K9QT41WBLUd4iXX3R7jBp0EUg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmmirror.com/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmmirror.com/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.19.41",
+      "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.19.41.tgz",
+      "integrity": "sha512-ECymXOukMnOoVkC2bb1Vc/w/836DXncOg5m8Xj1RH7xSHZJWNYY6Zh7EH477vcnD5egKNNfy2RpNOmuChhFPgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmmirror.com/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.28",
+      "resolved": "https://registry.npmmirror.com/@types/react/-/react-18.3.28.tgz",
+      "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.7",
+      "resolved": "https://registry.npmmirror.com/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001793",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001793.tgz",
+      "integrity": "sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmmirror.com/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.12.tgz",
+      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/next": {
+      "version": "14.2.35",
+      "resolved": "https://registry.npmmirror.com/next/-/next-14.2.35.tgz",
+      "integrity": "sha512-KhYd2Hjt/O1/1aZVX3dCwGXM1QmOV4eNM2UTacK5gipDdPN/oHHK/4oVGy7X8GMfPMsUTUEmGlsy0EY1YGAkig==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "14.2.35",
+        "@swc/helpers": "0.5.5",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "graceful-fs": "^4.2.11",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.1"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "14.2.33",
+        "@next/swc-darwin-x64": "14.2.33",
+        "@next/swc-linux-arm64-gnu": "14.2.33",
+        "@next/swc-linux-arm64-musl": "14.2.33",
+        "@next/swc-linux-x64-gnu": "14.2.33",
+        "@next/swc-linux-x64-musl": "14.2.33",
+        "@next/swc-win32-arm64-msvc": "14.2.33",
+        "@next/swc-win32-ia32-msvc": "14.2.33",
+        "@next/swc-win32-x64-msvc": "14.2.33"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmmirror.com/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmmirror.com/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmmirror.com/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/styled-jsx/-/styled-jsx-5.1.1.tgz",
+      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}
--- a/web/package.json
+++ b/web/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "video-frame-viewer",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^14.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.5.4"
+  }
+}
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
				`@@ -0,0 +1 @@`
				`NEXT_PUBLIC_VIDEO_URL=http://localhost:8080/video.h264`