feat: initialize frame-analyzer project with video analysis capabilities

- Add package.json with dependencies for React, Vite, and TypeScript.
- Create main application structure in App.tsx for video loading and frame analysis.
- Implement video scanning logic to identify candidate frames based on visual changes.
- Add candidate ranking and trimming functionality to optimize selected frames.
- Develop media handling utilities for capturing frames and managing video playback.
- Introduce clipboard functionality for copying and downloading frames.
- Design user interface with responsive styles for video selection and analysis controls.
- Establish TypeScript types for video loading, scan settings, and candidate frames.
- Configure TypeScript and Vite for project compilation and development.

src/media/canvas.ts

@@ -0,0 +1,70 @@
+import { seekVideo } from "./video";
+
+export function captureAnalysisFrame(
+  video: HTMLVideoElement,
+  canvas: HTMLCanvasElement,
+  width: number,
+  height: number,
+): ImageData {
+  canvas.width = width;
+  canvas.height = height;
+
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  if (!context) throw new Error("Could not create the analysis canvas context.");
+
+  context.drawImage(video, 0, 0, width, height);
+  return context.getImageData(0, 0, width, height);
+}
+
+export async function createThumbnailUrl(video: HTMLVideoElement, maxWidth = 360): Promise<string> {
+  const scale = Math.min(1, maxWidth / video.videoWidth);
+  const width = Math.max(1, Math.round(video.videoWidth * scale));
+  const height = Math.max(1, Math.round(video.videoHeight * scale));
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("Could not create thumbnail canvas context.");
+
+  context.drawImage(video, 0, 0, width, height);
+
+  const blob = await canvasToBlob(canvas, "image/webp", 0.82);
+  return URL.createObjectURL(blob);
+}
+
+export async function extractFullResolutionFrame(
+  video: HTMLVideoElement,
+  time: number,
+  type: "image/png" | "image/jpeg" | "image/webp" = "image/png",
+  quality?: number,
+): Promise<Blob> {
+  await seekVideo(video, time);
+
+  const canvas = document.createElement("canvas");
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("Could not create full-resolution canvas context.");
+
+  context.drawImage(video, 0, 0);
+  return canvasToBlob(canvas, type, quality);
+}
+
+export async function canvasToBlob(
+  canvas: HTMLCanvasElement,
+  type: string,
+  quality?: number,
+): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) reject(new Error("Canvas export failed."));
+        else resolve(blob);
+      },
+      type,
+      quality,
+    );
+  });
+}