junkpile

22 · Tauri v2 Image Sequence Player

A two-window Tauri v2 example for playing numbered still-image sequences as time-based media. The controls WebView handles native folder/file selection and transport. The output WebView owns the decode cache, playback clock, WebGL renderer, monitor placement, and PNG capture.

Run

npm install
npm run dev

First test

1. Launch the app. A generated 180-frame sequence starts automatically.
2. Test Play/Pause, Reverse, stepping, scrubbing, looping, and adjacent-frame blending.
3. Choose Choose folder to scan a numbered frame folder, or Choose files to select individual images.
4. Select a display, press Move to display, then Fullscreen output.

Supported frames

• PNG
• JPEG / JPG
• WebP
• BMP
• GIF
• TIFF / TIF
• AVIF where the WebView decoder supports it

Frames are naturally sorted, so frame_2.png appears before frame_10.png.

Architecture

controls WebView
  ├─ Tauri v2 native folder/file dialog
  ├─ Rust recursive directory scanner
  ├─ native drag-and-drop paths
  ├─ transport + cache controls
  └─ Tauri event bus
          ↓
output WebView
  ├─ Rust binary frame reader
  ├─ origin-clean Blob image decoder
  ├─ bounded decode queue + cache
  ├─ decode-aware playback clock
  ├─ adjacent-frame WebGL blending
  ├─ framing / grade / calibration grid
  └─ monitor placement + native PNG save

Local image paths are never uploaded directly into WebGL. Each requested frame is read by Rust and returned through Tauri binary IPC, then decoded from a temporary Blob URL. This avoids the WKWebView asset-protocol texture security error demonstrated and fixed in Example 16.

Playback behavior

• Hold every frame pauses the clock when the requested frame is not decoded, then resumes from the same playhead.
• Drop late frames preserves real-time timing and displays the nearest decoded frame when necessary.
• Loop, Ping-pong, and Play once honor the active in/out range.
• Blend adjacent frames interpolates between two decoded frames.
• Sequence FPS and playback-rate updates are coalesced before crossing the window event bus.

Cache modes

• Window around playhead keeps a configurable radius and evicts distant images.
• Preload all frames queues the full sequence and can consume substantial memory with 4K/8K frames.
• At most four Rust reads/image decodes run simultaneously.

Keyboard shortcuts

• Space: play or pause
• Left / Right: step one frame
• Shift + Left / Shift + Right: step ten frames
• R: reverse direction

Important files

src/app.js                         controls, selection, transport, event routing
src/output.js                      cache, binary frame loading, playback, WebGL
src-tauri/src/main.rs              scanner, binary reads, monitor/output commands
src-tauri/capabilities/default.json explicit Tauri v2 permissions
src-tauri/tauri.conf.json          controls/output windows and CSP

Notes

• An image sequence is a set of ordered still images where every file is one video frame. One image cannot animate; unrelated images play as a naturally sorted slideshow.
• Animated GIF files may animate internally; numbered still images are the intended workflow.
• Long high-resolution sequences should use the windowed cache.

This site is open source. Improve this page.