ASCII Cam

A real-time webcam and image to ASCII art converter with 9+ character sets, customizable colors, and export to PNG, MP4, and GIF. Built in about 2 hours.

Type

Web App

Tech Stack

React

TypeScript

Vite

Canvas API

ASCII Cam

Project Purpose & Goal

Wanted to see how fast I could ship something. Picked a familiar stack to iterate quickly — took about 2 hours from idea to deployed.

Stack & Explanation

React 19 and TypeScript for the UI, Canvas API for pixel-level brightness sampling and character mapping, gif.js for GIF encoding in Web Workers, and Vite 8 for instant dev feedback.

ReactTypeScriptVite
ASCII Cam stars charsetASCII Cam dense charset

Problems & Thought Process

Color scheming. H.264 chroma subsampling smeared neon green on dark backgrounds during video recording. The record canvas wasn't filling its background before each frame capture. Fixed by bumping bitrate to 8 Mbps and adding proper canvas initialization.

Lessons Learned

Not everything needs a deeper purpose or needs to be profitable. Sometimes it just needs to be fun.