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.
Recording flow: click Stop → frames packed into .mjpeg blob → browser
download triggered immediately. No more IndexedDB or OPFS.
Playback: use 'Load Recording File' button to open a .mjpeg file.
Removed all storage dependencies — pure file-based, 100% reliable.
OPFS (navigator.storage.getDirectory) provides direct filesystem
access scoped to the app's origin. Much more reliable than IndexedDB
for large blob storage — no transaction blocking, no connection issues.
Layout: recordings/{id}.frames (packed binary) + index.json (metadata)
Each recording stored as a single file write then close.
Replaced open/close-per-operation pattern with a single persistent
connection held for the app lifetime. This prevents the DB upgrade
(v1→v2) from being blocked by lingering connections, and eliminates
transaction contention.
Also added onblocked handler that surfaces a clear error instead of
hanging indefinitely.
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