No source loaded
Input Source
Upload Video
mp4 · webm · oggNo source loaded
Upload Video
mp4 · webm · oggI 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. Looking 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).
So here’s my 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.
This 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.
You can try it out by dropping an MP4 in the dropzone or turning on your webcam to call a friend. The source code is right there in the file. 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 => ). It was developed with zero external dependencies, so you don't have to install anything to run it. Comments/Suggestions/Bug Reports are welcome.
While the core ASCII engine is pure, stubborn vanilla JavaScript, I didn't build everything completely from scratch.