junkpile

06 · Tauri v1 Webcam Texture Single Window

A focused foundation for capturing a webcam inside a Tauri v1 WebView and uploading each decoded frame into a raw WebGL texture.

This folder intentionally retains its original repository name:

webcam-tauri-v1-single-template

The visible example number is 06 so it aligns with the complete Junkpile Tauri v1 Essentials sequence.

What this example teaches

• Requesting camera permission with navigator.mediaDevices.getUserMedia()
• Enumerating and switching video-input devices
• Reading the active camera resolution and requested frame rate
• Uploading an HTML video frame with gl.texImage2D()
• Preserving source aspect ratio with contain, cover, and stretch framing
• Running multiple GLSL effects against a live media texture
• Creating two persistent framebuffer textures for visual feedback
• Using a separate blit program so the processed frame is not graded twice
• Handling WebGL context loss and native-window fullscreen
• Packaging camera permissions for macOS

Signal flow

Camera hardware
      ↓
getUserMedia()
      ↓
HTMLVideoElement
      ↓
gl.texImage2D()
      ↓
GLSL effect + color grade
      ↓
ping-pong history framebuffer
      ↓
blit shader
      ↓
WebGL canvas

Camera frames remain entirely inside the WebView. Rust does not copy or process the video stream.

Run

npm install
npm run dev

Press Start camera and approve the operating-system permission prompt. After approval, refresh the camera list if device labels remain generic.

Production build

npm run build

On macOS, generated bundles are placed under:

src-tauri/target/release/bundle/

Public distribution generally requires Apple signing and notarization. The project includes Info.plist camera usage text and the camera sandbox entitlement.

Controls

Section	Control	Purpose
Camera	Device	Selects a video-input device
Camera	Request	Requests 480p, 720p, 1080p, or the highest available mode
Camera	Framing	Chooses contain, cover, or stretch source mapping
Effect	Mode	Selects passthrough, wave, radial, kaleidoscope, edge, or glitch processing
Effect	Distortion	Controls the selected spatial effect
Effect	Feedback	Mixes the previous processed frame into the current frame
Effect	Zoom	Scales source coordinates
Effect	Warp speed	Advances time-based effects
Color	Hue / saturation / brightness / contrast	Grades the processed image
Switches	Mirror / invert / greyscale	Enables common camera and color flags

Keyboard shortcuts:

Key	Action
Space	Pause or resume renderer updates without closing the camera
R	Restore defaults and reset animation time
X	Clear both feedback history buffers
F	Toggle native-window fullscreen

Project structure

webcam-tauri-v1-single-template/
├── README.md
├── MODERNIZATION-NOTES.md
├── package.json
├── src/
│   ├── index.html
│   ├── sketch.js
│   └── styles.css
└── src-tauri/
    ├── Cargo.toml
    ├── Info.plist
    ├── entitlements.plist
    ├── tauri.conf.json
    └── src/main.rs

Camera-device behavior

Browsers and WKWebView may hide meaningful camera labels until permission has been granted once. The Refresh button remains available before permission so the UI never becomes permanently locked in an empty state.

Changing the selected device or requested capture size while the camera is active stops the old tracks first and then opens a new stream. This avoids retaining multiple cameras or conflicting tracks.

Feedback implementation

Two RGBA textures alternate roles each frame:

Frame N:   history B → effect → history A → screen
Frame N+1: history A → effect → history B → screen

The screen copy uses a separate blit shader. This avoids applying hue, contrast, effects, or feedback a second time during display.

Known limitations

• Camera formats and maximum resolutions are decided by the operating system and WebKit.
• Requested resolution and frame rate are preferences, not guarantees.
• The camera stays open when renderer updates are paused.
• This example uses browser WebGL rather than native wgpu.
• Windows and Linux camera permission behavior should be tested independently.

This site is open source. Improve this page.