ITC Visual Studio / Browser Version

Overview

The Browser Version stores all working session data locally in your browser using IndexedDB. Recordings, evidence, and capsules are not uploaded to any server. Your research stays on your device.

The primary workflow is:

1. Create or restore a session
2. Record video or import existing video
3. Extract frames for analysis
4. Review frames, apply effects, mark evidence
5. Build slideshows from evidence
6. Export a Session Capsule for backup or portability

Quick Workflow

1. The app opens to Camera / Session so you can create, restore, or prepare a session first.
2. Create a new session with a name and experiment type, or restore a Session Capsule.
3. Record a new video with your camera, or import an existing video file.
4. Frames are extracted automatically. The app opens Analysis Lab.
5. Use Frame Skim playback to move quickly through setup or empty sections.
6. Mark junk frames for cleanup. Checked evidence frames are protected.
7. Zoom, pan, and apply effects to inspect details.
8. Check frames worth keeping and save them as evidence.
9. Build a slideshow from saved evidence.
10. Export a Session Capsule for backup or portability.

Sessions

Each session is stored locally in your browser. A session keeps the source video, extracted frames, evidence, slideshow projects, and metadata together.

Experiment Types

WaterFire / FlameSmokeInkSteam / VaporMirror / ReflectionGeneral Visual ITCCustom

Experiment types help categorize sessions. They do not change application behavior.

Camera & Recording

Camera Selection

When a session is active, the Camera page shows available camera devices. Select your camera from the Device dropdown. The app automatically enumerates available cameras, including external USB cameras and Continuity Camera.

Device Identity

Instead of showing an ambiguous "System Default," the Camera dropdown displays the actual physical device name when the browser exposes it. For example:

• System Default — MX Brio
• System Default — FaceTime HD Camera

All available named cameras are listed below the default entry after browser permission is granted.

Active Camera Display

Below the camera dropdown, the Active Camera readout shows the actual device attached to the current media stream. This is derived from the browser's MediaStreamTrack.label and represents the physical device currently in use — not merely the dropdown selection.

Format & Frame Rate

Choose a resolution from the Format dropdown:

640 x 480960 x 5401024 x 5761280 x 7201600 x 8961920 x 1080

Choose a frame rate: 24 FPS or 30 FPS (default).

Recording Duration

Choose a recording duration from the Recording Duration dropdown:

• 1 Minute (default) — Produces approximately 1,800 frames at 30 FPS
• 2 Minutes — Produces approximately 3,600 frames at 30 FPS

The shorter 1-minute option is useful for shorter experimental sessions and produces fewer extracted frames, reducing post-recording processing time. The 2-minute option is the absolute maximum allowed.

The recording duration selector is disabled during recording and finalization.

Microphone

The microphone connects automatically when the camera starts. Select your microphone device, channel count (Mono/Stereo), and sample rate (48000 Hz or 44100 Hz) from the Microphone panel. Audio level meters show RMS and Peak levels during preview.

Microphone Device Identity

The microphone dropdown displays the actual physical device name, just like the camera dropdown. For example:

• System Default — MX Brio
• System Default — MacBook Pro Microphone

Active Microphone Display

Below the microphone dropdown, the Active Microphone readout shows the actual device attached to the current audio stream.

Device Changes

When you connect or disconnect a camera or microphone, the device lists refresh automatically. If the active device is disconnected, the status display updates to show "disconnected." Active recording is not interrupted for device list refreshes.

Live Preview

The camera preview starts automatically after a session becomes active. No manual "Connect Devices" or "Arm Camera" step is required. The preview updates when you change the camera device, format, or frame rate.

Recording

Press Record to begin capturing video. Press Record again (now showing Stop) to end the recording.

MP4/H.264 Preferred

The app prefers MP4/H.264 recording when the browser supports it. If MP4 is not available, it falls back to WebM. The actual recording format is displayed in Settings > Advanced Diagnostics.

Recording Limit

Recording is limited to the selected duration (1 minute or 2 minutes). This limit protects browser performance and prevents excessively large frame-analysis sessions. The absolute maximum is 2 minutes (120 seconds).

Final 10-Second Countdown

During the last 10 seconds of recording, a red countdown overlay appears in the camera preview:

• 10-6 seconds remaining: Red pulsing number with "SECONDS LEFT" label
• 5-1 seconds remaining: Harder pulse, brighter red
• 0 seconds: Recording stops automatically

For a 1-minute recording, the countdown begins at 0:50. For a 2-minute recording, the countdown begins at 1:50.

The countdown is a UI overlay only. It is not recorded into the video file.

After Recording

After recording stops, the video is automatically processed: frames are extracted and Analysis Lab opens. The recorded video is preserved as the session source video for Session Video playback.

Importing Media

Import Video / Extract Frames

You do not have to record video with the app. You can import an existing video file for analysis.

MP4MOVWebMMKVAVI

Video Preflight

Before extraction, the app inspects the video and shows a summary:

• File name and size
• Duration and resolution
• Estimated frame count (when FPS is known)

If the video is very large (over 2 minutes, over 4,000 estimated frames, or over 250 MB), a warning dialog appears asking whether to proceed. You can cancel without affecting the session.

Restore Capsule

Use Restore Capsule to import a .vitc.zip session archive. See the Capsule Restore section for details.

Frame Extraction Architecture

When you record or import a video, the app extracts individual frames for analysis.

How It Works

1. The source video is decoded using FFmpeg WASM (WebAssembly)
2. Frames are extracted as temporary PNG images
3. Each PNG is converted to JPEG using browser-native image APIs
4. Final JPEG frames are stored in the session at quality 0.93

Batch Processing

Frames are extracted in 5-second batches to manage memory pressure. The source frame rate is preserved: a 30 FPS video produces approximately 30 frames per second of video.

Analysis Lab

Analysis Lab is where the main review work happens. It has two viewing modes:

Frame Skim Speed

Frame Skim Speed controls how quickly extracted frames advance during playback:

• Range: 1–20 FPS (integer values)
• Default: 1 FPS
• Effect on Session Video: None — completely independent

Transport Controls

Viewer Modes

Zoom & Pan

Use the mouse wheel to zoom in and out (0.25x to 8x range). Drag the image to pan when zoomed in. Use Fit to return to the full-image view.

Effects

Effects are analysis and visual-processing tools. They are applied to individual frame review state. Use effects to make contrast, edges, shapes, or light patterns easier to evaluate.

Effect Groups

Effects use the same viewing-layer stack as the Mac application: Monochrome, Contrast, Gamma, Soft Glow, Vignette, Negative, Sobel Edge Enhancement, High Gain with shadow boost/grain, and Posterization. Water-scrying LUT files use trilinear interpolation.

Frames Workspace

The Frames workspace shows the complete session frame collection as a scrollable grid of thumbnails.

Large Frame Collections

Large sessions are rendered incrementally for browser performance. The frame count label always shows the authoritative session total (e.g., "3,600 frames"). Not all full-resolution thumbnails need to be decoded simultaneously — only visible and near-visible thumbnails exist as DOM nodes.

The grid uses continuous scroll: as you scroll down, more thumbnails are automatically loaded and rendered.

Evidence

Evidence Candidates

Evidence frames are researcher-selected candidate frames from the session. They represent frames worth keeping, reviewing further, or including in slideshows.

Frames vs. Evidence

• Frames: All extracted analysis frames from the session
• Evidence: Researcher-selected candidate frames worth keeping

Evidence Workspace

The Evidence workspace shows saved evidence candidates in a grid. From here you can:

• Export individual or batch evidence images
• Send evidence to the Slideshow Builder
• Preview evidence with or without effects

Export Evidence

Evidence export saves selected images as standalone files. Choose format (JPEG/PNG), quality, original or edited output, and optional watermark settings.

Slideshow Builder

The Slideshow Builder creates MP4 presentations from saved evidence frames.

Projects

Each slideshow is saved as a named project. You can have multiple projects per session.

• New: Opens a naming dialog. Every project requires a name.
• Save: Persists the current project configuration.
• Saved Projects: Dropdown lists all projects for the active session. Select one to load it.

Projects track dirty state. If you have unsaved changes, the status indicator shows "Unsaved Changes" in yellow.

Frame Selection

• Select All: Selects all evidence frames
• Clear: Deselects all frames
• Chronological: Arranges selected frames in recording order

Slide Settings

Transitions

Ken Burns Pan/Zoom

Ken Burns adds motion to still images by slowly zooming and panning. Select "Ken Burns Pan/Zoom" from the Motion dropdown. Adjust the Start and End zoom sliders (1.0 to 2.0). Six deterministic motion patterns rotate through the slide index to create visual variety.

Ken Burns motion continues through transitions. It works independently in Still mode as well.

Watermark

Enable a text or image watermark on slideshow frames.

Text Watermark

• Custom text with configurable color
• Color picker with 10 preset colors: White, Blue, Amber, Red, Green, Purple, Cyan, Orange, Pink, Black
• Position: Bottom Right, Bottom Left, Top Right, Top Left, Center
• Opacity: 0–1 (default 0.5)
• Size: 0.4–2.4 (default 1.0)

Image Watermark

• Upload a PNG, JPEG, or WebP image
• Scaled proportionally to base size × size slider
• Same position and opacity controls as text

Preview

Use Play Slideshow to preview the full slideshow with transitions, Ken Burns motion, and watermarks. Use Preview Transition to test just the transition between two slides. Use Stop to end playback.

Export

Export MP4 creates the slideshow video. The project is auto-saved before export. MP4 is preferred; WebM is used as fallback if MP4 MediaRecorder is not available. The exported file downloads to your device and is also saved in the session.

Session Capsule

A Session Capsule is a portable archive of your research session. It packages everything needed to restore the session on another device or at a later time.

Format

<Session Name>.vitc.zip

The capsule is a standard ZIP archive with a .vitc.zip extension.

Contents

A capsule may contain:

• Metadata/ — Session configuration, frame metadata, evidence metadata, slideshow project metadata
• Images/ — Extracted JPEG or PNG frames
• Evidence/ — Saved evidence candidate images
• Markers/ — Session markers
• Notes/ — Session notes
• Video/ — Source video (recorded or imported)
• Exports/Slideshows/ — Rendered slideshow MP4/WebM files
• Slideshow/Projects/ — Watermark image assets for slideshow projects

Content depends on what was actually created in the session. If no slideshow was created, no slideshow files are included.

Capsule Export

Export creates a complete portable archive of the current session.

How to Export

1. Open the Export workspace
2. Review the session summary (name, type, frames, evidence, slideshows)
3. Press EXPORT SESSION CAPSULE

Export Status

During export, a prominent status overlay appears:

Detailed progress stages appear beneath the primary status:

• Adding Metadata
• Adding Frames (with count)
• Adding Evidence
• Adding Source Video
• Adding Slideshows
• Adding Slideshow Projects
• Creating ZIP

Export Completion

When the archive is generated successfully:

The file downloads automatically. The live Library session is not deleted by export.

Large Archives

If the estimated capsule size exceeds 200 MB, a confirmation dialog appears showing the estimated size and contents. You can cancel or continue.

Capsule Restore

Restore reconstructs a session from a .vitc.zip capsule into browser storage.

How to Restore

1. Click Restore Capsule (available on Camera, Library, or Import pages)
2. Select a .vitc.zip file
3. Wait for the restore to complete

Restore Status

During restore, a prominent status overlay appears:

Large capsules containing thousands of frames may require noticeable time to restore. The status remains visible throughout the entire operation.

Detailed progress stages include:

• Restoring Session Metadata
• Restoring Frames
• Restoring Evidence
• Restoring Source Video
• Restoring Slideshow Projects
• Restoring Slideshow Exports
• Saving Session

Restore Completion

When restore is successful:

What Gets Restored

A complete round-trip restore includes:

• Session metadata and configuration
• All extracted frames
• Evidence candidates with their edit state
• Source video (when included in capsule)
• Slideshow projects with all settings
• Rendered slideshow MP4s

Runtime object URLs are recreated as needed. They are browser-local references, not portable file paths.

Session Library

The Library shows all sessions stored in your browser. Each session card displays:

• Session name
• Experiment type
• Date and time
• Frame count
• Evidence count
• Source video availability
• Slideshow count (when applicable)

Opening Sessions

Click a session card to open it. The session loads into Analysis Lab for continued review.

Deleting Sessions

Deleting a Library session removes its browser-local session data permanently. Export a Session Capsule first if you want a portable backup.

Browser Storage & Session Capsule Backups

The Browser Version stores working session information locally in your browser using IndexedDB.

Important Facts

• Refreshing the page does not normally remove persisted sessions.
• Closing and reopening the browser usually preserves sessions.
• Clearing browser/site data can remove locally stored sessions.
• Using incognito/private mode does not persist sessions after the window closes.

Backup Recommendation

For important research sessions, always export a Session Capsule. The capsule is a portable .vitc.zip file that you can store on your computer, external drive, or cloud storage. Browser-local data should not be treated as your only permanent archive.

Browser Compatibility

Primary Tested Browser

Google Chrome / Chromium

The Browser Version is developed and primarily tested in Chrome/Chromium.

Other Browsers

Browser APIs can differ across Safari, Firefox, Opera, Edge, and other Chromium/non-Chromium browsers. The following APIs may behave differently between browsers:

• Camera permissions and getUserMedia
• Recording codecs (MediaRecorder)
• Video playback formats
• IndexedDB behavior and storage limits
• OffscreenCanvas support
• DecompressionStream for ZIP extraction

Full compatibility outside Chrome/Chromium has not been verified. If you encounter issues in another browser, try Chrome/Chromium.

Privacy & Local Data Architecture

All session media remains local to your browser. The Browser Version does not upload recordings, evidence, frames, or capsules to any server.

What Is Hosted

• Application code: Hosted on the web (Cloudflare/GitHub Pages)
• Your research sessions: Stored locally in your browser (IndexedDB)

Website hosting and application code hosting are separate from your locally stored research sessions. Your data stays on your device.

Recommended Working Method

1. Create a session with a clear, descriptive name before recording or importing.
2. Use 720p / 30 FPS unless you need a larger source.
3. Confirm your Active Camera and Active Microphone are the intended devices.
4. Record or import your video.
5. Frames are extracted automatically.
6. Use Frame Skim playback (1–20 FPS) to move through setup or empty sections.
7. Use Mark Before to mark junk frames before the first useful frame.
8. Use Delete Marked to remove junk frames. Checked evidence frames are protected.
9. Review remaining frames. Use FIT, FOCUS, or MANUAL viewer modes as needed.
10. Apply effects only to test whether detail becomes clearer.
11. Check frames worth keeping.
12. Save checked frames as evidence.
13. Export evidence images if needed.
14. Build a slideshow from saved evidence.
15. Export a Session Capsule for backup before closing.

Session Research Documentation

Before beginning an experimental session, researchers should confirm and, where appropriate, record or document:

• Active camera device
• Active microphone device
• Recording resolution
• Frame rate
• Recording duration
• Session name

This is good practice for session reproducibility and research documentation. The Active Camera and Active Microphone readouts in the Camera panel provide the exact device names for your records.

Troubleshooting