feat: use MediaRecorder + canvas.captureStream() for MP4/WebM output

Recording now uses the browser's hardware video encoder:
- JPEG frames drawn to offscreen canvas → canvas.captureStream(30fps)
- MediaRecorder encodes to MP4 (preferred) or WebM (fallback)
- Stop triggers download of standard video file

Playback uses native <video> element — no custom parsing needed.
Massively simplified: removed packFrames/unpackFrames, no more custom
binary format.

dist/index.html

@@ -5,8 +5,8 @@
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MJPEG Stream Viewer</title>
-    <script type="module" crossorigin src="/assets/index-CHMLXxlv.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Deon0U_J.css">
+    <script type="module" crossorigin src="/assets/index-aL8cGzGF.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-C8d4acis.css">
   </head>
   <body>
     <div id="app"></div>

src/App.vue

@@ -92,7 +92,7 @@ onUnmounted(() => {
 
       <!-- Tab: Playback -->
       <section v-show="activeTab === 'playback'" class="tab-content">
-        <PlaybackPanel ref="playbackRef" />
+        <PlaybackPanel />
       </section>
     </main>
   </div>

src/components/PlaybackPanel.vue

@@ -1,171 +1,75 @@
 <script setup lang="ts">
-import { ref, onUnmounted } from 'vue'
-import { unpackFrames, type Frame, type RecordingFile } from '../composables/useStorage'
+import { ref } from 'vue'
 
-const canvasRef = ref<HTMLCanvasElement | null>(null)
+const videoRef = ref<HTMLVideoElement | null>(null)
 const fileInputRef = ref<HTMLInputElement | null>(null)
+const videoUrl = ref<string | null>(null)
+const fileName = ref('')
+const playing = ref(false)
+const playbackTime = ref('00:00.00')
 const playbackProgress = ref(0)
-const playbackDuration = ref('00:00.00')
-const playbackState = ref<'idle' | 'playing' | 'paused'>('idle')
 
-const currentFile = ref<RecordingFile | null>(null)
-
-let activeFrames: Frame[] = []
-let activeDuration = 0
-let currentFrameIndex = 0
-let playbackStartTime = 0
-let totalPausedTime = 0
-let pausedAt = 0
-let rafId = 0
-
-function formatDuration(ms: number): string {
-  const totalSec = Math.floor(ms / 1000)
-  const min = Math.floor(totalSec / 60)
-  const sec = totalSec % 60
-  return `${String(min).padStart(2, '0')}:${String(sec).padStart(2, '0')}`
-}
-
-function formatElapsed(ms: number): string {
-  const totalSec = Math.floor(Math.max(0, ms) / 1000)
-  const min = Math.floor(totalSec / 60)
-  const sec = totalSec % 60
-  const centis = Math.floor((Math.max(0, ms) % 1000) / 10)
+function formatTime(seconds: number): string {
+  const s = Math.max(0, seconds)
+  const min = Math.floor(s / 60)
+  const sec = Math.floor(s % 60)
+  const centis = Math.floor((s % 1) * 100)
   return `${String(min).padStart(2, '0')}:${String(sec).padStart(2, '0')}.${String(centis).padStart(2, '0')}`
 }
 
-function getCanvasCtx(): { canvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D } | null {
-  const canvas = canvasRef.value
-  if (!canvas) return null
-  const ctx = canvas.getContext('2d')
-  if (!ctx) return null
-  return { canvas, ctx }
-}
-
-function renderPlaybackFrame(
-  frames: Frame[],
-  duration: number,
-  index: number,
-  canvas: HTMLCanvasElement,
-  ctx: CanvasRenderingContext2D,
-) {
-  if (playbackState.value !== 'playing') return
-  if (index >= frames.length) {
-    stopPlayback()
-    return
-  }
-
-  currentFrameIndex = index
-  const frame = frames[index]!
-  const elapsed = performance.now() - playbackStartTime - totalPausedTime
-  playbackProgress.value = Math.min((elapsed / duration) * 100, 100)
-  playbackDuration.value = formatElapsed(elapsed)
-
-  const img = new Image()
-  const url = URL.createObjectURL(frame.blob)
-  img.onload = () => {
-    URL.revokeObjectURL(url)
-    if (canvas.width !== img.width || canvas.height !== img.height) {
-      canvas.width = img.width
-      canvas.height = img.height
-    }
-    ctx.drawImage(img, 0, 0)
-
-    const nextIndex = index + 1
-    if (nextIndex < frames.length) {
-      const nextFrame = frames[nextIndex]!
-      const delay = nextFrame.timestamp - frame.timestamp
-      rafId = window.setTimeout(
-        () => renderPlaybackFrame(frames, duration, nextIndex, canvas, ctx),
-        Math.max(delay, 16),
-      )
-    } else {
-      rafId = window.setTimeout(() => stopPlayback(), 500)
-    }
-  }
-  img.src = url
-}
-
-async function startPlayback(frames: Frame[], duration: number) {
-  stopPlayback()
-  const c = getCanvasCtx()
-  if (!c) return
-
-  activeFrames = frames
-  activeDuration = duration
-  playbackState.value = 'playing'
-  currentFrameIndex = 0
-  totalPausedTime = 0
-  playbackStartTime = performance.now()
-
-  renderPlaybackFrame(activeFrames, activeDuration, 0, c.canvas, c.ctx)
-}
-
-function pausePlayback() {
-  if (playbackState.value !== 'playing') return
-  playbackState.value = 'paused'
-  pausedAt = performance.now()
-  if (rafId) {
-    clearTimeout(rafId)
-    rafId = 0
-  }
-}
-
-function resumePlayback() {
-  if (playbackState.value !== 'paused') return
-  const c = getCanvasCtx()
-  if (!c) return
-
-  totalPausedTime += performance.now() - pausedAt
-  playbackState.value = 'playing'
-  renderPlaybackFrame(activeFrames, activeDuration, currentFrameIndex, c.canvas, c.ctx)
-}
-
-function stopPlayback() {
-  playbackState.value = 'idle'
-  playbackProgress.value = 0
-  playbackDuration.value = '00:00.00'
-  currentFrameIndex = 0
-  activeFrames = []
-  activeDuration = 0
-  if (rafId) {
-    clearTimeout(rafId)
-    rafId = 0
-  }
-  const canvas = canvasRef.value
-  if (canvas) {
-    const ctx = canvas.getContext('2d')
-    ctx?.clearRect(0, 0, canvas.width, canvas.height)
-  }
-}
-
-async function handleFileSelect(event: Event) {
+function handleFileSelect(event: Event) {
   const input = event.target as HTMLInputElement
   const file = input.files?.[0]
   if (!file) return
 
-  stopPlayback()
-
-  try {
-    const frames = await unpackFrames(file)
-    currentFile.value = {
-      name: file.name,
-      duration: frames.length > 0 ? frames[frames.length - 1]!.timestamp : 0,
-      frameCount: frames.length,
-      data: file,
-    }
-    await startPlayback(frames, currentFile.value.duration)
-  } catch (e: any) {
-    currentFile.value = null
-    alert(`Failed to load recording: ${e.message || e}`)
+  // Revoke previous URL
+  if (videoUrl.value) {
+    URL.revokeObjectURL(videoUrl.value)
   }
 
-  // Reset input so the same file can be re-selected
+  stopPlayback()
+  fileName.value = file.name
+  videoUrl.value = URL.createObjectURL(file)
+
+  // Reset input
   input.value = ''
 }
 
-onUnmounted(() => {
-  stopPlayback()
-})
+function play() {
+  const v = videoRef.value
+  if (!v) return
+  v.play()
+  playing.value = true
+}
+
+function pause() {
+  videoRef.value?.pause()
+  playing.value = false
+}
+
+function stopPlayback() {
+  const v = videoRef.value
+  if (v) {
+    v.pause()
+    v.currentTime = 0
+  }
+  playing.value = false
+  playbackTime.value = '00:00.00'
+  playbackProgress.value = 0
+}
+
+function onTimeUpdate() {
+  const v = videoRef.value
+  if (!v) return
+  playbackTime.value = formatTime(v.currentTime)
+  if (v.duration) {
+    playbackProgress.value = (v.currentTime / v.duration) * 100
+  }
+}
+
+function onEnded() {
+  playing.value = false
+}
 </script>
 
 <template>
@@ -177,42 +81,48 @@ onUnmounted(() => {
       <input
         ref="fileInputRef"
         type="file"
-        accept=".mjpeg"
+        accept=".mp4,.webm,video/mp4,video/webm"
         class="file-input-hidden"
         @change="handleFileSelect"
       />
       <button class="btn btn-load" @click="fileInputRef?.click()">
-        📂 Load Recording File
+        📂 Load Video
       </button>
-      <span v-if="currentFile" class="file-info">
-        {{ currentFile.name }} · {{ currentFile.frameCount }} frames · {{ formatDuration(currentFile.duration) }}
-      </span>
-      <span v-else class="file-hint">Select a .mjpeg file to play back</span>
+      <span v-if="fileName" class="file-info">{{ fileName }}</span>
+      <span v-else class="file-hint">Select a recorded video file</span>
     </div>
 
-    <!-- Player canvas -->
-    <div v-if="playbackState !== 'idle'" class="player-container">
-      <canvas ref="canvasRef" class="playback-canvas"></canvas>
+    <!-- Player -->
+    <div v-if="videoUrl" class="player-container">
+      <video
+        ref="videoRef"
+        :src="videoUrl"
+        class="playback-video"
+        @timeupdate="onTimeUpdate"
+        @ended="onEnded"
+        @play="playing = true"
+        @pause="playing = false"
+      ></video>
 
       <div class="playback-controls">
         <button
-          v-if="playbackState === 'playing'"
-          class="btn btn-sm btn-pause"
-          @click="pausePlayback"
+          v-if="!playing"
+          class="btn btn-sm btn-play"
+          @click="play"
         >
-          ⏸ Pause
+          ▶ Play
         </button>
         <button
-          v-if="playbackState === 'paused'"
-          class="btn btn-sm btn-play"
-          @click="resumePlayback"
+          v-else
+          class="btn btn-sm btn-pause"
+          @click="pause"
         >
-          ▶ Resume
+          ⏸ Pause
         </button>
         <button class="btn btn-sm btn-stop-play" @click="stopPlayback">
           ⏹ Stop
         </button>
-        <span class="playback-time">{{ playbackDuration }}</span>
+        <span class="playback-time">{{ playbackTime }}</span>
       </div>
 
       <div class="progress-bar">
@@ -234,7 +144,6 @@ onUnmounted(() => {
   color: #ddd;
 }
 
-/* Load area */
 .load-area {
   display: flex;
   align-items: center;
@@ -257,19 +166,17 @@ onUnmounted(() => {
   color: #666;
 }
 
-/* Player */
 .player-container {
-  margin-bottom: 20px;
   border-radius: 8px;
   overflow: hidden;
   background: #1a1a2e;
 }
 
-.playback-canvas {
+.playback-video {
   width: 100%;
   display: block;
   max-height: 480px;
-  object-fit: contain;
+  background: #000;
 }
 
 .playback-controls {
@@ -297,7 +204,6 @@ onUnmounted(() => {
   transition: width 0.1s linear;
 }
 
-/* Buttons */
 .btn {
   display: inline-flex;
   align-items: center;

src/composables/useRecorder.ts

@@ -1,5 +1,5 @@
 import { ref, type Ref } from 'vue'
-import { packFrames, downloadBlob } from './useStorage'
+import { downloadBlob } from './useStorage'
 
 export type RecorderState = 'idle' | 'recording'
 
@@ -20,7 +20,6 @@ async function* parseMjpegByMarkers(
   response: Response,
 ): AsyncGenerator<{ blob: Blob; timestamp: number }> {
   if (!response.body) throw new Error('Response body is null')
-
   const reader = response.body.getReader()
   let buffer = new Uint8Array(0)
   const startTime = Date.now()
@@ -29,7 +28,6 @@ async function* parseMjpegByMarkers(
     while (true) {
       const { done, value } = await reader.read()
       if (done) break
-
       const newBuf = new Uint8Array(buffer.length + value.length)
       newBuf.set(buffer)
       newBuf.set(value, buffer.length)
@@ -40,7 +38,6 @@ async function* parseMjpegByMarkers(
         if (soi === -1) break
         const eoi = indexOf(buffer, EOI, soi + 2)
         if (eoi === -1) break
-
         const jpegData = buffer.subarray(soi, eoi + 2)
         if (jpegData.length > 100) {
           yield { blob: new Blob([jpegData], { type: 'image/jpeg' }), timestamp: Date.now() - startTime }
@@ -53,18 +50,45 @@ async function* parseMjpegByMarkers(
   }
 }
 
+/** Pick the best available video mime type — prefer MP4, fall back to WebM */
+function bestMimeType(): string {
+  const types = [
+    'video/mp4;codecs=avc1.42E01E',
+    'video/mp4',
+    'video/webm;codecs=vp9',
+    'video/webm;codecs=vp8',
+    'video/webm',
+  ]
+  for (const t of types) {
+    if (MediaRecorder.isTypeSupported(t)) return t
+  }
+  return 'video/webm'
+}
+
+function fileExtension(mimeType: string): string {
+  if (mimeType.startsWith('video/mp4')) return 'mp4'
+  return 'webm'
+}
+
 export function useRecorder() {
   const recorderState: Ref<RecorderState> = ref('idle')
   const elapsedMs = ref(0)
   const frameCount = ref(0)
   const recorderError: Ref<string | null> = ref(null)
 
-  let frames: { timestamp: number; blob: Blob }[] = []
   let startTime = 0
   let timerInterval: ReturnType<typeof setInterval> | null = null
   let abortController: AbortController | null = null
   let running = false
 
+  // MediaRecorder + canvas
+  let canvas: HTMLCanvasElement | null = null
+  let ctx: CanvasRenderingContext2D | null = null
+  let mediaRecorder: MediaRecorder | null = null
+  let chunks: Blob[] = []
+  let mimeType = ''
+  let ext = 'webm'
+
   function reset() {
     running = false
     if (abortController) {
@@ -75,7 +99,13 @@ export function useRecorder() {
       clearInterval(timerInterval)
       timerInterval = null
     }
-    frames = []
+    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+      mediaRecorder.stop()
+    }
+    canvas = null
+    ctx = null
+    mediaRecorder = null
+    chunks = []
     frameCount.value = 0
     elapsedMs.value = 0
     recorderState.value = 'idle'
@@ -84,6 +114,20 @@ export function useRecorder() {
   async function startRecording(streamUrl: string) {
     reset()
 
+    // Set up canvas + MediaRecorder
+    canvas = document.createElement('canvas')
+    ctx = canvas.getContext('2d')!
+    const stream = canvas.captureStream(30)
+    mimeType = bestMimeType()
+    ext = fileExtension(mimeType)
+
+    chunks = []
+    mediaRecorder = new MediaRecorder(stream, { mimeType, videoBitsPerSecond: 2_000_000 })
+    mediaRecorder.ondataavailable = (e) => {
+      if (e.data.size > 0) chunks.push(e.data)
+    }
+    mediaRecorder.start()
+
     startTime = Date.now()
     recorderState.value = 'recording'
     recorderError.value = null
@@ -95,6 +139,7 @@ export function useRecorder() {
 
     abortController = new AbortController()
 
+    // Start fetching + drawing frames
     try {
       const response = await fetch(streamUrl, {
         signal: abortController.signal,
@@ -107,8 +152,25 @@ export function useRecorder() {
 
       for await (const frame of parseMjpegByMarkers(response)) {
         if (!running) break
-        frames.push({ timestamp: frame.timestamp, blob: frame.blob })
-        frameCount.value = frames.length
+
+        // Draw frame to canvas so MediaRecorder encodes it
+        try {
+          const bitmap = await createImageBitmap(frame.blob)
+          if (!canvas || !ctx) {
+            bitmap.close()
+            break
+          }
+          if (canvas.width !== bitmap.width || canvas.height !== bitmap.height) {
+            canvas.width = bitmap.width
+            canvas.height = bitmap.height
+          }
+          ctx.drawImage(bitmap, 0, 0)
+          bitmap.close()
+        } catch {
+          // corrupted frame — skip
+        }
+
+        frameCount.value++
       }
     } catch (e: any) {
       if (e.name === 'AbortError') return
@@ -116,10 +178,10 @@ export function useRecorder() {
     }
   }
 
-  function stopRecording(): boolean {
+  function stopRecording() {
     if (recorderState.value !== 'recording') {
       reset()
-      return false
+      return
     }
 
     running = false
@@ -134,23 +196,28 @@ export function useRecorder() {
     }
     elapsedMs.value = Date.now() - startTime
 
-    const savedFrames = [...frames]
-    frames = []
-
-    if (savedFrames.length === 0) {
-      recorderError.value = 'No frames captured — check that the stream is accessible'
+    if (!mediaRecorder || mediaRecorder.state === 'inactive') {
+      recorderError.value = 'No video data recorded'
       recorderState.value = 'idle'
-      return false
+      return
     }
 
-    // Pack and download
-    const blob = packFrames(savedFrames)
-    const ts = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19)
-    downloadBlob(blob, `recording-${ts}.mjpeg`)
+    if (frameCount.value === 0) {
+      mediaRecorder.stop()
+      recorderError.value = 'No frames captured'
+      recorderState.value = 'idle'
+      return
+    }
 
-    recorderError.value = null
-    recorderState.value = 'idle'
-    return true
+    // Request final blob and download
+    mediaRecorder.onstop = () => {
+      const blob = new Blob(chunks, { type: mimeType })
+      const ts = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19)
+      downloadBlob(blob, `recording-${ts}.${ext}`)
+      recorderError.value = null
+      recorderState.value = 'idle'
+    }
+    mediaRecorder.stop()
   }
 
   function cancelRecording() {

src/composables/useStorage.ts

@@ -1,60 +1,3 @@
-/**
- * MJPEG frame packing / unpacking for download & playback.
- *
- * Binary format:
- *   [4B BE uint32 frameCount]
- *   Per frame: [4B BE uint32 timestamp(ms)] [4B BE uint32 jpegLen] [JPEG bytes]
- */
-
-export interface Frame {
-  timestamp: number
-  blob: Blob
-}
-
-export interface RecordingFile {
-  name: string
-  duration: number
-  frameCount: number
-  data: Blob
-}
-
-export function packFrames(frames: { timestamp: number; blob: Blob }[]): Blob {
-  const headerSize = 4 + frames.length * 8
-  const header = new ArrayBuffer(headerSize)
-  const view = new DataView(header)
-  view.setUint32(0, frames.length)
-
-  let offset = 4
-  const parts: BlobPart[] = [header]
-  for (const f of frames) {
-    view.setUint32(offset, f.timestamp)
-    view.setUint32(offset + 4, f.blob.size)
-    offset += 8
-    parts.push(f.blob)
-  }
-  return new Blob(parts, { type: 'application/octet-stream' })
-}
-
-export async function unpackFrames(data: Blob): Promise<Frame[]> {
-  const buf = await data.arrayBuffer()
-  const view = new DataView(buf)
-  const frameCount = view.getUint32(0)
-  const frames: Frame[] = []
-
-  let offset = 4
-  for (let i = 0; i < frameCount; i++) {
-    const timestamp = view.getUint32(offset)
-    const jpegLen = view.getUint32(offset + 4)
-    offset += 8
-    frames.push({
-      timestamp,
-      blob: new Blob([buf.slice(offset, offset + jpegLen)], { type: 'image/jpeg' }),
-    })
-    offset += jpegLen
-  }
-  return frames
-}
-
 /** Trigger browser download of a blob as a file */
 export function downloadBlob(blob: Blob, filename: string): void {
   const url = URL.createObjectURL(blob)