https://github.com/pshycodr/phosphor-cam
Real-time ASCII art camera that transforms your webcam feed into glowing terminal aesthetics. Built with React + Canvas API.
https://github.com/pshycodr/phosphor-cam
Last synced: 5 months ago
JSON representation
Real-time ASCII art camera that transforms your webcam feed into glowing terminal aesthetics. Built with React + Canvas API.
- Host: GitHub
- URL: https://github.com/pshycodr/phosphor-cam
- Owner: pshycodr
- License: mit
- Created: 2025-12-13T13:47:01.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-12-26T19:16:25.000Z (6 months ago)
- Last Synced: 2025-12-28T09:05:20.957Z (6 months ago)
- Language: TypeScript
- Homepage: https://phosphor.pshycodr.me
- Size: 12.8 MB
- Stars: 49
- Watchers: 1
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Phosphor Cam
Transform your camera feed into real-time ASCII art
[](https://github.com/pshycodr/phosphor-cam/stargazers)
[](https://github.com/pshycodr/phosphor-cam/network/members)
[](https://github.com/pshycodr/phosphor-cam/watchers)
[](https://opensource.org/licenses/MIT)
[](https://www.typescriptlang.org/)
[](https://reactjs.org/)
[](https://vitejs.dev/)
[](https://github.com/pshycodr/phosphor-cam/issues)
[](https://github.com/pshycodr/phosphor-cam/pulls)
[](https://github.com/pshycodr/phosphor-cam/commits/main)
---
## ✨ Features
- **Real-Time Rendering** – Live ASCII conversion with performance optimization (60+ FPS)
- **High-Quality Capture** – Export 4K resolution ASCII art images
- **Customizable Settings**
- 5 character sets (standard, simple, blocks, matrix, edges)
- Adjustable font size/resolution (6-30px)
- Contrast and brightness controls
- Color mode and invert options
- **Camera Controls**
- Front/back camera switching
- High-quality snapshot export
- ASCII text copy to clipboard
- Video recording capability
- **Performance Monitoring** – Real-time FPS and render time display
## 📸 Demo
## 🚀 Quick Start
```bash
# Clone the repository
git clone https://github.com/pshycodr/phosphor-cam.git
cd phosphor-cam
# Install dependencies
npm install
# Start development server
npm run dev
```
Visit `http://localhost:5173` to see the app in action!
## 📖 Usage
1. **Grant Camera Access** – Allow browser to access your camera when prompted
2. **Adjust Settings** – Click the settings icon (⚙️) to customize the ASCII effect
3. **Capture Images** – Press the shutter button for high-quality exports
4. **Switch Cameras** – Use the flip button (🔄) to toggle between front/back cameras
5. **Record Video** (COMMING SOON) – Click the record button (📹) to start/stop video capture
## 🛠️ Tech Stack
- **React 18** – UI framework
- **TypeScript** – Type safety
- **Vite** – Build tool
- **Canvas API** – Real-time rendering
- **MediaStream API** – Camera access
- **Tailwind CSS** – Styling
- **Lucide React** – Icons
## 🌐 Browser Support
Requires a modern browser with support for:
- `getUserMedia` API
- `Canvas 2D` rendering context
- ES6+ JavaScript features
✅ Chrome 90+ | ✅ Firefox 88+ | ✅ Safari 14+ | ✅ Edge 90+
## 📝 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 🤝 Contributing
Contributions are welcome! Please read [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## ⭐ Show Your Support
If you found this project helpful, please consider giving it a star! It helps others discover the project.
[](https://github.com/pshycodr/phosphor-cam)
## 📬 Contact
Have questions or suggestions? Open an issue or reach out!
---
Made with ❤️ using React and Canvas API
[Report Bug](https://github.com/pshycodr/phosphor-cam/issues) · [Request Feature](https://github.com/pshycodr/phosphor-cam/issues)