eric/wizwar6e
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

The saved clip is the whole reel, and it travels as MP4

Browse Source 
Hitting record used to capture from wherever the reel stood — at the
end, the auto-stop fired a beat later and saved one second of the
final frame. Recording now rewinds to the top and rolls the whole
reel. And the container asks for MP4 (H.264) first, the format every
phone and platform plays, keeping WebM only where the browser cannot
mux it; the extension follows the container.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Eric Wagoner
2026-08-23 16:39:56 -04:00
co-authored by Claude Fable 5
parent cdfae39398
commit 4c358d157e
1 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/Replay.svelte
+14 -4
View File
@@ -258,6 +258,10 @@
if (recorder) { recorder.stop(); return; }
const cv = stageEl?.querySelector("canvas");
if (!cv) return;
// Recording means capturing the WHOLE reel: rewind to the top and
// roll. (Hitting record at the end used to auto-stop a beat later —
// a one-second clip of the final frame.)
idx = 0;
const comp = document.createElement("canvas");
comp.width = 1280;
comp.height = 720;
@@ -287,17 +291,23 @@
compRaf = requestAnimationFrame(drawComp);
};
compRaf = requestAnimationFrame(drawComp);
const mime = MediaRecorder.isTypeSupported("video/webm;codecs=vp9")
? "video/webm;codecs=vp9" : "video/webm";
// MP4 travels everywhere (iMessage, QuickTime, every platform);
// WebM is the fallback where the browser can't mux it.
const mime = [
"video/mp4;codecs=avc1.42E01E", "video/mp4",
"video/webm;codecs=vp9", "video/webm",
].find((m) => MediaRecorder.isTypeSupported(m)) ?? "video/webm";
const container = mime.startsWith("video/mp4") ? "video/mp4" : "video/webm";
const ext = container === "video/mp4" ? "mp4" : "webm";
const rec = new MediaRecorder(comp.captureStream(60), { mimeType: mime });
const chunks: Blob[] = [];
rec.ondataavailable = (e) => { if (e.data.size) chunks.push(e.data); };
rec.onstop = () => {
cancelAnimationFrame(compRaf);
const url = URL.createObjectURL(new Blob(chunks, { type: "video/webm" }));
const url = URL.createObjectURL(new Blob(chunks, { type: container }));
const a = document.createElement("a");
a.href = url;
a.download = `wizwar-moves-${steps[0]?.seq ?? 0}-${steps[steps.length - 1]?.seq ?? 0}.webm`;
a.download = `wizwar-moves-${steps[0]?.seq ?? 0}-${steps[steps.length - 1]?.seq ?? 0}.${ext}`;
a.click();
setTimeout(() => URL.revokeObjectURL(url), 2000);
recorder = null;