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
SkyLiCoder