So, I had a lot of free time this summer. For a few weeks, I wanted to play around with real-time video manipulation directly in the browser. From a developer's point of view, projects like this force you to understand how media streams actually work under the hood, rather than just slapping a <video> tag on a page and calling it a day. (I can empathize because I was a bored BSCS student on summer break with way too much time on my hands).
This is a real-time ASCII video player and caller. The funny part? It’s not actually a video you're looking at :). Behind the scenes, the browser hides the actual camera feed and instantly translates the light and shadows into keyboard characters. A dense character like @ represents a bright spot, while a blank space represents the dark. You are ultimately just looking at a rapidly updating wall of text.
🚀 See it in action: ugseecs.github.io/ascii.play
This setup gives it an unintended, but incredibly cool benefit: it is the ultimate stealth media.
Corporate firewalls, bandwidth sniffers, and automated tracking bots are trained to look for standard video signatures and faces. They have absolutely no idea what to do with a chaotic matrix of green symbols. You get a private, decentralized video that the internet just sees as a giant, rapidly changing text document.
- Video to ASCII: Drop an MP4 in the dropzone and watch it convert instantly.
- Webcam Mode: Turn on your camera to see yourself in pure text.
- P2P Calling: Call a friend using peer-to-peer connection.
- Zero Dependencies: Developed with zero external dependencies, so you don't have to install anything to run it.
⚠️ Heads Up: Keep in mind that it’s built for visual punch, so it shouldn't be used in serious production assignments. If you are finding a perfectly optimized assignment-ready code, search elsewhere (or still better, drop out and do something you really love => ).
While the core ASCII engine is pure, stubborn vanilla JavaScript, I didn't build everything completely from scratch:
- PeerJS: The absolute MVP for the calling feature. It handles the complicated handshake so the video can flow directly browser-to-browser without needing my own servers.
- jsgif (by antimatter15) & gif.js (by jnordberg): The inline GIF recording feature uses compression math heavily inspired by these two MIT-licensed legends.
- Google Fonts: Specifically, JetBrains Mono for that crisp, developer-friendly terminal aesthetic.