image-to-pixel 3.0.1 → 3.2.0

package/lib/core/video/mux-webm.js

@@ -1,127 +1,168 @@
-// Minimal WebM (Matroska) muxer for one VP8/VP9/AV1 video track. Buffered in memory, written with
-// a SeekHead and Cues so players can seek. Input: encoded frames from WebCodecs' VideoEncoder.
-
-const ENC = new TextEncoder();
-
-/** EBML variable-length size, always 8 bytes (simple and valid for any size). */
-function size8(n) {
-  const b = new Uint8Array(8);
-  b[0] = 0x01;
-  let v = n;
-  for (let i = 7; i >= 1; i--) { b[i] = v % 256; v = Math.floor(v / 256); }
-  return b;
-}
-function idBytes(id) {
-  const out = [];
-  for (let v = id; v > 0; v = Math.floor(v / 256)) out.unshift(v % 256);
-  return out;
-}
-function concat(parts) {
-  let n = 0; for (const p of parts) n += p.length;
-  const out = new Uint8Array(n); let o = 0;
-  for (const p of parts) { out.set(p, o); o += p.length; }
-  return out;
-}
-/** An element: id, 8-byte size, data. */
-const el = (id, data) => concat([Uint8Array.from(idBytes(id)), size8(data.length), data]);
-const uint = (id, v, bytes = 0) => {
-  const b = [];
-  for (let x = v; x > 0 || b.length === 0; x = Math.floor(x / 256)) b.unshift(x % 256);
-  while (b.length < bytes) b.unshift(0);
-  return el(id, Uint8Array.from(b));
-};
-const str = (id, s) => el(id, ENC.encode(s));
-const float64 = (id, v) => { const b = new Uint8Array(8); new DataView(b.buffer).setFloat64(0, v); return el(id, b); };
-const master = (id, children) => el(id, concat(children));
-
-const ID = {
-  EBML: 0x1A45DFA3, EBMLVersion: 0x4286, EBMLReadVersion: 0x42F7, EBMLMaxIDLength: 0x42F2, EBMLMaxSizeLength: 0x42F3,
-  DocType: 0x4282, DocTypeVersion: 0x4287, DocTypeReadVersion: 0x4285,
-  Segment: 0x18538067, SeekHead: 0x114D9B74, Seek: 0x4DBB, SeekID: 0x53AB, SeekPosition: 0x53AC,
-  Info: 0x1549A966, TimestampScale: 0x2AD7B1, Duration: 0x4489, MuxingApp: 0x4D80, WritingApp: 0x5741,
-  Tracks: 0x1654AE6B, TrackEntry: 0xAE, TrackNumber: 0xD7, TrackUID: 0x73C5, TrackType: 0x83, FlagLacing: 0x9C,
-  CodecID: 0x86, CodecPrivate: 0x63A2, DefaultDuration: 0x23E383, Video: 0xE0, PixelWidth: 0xB0, PixelHeight: 0xBA,
-  Cluster: 0x1F43B675, Timestamp: 0xE7, SimpleBlock: 0xA3,
-  Cues: 0x1C53BB6B, CuePoint: 0xBB, CueTime: 0xB3, CueTrackPositions: 0xB7, CueTrack: 0xF7, CueClusterPosition: 0xF1,
-};
-
-const CODEC_IDS = { vp8: 'V_VP8', vp9: 'V_VP9', av1: 'V_AV1' };
-
-/**
- * @param {{ width: number, height: number, codec: 'vp8' | 'vp9' | 'av1', fps?: number }} opts
- */
-export function createWebmMuxer({ width, height, codec = 'vp9', fps = 0 }) {
-  const frames = [];   // { data, key, ms }
-  let codecPrivate = null;
-
-  return {
-    addChunk(chunk, meta) {
-      if (meta && meta.decoderConfig && meta.decoderConfig.description && !codecPrivate) {
-        const d = meta.decoderConfig.description;
-        codecPrivate = new Uint8Array(d instanceof ArrayBuffer ? d : d.buffer.slice(d.byteOffset, d.byteOffset + d.byteLength));
-      }
-      const data = new Uint8Array(chunk.byteLength);
-      chunk.copyTo(data);
-      frames.push({ data, key: chunk.type === 'key', ms: chunk.timestamp / 1000 });
-    },
-    /** Lower-level: add one encoded frame. timestamp in microseconds. */
-    addFrame(data, { key, timestamp }) { frames.push({ data, key: !!key, ms: timestamp / 1000 }); },
-
-    /** @returns {Uint8Array} the .webm file */
-    finish() {
-      if (!frames.length) throw new Error('No video frames were encoded');
-      // VP8/VP9/AV1 frames from WebCodecs arrive in decode order, which is the order they're stored in
-      const frameMs = fps ? 1000 / fps : (frames.length > 1 ? (frames[frames.length - 1].ms - frames[0].ms) / (frames.length - 1) : 33.333);
-      const duration = frames[frames.length - 1].ms + frameMs;
-
-      const info = master(ID.Info, [
-        uint(ID.TimestampScale, 1000000),            // 1 ms
-        float64(ID.Duration, duration),
-        str(ID.MuxingApp, 'image-to-pixel'), str(ID.WritingApp, 'image-to-pixel'),
-      ]);
-      const tracks = master(ID.Tracks, [master(ID.TrackEntry, [
-        uint(ID.TrackNumber, 1), uint(ID.TrackUID, 1), uint(ID.TrackType, 1), uint(ID.FlagLacing, 0),
-        str(ID.CodecID, CODEC_IDS[codec] || codec),
-        ...(codecPrivate ? [el(ID.CodecPrivate, codecPrivate)] : []),
-        uint(ID.DefaultDuration, Math.round(frameMs * 1e6)),
-        master(ID.Video, [uint(ID.PixelWidth, width), uint(ID.PixelHeight, height)]),
-      ])]);
-
-      // clusters: a new one at each keyframe, and before the 16-bit relative timestamp overflows
-      const clusters = [];
-      let cur = null;
-      for (const f of frames) {
-        const t = Math.round(f.ms);
-        if (!cur || f.key || t - cur.start > 30000) { cur = { start: t, key: f.key, blocks: [] }; clusters.push(cur); }
-        const head = new Uint8Array(4);
-        head[0] = 0x81;                                      // track 1
-        new DataView(head.buffer).setInt16(1, t - cur.start);
-        head[3] = f.key ? 0x80 : 0x00;
-        cur.blocks.push(el(ID.SimpleBlock, concat([head, f.data])));
-      }
-      const clusterBytes = clusters.map(c => master(ID.Cluster, [uint(ID.Timestamp, c.start), ...c.blocks]));
-
-      // SeekHead with fixed-width positions, so its size is known before the positions are
-      const seekHead = (posInfo, posTracks, posCues) => master(ID.SeekHead, [
-        [ID.Info, posInfo], [ID.Tracks, posTracks], [ID.Cues, posCues],
-      ].map(([id, pos]) => master(ID.Seek, [el(ID.SeekID, Uint8Array.from(idBytes(id))), uint(ID.SeekPosition, pos, 8)])));
-      const shSize = seekHead(0, 0, 0).length;
-      const posInfo = shSize, posTracks = posInfo + info.length;
-      let pos = posTracks + tracks.length;
-      const cuePoints = [];
-      clusters.forEach((c, i) => {
-        if (c.key) cuePoints.push(master(ID.CuePoint, [uint(ID.CueTime, c.start), master(ID.CueTrackPositions, [uint(ID.CueTrack, 1), uint(ID.CueClusterPosition, pos)])]));
-        pos += clusterBytes[i].length;
-      });
-      const cues = master(ID.Cues, cuePoints.length ? cuePoints : [master(ID.CuePoint, [uint(ID.CueTime, 0), master(ID.CueTrackPositions, [uint(ID.CueTrack, 1), uint(ID.CueClusterPosition, posTracks + tracks.length)])])]);
-      const posCues = pos;
-
-      const header = master(ID.EBML, [
-        uint(ID.EBMLVersion, 1), uint(ID.EBMLReadVersion, 1), uint(ID.EBMLMaxIDLength, 4), uint(ID.EBMLMaxSizeLength, 8),
-        str(ID.DocType, 'webm'), uint(ID.DocTypeVersion, 4), uint(ID.DocTypeReadVersion, 2),
-      ]);
-      const segment = master(ID.Segment, [seekHead(posInfo, posTracks, posCues), info, tracks, ...clusterBytes, cues]);
-      return concat([header, segment]);
-    },
-  };
-}
+// Minimal WebM (Matroska) muxer for one VP8/VP9/AV1 video track and, optionally, one Opus audio track.
+// Buffered in memory, written with a SeekHead and Cues so players can seek.
+// Input: encoded frames from WebCodecs' VideoEncoder (and AudioEncoder for the audio).
+
+import { opusHead, parseOpusHead } from './audio.js';
+
+const ENC = new TextEncoder();
+
+/** EBML variable-length size, always 8 bytes (simple and valid for any size). */
+function size8(n) {
+  const b = new Uint8Array(8);
+  b[0] = 0x01;
+  let v = n;
+  for (let i = 7; i >= 1; i--) { b[i] = v % 256; v = Math.floor(v / 256); }
+  return b;
+}
+function idBytes(id) {
+  const out = [];
+  for (let v = id; v > 0; v = Math.floor(v / 256)) out.unshift(v % 256);
+  return out;
+}
+function concat(parts) {
+  let n = 0; for (const p of parts) n += p.length;
+  const out = new Uint8Array(n); let o = 0;
+  for (const p of parts) { out.set(p, o); o += p.length; }
+  return out;
+}
+/** An element: id, 8-byte size, data. */
+const el = (id, data) => concat([Uint8Array.from(idBytes(id)), size8(data.length), data]);
+const uint = (id, v, bytes = 0) => {
+  const b = [];
+  for (let x = v; x > 0 || b.length === 0; x = Math.floor(x / 256)) b.unshift(x % 256);
+  while (b.length < bytes) b.unshift(0);
+  return el(id, Uint8Array.from(b));
+};
+const str = (id, s) => el(id, ENC.encode(s));
+const float64 = (id, v) => { const b = new Uint8Array(8); new DataView(b.buffer).setFloat64(0, v); return el(id, b); };
+const master = (id, children) => el(id, concat(children));
+
+const ID = {
+  EBML: 0x1A45DFA3, EBMLVersion: 0x4286, EBMLReadVersion: 0x42F7, EBMLMaxIDLength: 0x42F2, EBMLMaxSizeLength: 0x42F3,
+  DocType: 0x4282, DocTypeVersion: 0x4287, DocTypeReadVersion: 0x4285,
+  Segment: 0x18538067, SeekHead: 0x114D9B74, Seek: 0x4DBB, SeekID: 0x53AB, SeekPosition: 0x53AC,
+  Info: 0x1549A966, TimestampScale: 0x2AD7B1, Duration: 0x4489, MuxingApp: 0x4D80, WritingApp: 0x5741,
+  Tracks: 0x1654AE6B, TrackEntry: 0xAE, TrackNumber: 0xD7, TrackUID: 0x73C5, TrackType: 0x83, FlagLacing: 0x9C,
+  CodecID: 0x86, CodecPrivate: 0x63A2, DefaultDuration: 0x23E383, Video: 0xE0, PixelWidth: 0xB0, PixelHeight: 0xBA,
+  CodecDelay: 0x56AA, SeekPreRoll: 0x56BB, Audio: 0xE1, SamplingFrequency: 0xB5, Channels: 0x9F,
+  Cluster: 0x1F43B675, Timestamp: 0xE7, SimpleBlock: 0xA3,
+  Cues: 0x1C53BB6B, CuePoint: 0xBB, CueTime: 0xB3, CueTrackPositions: 0xB7, CueTrack: 0xF7, CueClusterPosition: 0xF1,
+};
+
+const CODEC_IDS = { vp8: 'V_VP8', vp9: 'V_VP9', av1: 'V_AV1' };
+const VIDEO = 1, AUDIO = 2;   // track numbers
+
+const toBytes = d => new Uint8Array(d instanceof ArrayBuffer ? d : d.buffer.slice(d.byteOffset, d.byteOffset + d.byteLength));
+
+/**
+ * @param {{ width: number, height: number, codec: 'vp8' | 'vp9' | 'av1', fps?: number,
+ *           audio?: { codec: 'opus', sampleRate: number, numberOfChannels: number } }} opts
+ *   audio: add an Opus track (WebM holds Opus or Vorbis only). Feed it with addAudioChunk() or addAudioFrame().
+ */
+export function createWebmMuxer({ width, height, codec = 'vp9', fps = 0, audio = null }) {
+  if (audio && audio.codec && audio.codec !== 'opus') throw new Error(`WebM audio must be Opus, not ${audio.codec}`);
+  const frames = [];   // video: { data, key, ms }
+  const audioFrames = [];   // audio: { data, ms, dms }
+  let codecPrivate = null;
+  let audioPrivate = null;
+
+  return {
+    addChunk(chunk, meta) {
+      if (meta && meta.decoderConfig && meta.decoderConfig.description && !codecPrivate) codecPrivate = toBytes(meta.decoderConfig.description);
+      const data = new Uint8Array(chunk.byteLength);
+      chunk.copyTo(data);
+      frames.push({ data, key: chunk.type === 'key', ms: chunk.timestamp / 1000 });
+    },
+    /** Lower-level: add one encoded frame. timestamp in microseconds. */
+    addFrame(data, { key, timestamp }) { frames.push({ data, key: !!key, ms: timestamp / 1000 }); },
+
+    /** Use with an AudioEncoder `output` callback (needs the `audio` option). */
+    addAudioChunk(chunk, meta) {
+      if (meta && meta.decoderConfig && meta.decoderConfig.description && !audioPrivate) audioPrivate = toBytes(meta.decoderConfig.description);
+      const data = new Uint8Array(chunk.byteLength);
+      chunk.copyTo(data);
+      audioFrames.push({ data, ms: chunk.timestamp / 1000, dms: (chunk.duration || 0) / 1000 });
+    },
+    /** Lower-level: add one Opus packet, in order. timestamp/duration in microseconds. */
+    addAudioFrame(data, { timestamp, duration }) { audioFrames.push({ data, ms: timestamp / 1000, dms: (duration || 0) / 1000 }); },
+
+    /** @returns {Uint8Array} the .webm file */
+    finish() {
+      if (!frames.length) throw new Error('No video frames were encoded');
+      const hasAudio = !!(audio && audioFrames.length);
+      // VP8/VP9/AV1 frames from WebCodecs arrive in decode order, which is the order they're stored in
+      const frameMs = fps ? 1000 / fps : (frames.length > 1 ? (frames[frames.length - 1].ms - frames[0].ms) / (frames.length - 1) : 33.333);
+      let duration = frames[frames.length - 1].ms + frameMs;
+      if (hasAudio) { const a = audioFrames[audioFrames.length - 1]; duration = Math.max(duration, a.ms + (a.dms || 20)); }
+
+      const info = master(ID.Info, [
+        uint(ID.TimestampScale, 1000000),            // 1 ms
+        float64(ID.Duration, duration),
+        str(ID.MuxingApp, 'image-to-pixel'), str(ID.WritingApp, 'image-to-pixel'),
+      ]);
+      const trackEntries = [master(ID.TrackEntry, [
+        uint(ID.TrackNumber, VIDEO), uint(ID.TrackUID, VIDEO), uint(ID.TrackType, 1), uint(ID.FlagLacing, 0),
+        str(ID.CodecID, CODEC_IDS[codec] || codec),
+        ...(codecPrivate ? [el(ID.CodecPrivate, codecPrivate)] : []),
+        uint(ID.DefaultDuration, Math.round(frameMs * 1e6)),
+        master(ID.Video, [uint(ID.PixelWidth, width), uint(ID.PixelHeight, height)]),
+      ])];
+      if (hasAudio) {
+        // Matroska requires the OpusHead as CodecPrivate; build one when the encoder didn't provide it
+        const head = parseOpusHead(audioPrivate) ? audioPrivate : opusHead(audio.numberOfChannels, audio.sampleRate);
+        const preSkip = parseOpusHead(head).preSkip;
+        trackEntries.push(master(ID.TrackEntry, [
+          uint(ID.TrackNumber, AUDIO), uint(ID.TrackUID, AUDIO), uint(ID.TrackType, 2), uint(ID.FlagLacing, 0),
+          str(ID.CodecID, 'A_OPUS'),
+          el(ID.CodecPrivate, head),
+          uint(ID.CodecDelay, Math.round(preSkip * 1e9 / 48000)),   // nanoseconds
+          uint(ID.SeekPreRoll, 80000000),                           // 80 ms, as the Opus mapping recommends
+          master(ID.Audio, [float64(ID.SamplingFrequency, audio.sampleRate), uint(ID.Channels, audio.numberOfChannels)]),
+        ]));
+      }
+      const tracks = master(ID.Tracks, trackEntries);
+
+      // Blocks of both tracks in time order (video first on a tie, so a cluster starts on its keyframe).
+      const blocks = frames.map((f, i) => ({ track: VIDEO, data: f.data, key: f.key, ms: f.ms, order: i }));
+      if (hasAudio) audioFrames.forEach((f, i) => blocks.push({ track: AUDIO, data: f.data, key: true, ms: f.ms, order: frames.length + i }));
+      if (hasAudio) blocks.sort((a, b) => a.ms - b.ms || a.track - b.track || a.order - b.order);
+
+      // clusters: a new one at each video keyframe, and before the 16-bit relative timestamp overflows
+      const clusters = [];
+      let cur = null;
+      for (const b of blocks) {
+        const t = Math.round(b.ms);
+        const videoKey = b.track === VIDEO && b.key;
+        if (!cur || videoKey || t - cur.start > 30000) { cur = { start: t, key: videoKey, blocks: [] }; clusters.push(cur); }
+        const head = new Uint8Array(4);
+        head[0] = 0x80 | b.track;                            // track number as a 1-byte EBML vint
+        new DataView(head.buffer).setInt16(1, t - cur.start);
+        head[3] = b.key ? 0x80 : 0x00;
+        cur.blocks.push(el(ID.SimpleBlock, concat([head, b.data])));
+      }
+      const clusterBytes = clusters.map(c => master(ID.Cluster, [uint(ID.Timestamp, c.start), ...c.blocks]));
+
+      // SeekHead with fixed-width positions, so its size is known before the positions are
+      const seekHead = (posInfo, posTracks, posCues) => master(ID.SeekHead, [
+        [ID.Info, posInfo], [ID.Tracks, posTracks], [ID.Cues, posCues],
+      ].map(([id, pos]) => master(ID.Seek, [el(ID.SeekID, Uint8Array.from(idBytes(id))), uint(ID.SeekPosition, pos, 8)])));
+      const shSize = seekHead(0, 0, 0).length;
+      const posInfo = shSize, posTracks = posInfo + info.length;
+      let pos = posTracks + tracks.length;
+      const cuePoints = [];
+      clusters.forEach((c, i) => {
+        if (c.key) cuePoints.push(master(ID.CuePoint, [uint(ID.CueTime, c.start), master(ID.CueTrackPositions, [uint(ID.CueTrack, VIDEO), uint(ID.CueClusterPosition, pos)])]));
+        pos += clusterBytes[i].length;
+      });
+      const cues = master(ID.Cues, cuePoints.length ? cuePoints : [master(ID.CuePoint, [uint(ID.CueTime, 0), master(ID.CueTrackPositions, [uint(ID.CueTrack, VIDEO), uint(ID.CueClusterPosition, posTracks + tracks.length)])])]);
+      const posCues = pos;
+
+      const header = master(ID.EBML, [
+        uint(ID.EBMLVersion, 1), uint(ID.EBMLReadVersion, 1), uint(ID.EBMLMaxIDLength, 4), uint(ID.EBMLMaxSizeLength, 8),
+        str(ID.DocType, 'webm'), uint(ID.DocTypeVersion, 4), uint(ID.DocTypeReadVersion, 2),
+      ]);
+      const segment = master(ID.Segment, [seekHead(posInfo, posTracks, posCues), info, tracks, ...clusterBytes, cues]);
+      return concat([header, segment]);
+    },
+  };
+}

package/lib/editor/exporter.js

@@ -20,10 +20,48 @@ export function exportSize(s, r, item) {
 /** PNG options for one exported image. */
 const imageOpts = (s, r, item) => (s.export.size === 'source' && item ? { ...exportSize(s, r, item), indexed: s.export.indexed } : pngOpts(s));
 
+/**
+ * Whole-number scales to try for a video, best first. 'scale' = the PNG export scale; otherwise a target
+ * height ('1080', '720', '2160', measured on the short side), falling back to smaller sizes if the
+ * browser's encoder refuses the big one. Never below 240 px tall.
+ */
+export function videoScales(size, r, exportScale = 4) {
+  const min = Math.max(1, Math.ceil(240 / Math.min(r.width, r.height)));
+  const fit = target => {
+    const long = Math.round(target * 16 / 9), portrait = r.height > r.width;
+    const W = portrait ? target : long, H = portrait ? long : target;
+    return Math.max(min, Math.min(Math.floor(W / r.width), Math.floor(H / r.height)));
+  };
+  const first = size === 'scale' ? Math.max(min, exportScale) : fit(Number(size) || 1080);
+  const list = [first, fit(1080), fit(720), min].filter((v, i, a) => v <= first && a.indexOf(v) === i);
+  return list.sort((a, b) => b - a);
+}
+
+/** Snapshot selected frames before an asynchronous export can change files or settings. */
+export function selectedFrameOptions(opts, selection) {
+  if (!selection?.active) return opts;
+  if (!selection.complete) throw new Error('Wait for the selected interval to finish loading');
+  if (!selection.renderedFrames.length) throw new Error('Select frames on the canvas first');
+  return { ...opts, source: 'video', item: selection.item, settings: selection.settings,
+    fps: selection.fps, start: selection.start, end: selection.end, audio: false,
+    renderedFrames: selection.renderedFrames.map(frame => ({ ...frame })) };
+}
+
 export function createExporter(app) {
   const S = () => app.store.settings;
+  /** While frame selection is on, its tile canvas replaces the preview, so `app.result` is stale. */
+  const blockSelectingFrames = () => {
+    if (!app.frameSelection?.()?.active) return false;
+    toast('Turn off frame selection to export the current frame', { kind: 'error' });
+    return true;
+  };
+  const frameOptions = opts => {
+    try { return selectedFrameOptions(opts, app.frameSelection?.()); }
+    catch (e) { toast(e.message, { kind: 'error' }); return null; }
+  };
 
   async function exportPNG() {
+    if (blockSelectingFrames()) return;
     if (!app.result) return toast('Open an image first', { kind: 'error' });
     const s = S();
     const bytes = await encodePNG(app.result, imageOpts(s, app.result, app.current));
@@ -34,6 +72,7 @@ export function createExporter(app) {
   }
 
   async function copyImage() {
+    if (blockSelectingFrames()) return;
     if (!app.result) return;
     try {
       const bytes = await encodePNG(app.result, { ...imageOpts(S(), app.result, app.current), indexed: false });
@@ -44,6 +83,7 @@ export function createExporter(app) {
 
   /** Run `fn` with a cancellable progress toast. */
   async function task(label, fn) {
+    if (app.exporting) return toast('An export is already running');
     const ctrl = new AbortController();
     const t = toast(label, { progress: true, onCancel: () => ctrl.abort() });
     app.exporting = true;
@@ -83,8 +123,34 @@ export function createExporter(app) {
   }
 
   /** Process the frames chosen in the Animation section; calls onFrame(result, i, total). */
-  async function frames(opts, signal, progress, onFrame) {
+  async function processVideoFrames(opts, signal, progress, onFrame) {
     const s = S();
+    const item = app.current;
+    if (!item || item.type !== 'video') throw new Error('Open a video first');
+    const video = item.source;
+    const end = opts.end > opts.start ? opts.end : video.duration;
+    return forEachFrame(video, {
+      fps: opts.fps, start: opts.start, end, signal,
+      onFrame: async ({ index, total }) => {
+        app.engine.invalidate();
+        const r = await app.engine.process(video, s);
+        await onFrame(r, index, total, `${base(item.name)}-${String(index).padStart(4, '0')}`);
+        progress((index + 1) / total, `Frame ${index + 1} of ${total}`);
+      },
+    });
+  }
+
+  /** Process the frames chosen in the Animation section; calls onFrame(result, i, total). */
+  async function frames(opts, signal, progress, onFrame) {
+    if (opts.renderedFrames) {
+      for (let i = 0; i < opts.renderedFrames.length; i++) {
+        if (signal.aborted) throw new DOMException('Aborted', 'AbortError');
+        const { result, index } = opts.renderedFrames[i];
+        await onFrame(result, i, opts.renderedFrames.length, `${base(opts.item.name)}-${String(index).padStart(4, '0')}`);
+        progress((i + 1) / opts.renderedFrames.length, `Frame ${i + 1} of ${opts.renderedFrames.length}`);
+      }
+      return opts.renderedFrames.length;
+    }
     if (opts.source === 'files') {
       const items = app.items.filter(i => i.type === 'image');
       let size = null;
@@ -99,24 +165,14 @@ export function createExporter(app) {
       }
       return items.length;
     }
-    const item = app.current;
-    if (!item || item.type !== 'video') throw new Error('Open a video first');
-    const video = item.source;
-    const end = opts.end > opts.start ? opts.end : video.duration;
-    return forEachFrame(video, {
-      fps: opts.fps, start: opts.start, end, signal,
-      onFrame: async ({ index, total }) => {
-        app.engine.invalidate();
-        const r = await app.engine.process(video, s);
-        await onFrame(r, index, total, `${base(item.name)}-${String(index).padStart(4, '0')}`);
-        progress((index + 1) / total, `Frame ${index + 1} of ${total}`);
-      },
-    });
+    return processVideoFrames(opts, signal, progress, onFrame);
   }
 
   async function exportAnimation(opts) {
-    const name = opts.source === 'files' ? 'animation' : base(app.current?.name);
-    const s = S();
+    opts = frameOptions(opts);
+    if (!opts) return;
+    const name = opts.source === 'files' ? 'animation' : base((opts.item || app.current)?.name);
+    const s = opts.settings || S();
     const delay = 1000 / opts.fps;
     if (opts.format === 'gif' || opts.format === 'png-seq') {
       await task('Rendering frames', async (signal, progress) => {
@@ -139,21 +195,46 @@ export function createExporter(app) {
     }
     // MP4 / WebM through WebCodecs
     await task(`Encoding ${opts.format.toUpperCase()}`, async (signal, progress) => {
-      const { createVideoEncoder } = await import('../video.js');
+      const { createVideoEncoder, decodeAudio } = await import('../video.js');
+      // Keep audio: the video's own soundtrack, cut to the exported range (null when it has none)
+      const item = app.current;
+      let audio = null;
+      if (opts.audio && opts.source === 'video' && item && item.type === 'video' && item.file) {
+        progress(0, 'Reading audio');
+        const end = opts.end > opts.start ? opts.end : item.source.duration;
+        audio = await decodeAudio(item.file, { start: opts.start, end }).catch(e => { console.warn('[export] audio', e); return null; });
+      }
       let enc = null;
       await frames(opts, signal, progress, async r => {
-        enc ||= await createVideoEncoder({ format: opts.format, fps: opts.fps, width: r.width, height: r.height, scale: Math.max(s.export.scale, Math.ceil(240 / r.height)) });
+        if (!enc) {
+          // Players stretch small videos with smoothing, which blurs pixel art. So the frames are upscaled
+          // by a whole number to about the chosen size first (and H.264's colour subsampling stays inside each pixel).
+          let tries = videoScales(opts.videoSize, r, s.export.scale), err = null;
+          for (const scale of tries) {
+            try { enc = await createVideoEncoder({ format: opts.format, fps: opts.fps, width: r.width, height: r.height, scale, audio }); break; }
+            catch (e) { err = e; if (!/encoder available/.test(e.message)) throw e; }
+          }
+          if (!enc) throw err;
+        }
         await enc.add(r);
       });
+      if (audio && enc.audioCodec) progress(1, 'Encoding audio');
       const blob = await enc.finish();
       downloadBlob(blob, `${name}.${opts.format}`);
-      return `Saved ${opts.format.toUpperCase()} (${(blob.size / 1024 / 1024).toFixed(1)} MB)`;
+      const sound = !opts.audio || opts.source !== 'video' ? ''
+        : enc.audioCodec === 'opus' && opts.format === 'mp4' ? ', with Opus audio: VLC and browsers play it, Windows Media Player and QuickTime may not'
+        : enc.audioCodec ? ', with audio'
+        : audio ? ", without audio (this browser can't encode it)"
+        : ', no audio track in the source';
+      return `Saved ${opts.format.toUpperCase()} (${(blob.size / 1024 / 1024).toFixed(1)} MB${sound})`;
     });
   }
 
   async function exportSheet(opts) {
-    const name = opts.source === 'files' ? 'sheet' : `${base(app.current?.name)}-sheet`;
-    const s = S();
+    opts = frameOptions(opts);
+    if (!opts) return;
+    const name = opts.source === 'files' ? 'sheet' : `${base((opts.item || app.current)?.name)}-sheet`;
+    const s = opts.settings || S();
     await task('Building sprite sheet', async (signal, progress) => {
       const list = [];
       await frames(opts, signal, progress, (r, i, total, frameName) => { list.push({ width: r.width, height: r.height, data: r.data, name: frameName ? base(frameName) : undefined, delay: 1000 / opts.fps }); });
@@ -171,6 +252,7 @@ export function createExporter(app) {
   }
 
   async function exportTileset({ tile, flips }) {
+    if (blockSelectingFrames()) return;
     if (!app.result) return toast('Open an image first', { kind: 'error' });
     const s = S();
     const ts = buildTileset(app.result, { tileWidth: tile, tileHeight: tile, flips });