Previously each frame was stored as a separate Blob in the Recording
object, causing IndexedDB to hang when writing 100+ blobs in one
transaction. Now all frames are packed into a single binary blob:
[4B frameCount][per frame: 4B ts, 4B len, JPEG data]
DB version bumped to 2 (old store deleted on upgrade).
PlaybackPanel unpacks frames on demand with a per-recording cache.
- extract reset() to ensure clean state in all exit paths
- add 5s timeout guard so UI never stays stuck on 'Saving'
- improve error messages for empty frames and save failures
Recording now scans the fetch response for JPEG start-of-image (0xFFD8)
and end-of-image (0xFFD9) markers instead of parsing multipart boundaries.
This is more robust because:
- No dependency on boundary format quirks
- No crossOrigin attribute needed (no canvas tainting issues)
- JPEG SOI/EOI markers are reliable frame delimiters per the JPEG spec
Also added cancelRecording() cleanup at start of each new recording.
Recording now creates an offscreen <img> (browser-native MJPEG
decoding) and captures frames via canvas.toBlob() at 100ms intervals.
This replaces the broken fetch-based multipart parser.
- useRecorder: img+canvas capture instead of fetch+ReadableStream
- RecorderControls: removed Cancel button, only Record/Stop remain
- App.vue: removed cancel wiring
Live view now uses <img :src='streamUrl'> (browser-native MJPEG
support, same as the working test HTML). The fetch-based multipart
parser is kept only for recording frame capture. Also fixed
multipart boundary parsing to correctly handle boundary values
that already include leading dashes.
- LiveView receives streamUrl string, passes it directly to <img>
- useMjpegStream simplified to URL + state management
- useRecorder manages its own fetch stream independently
- RecorderControls shows recorder-specific errors
- Add MJPEG stream parsing via Fetch ReadableStream (multipart/x-mixed-replace)
- Live view display with configurable stream URL (persisted to localStorage)
- Frontend recording: capture frames to memory, save to IndexedDB
- Playback panel: list saved recordings, replay with original frame timing
- Dark-themed single-page UI with Live/Playback tabs
SkyLiCoder