WebStudio

WebStudio is a creative webcam playground that applies real-time visual effects to your camera feed. It runs entirely in the browser using HTML5 Canvas and React.

Features

• Real-time Effects:

  • ASCII: Converts video to ASCII characters.
  • Matrix: Falling code rain effect.
  • Glitch: Digital signal corruption style.
  • Pixelate: Retro low-res look.
  • Halftone: Comic book style dots.
  • RGB Shift: Chromatic aberration.
  • Mirror: Symmetrical reflection.
  • CRT: Old TV scanlines and vignette.
  • Ripple: Water-like wave distortion.

• Virtual Camera / Pop-out: Detach the video into a clean popup window. This is useful for capturing the effect in streaming software like OBS or using it as a source in other applications.

• Image Capture: Instantly save high-quality snapshots of your current effect.

Usage

1. Allow camera permissions when prompted.
2. Select an effect from the sidebar menu.
3. Adjust parameters (intensity, resolution, color) in the settings panel.
4. Click "Capture Frame" to save an image.
5. Click "Virtual Camera" to open a dedicated popup window for streaming.

Technologies

• React 19
• TypeScript
• Tailwind CSS
• Lucide Icons