@GoJun315: 今天 Reddit 上有位开发者分享,在网页里播放的视频,可以纯用文本字符渲染。 用到的开源项目是 ASCILINE,一个实时 ASCII 视频渲染引擎。 支持两种渲染模式: - ASCII 模式:用普通字符按亮度和颜色还原画面,能看到字…
摘要
ASCILINE 是一个高性能的开源实时 ASCII 视频渲染引擎,可以将视频转换为纯文本字符显示,支持多种渲染模式、低带宽传输和 CSS 特效叠加。
查看缓存全文
缓存时间: 2026/06/12 17:01
今天 Reddit 上有位开发者分享,在网页里播放的视频,可以纯用文本字符渲染。
用到的开源项目是 ASCILINE,一个实时 ASCII 视频渲染引擎。
支持两种渲染模式:
- ASCII 模式:用普通字符按亮度和颜色还原画面,能看到字符在流动
- Pixel 模式:用彩色方块字符拼贴,能稳定跑到 360p 30 FPS
- 音频作为主时钟,音视频同步靠音轨做基准
- 每帧只有几 KB,弱网环境也能跑
- 支持 CSS 文字效果,发光、阴影、动画都能实时叠加上去
GitHub:https://github.com/YusufB5/ASCILINE…
目前用 Python 已经把性能榨到极限,作者还打算用 Rust 重写核心引擎。
适合用在创意编码、网页艺术、复古黑客风界面,或者视频编解码等场景。
YusufB5/ASCILINE
Source: https://github.com/YusufB5/ASCILINE
🌌 ASCILINE Engine
ASCILINE is a high-performance, cross-platform real-time ASCII video rendering engine. Our core objective is to transform the web into a highly dynamic and interactive typographic canvas. By mapping pixels to text-based representations, we unlock new possibilities for web media delivery.
| Output | Details |
|---|---|
| Original Source Standard MP4 video file. | |
| ASCII Mode Showcases rendered using Mode 3 (32K Colors) from a 30fps source. | |
| PIXEL Mode Showcases rendered using Mode 5 (16m Colors) combined with the --pixel flag for ultra-high fidelity. |
🎯 Strategic Vision & Core Capabilities
- Pure Typographic Manipulation: The visual stream is not a standard media file—it’s raw HTML/Canvas text. This makes the impossible possible: you can apply real-time CSS filters (neon glows, text shadows, animations) to video content.
- Local AI & LLM Ready: By reducing complex pixel streams into structured logical strings, ASCILINE acts as a perfect bridge for AI. Instead of feeding heavy computer vision models, lightweight LLMs can process semantic video summaries.
- Ultra-Low Bandwidth & IoT Compatibility (valid for ASCII MOD): Standard codecs (H.264/VP9) choke microcontrollers and weak networks. ASCILINE processes the heavy lifting once on the backend, streaming only a few kilobytes per frame.
- Bypassing Browser Constraints: Modern browsers aggressively throttle autoplay videos, and ad-blockers restrict traditional media frames. To the browser, ASCILINE is simply “JavaScript updating a canvas”—completely invisible to media restrictions.
🚀 Technical Features
- Cross-Platform: Runs seamlessly on Windows, macOS, and Linux.
- Real-Time ASCII Streaming: Low-latency video-to-ASCII conversion.
- Real-Time Pixel Streaming: Replaces characters with colored blocks, approaching 360p video quality.
- High Performance: Uses HTML5 Canvas for rendering, optimized for cinematic 24-30 FPS playback. High-FPS sources are automatically decimated for stability.
- Master Clock Sync: The audio track acts as the absolute master clock, guaranteeing perfect A/V synchronization.
- Zero-Copy Binary Protocol: Frames are streamed as raw binary (
Uint8Array) directly to the canvas, saving bandwidth and CPU. - Multiple Color Modes: Supports everything from classic B&W to 16M color ultra-fidelity.
- Flexible Video Management: Supports JSON playlists (per-video mode & volume), folder-based auto-queuing (filesystem order), single-file mode, and infinite loop playback — all controlled via CLI arguments.
🛠️ Architecture
- Backend (Python/FastAPI): Decodes video using OpenCV, maps pixels to ASCII characters via NumPy, and streams binary data.
- Frontend (Vanilla JS): Receives binary frames via WebSockets, manages a jitter buffer, and renders to a Canvas grid.
- Communication: Optimized WebSocket protocol with a custom
INIThandshake for dynamic resolution/FPS adjustment.
📦 Installation
1. Clone the repository
git clone https://github.com/YusufB5/ASCILINE.git
cd ASCILINE
2. Install dependencies
pip install fastapi uvicorn opencv-python numpy websockets
🔈 Audio Support (FFmpeg Required)
To enable server-side audio processing (Volume 1-5), you must have FFmpeg installed.
Option 1: Package Manager (Recommended)
- Windows:
winget install ffmpeg - macOS:
brew install ffmpeg - Linux:
sudo apt install ffmpeg
Option 2: Manual Installation (Windows)
If you get a FileNotFoundError or don’t want to modify system variables:
- Download FFmpeg ZIP.
- Extract
ffmpeg.exefrom thebinfolder. - Drop it directly into your
ASCILINEproject folder alongsidestream_server.py.
3. Run the Web Server
Single video:
python stream_server.py video.mp4 --cols 240
Folder mode — drop your videos into videos/ and run:
python stream_server.py --folder videos --cols 200
python stream_server.py --folder videos --cols 230 --loop # infinite loop
python stream_server.py --folder videos --mode 5 --pixel --cols 320 --vol 2 # all videos same settings
Videos play in filesystem order (top to bottom as they appear in the folder, not alphabetically). Just add/remove files from the videos/ folder to control the queue.
JSON Playlist — full control per video:
python stream_server.py --playlist playlist.json --cols 220
python stream_server.py --playlist playlist.json --cols 220 --loop
Use playlist.json when you need different --mode or --vol settings for each video.
💡 Windows Users: You can use the included
serve.batshortcut for quicker typing:.\serve video.mp4 --cols 240
Open http://localhost:8000 in your browser.
4. Run directly in Terminal (Standalone)
If you prefer to bypass the web interface, you can render the video directly inside an ANSI-supported terminal (zero-flicker, true color):
python ascii_video_player2.py video.mp4 --cols 100 --quality 0
💡 Windows Users: Use the shortcut
.\play video.mp4 -c 100 -q 0⚠️ Note: Do not resize your terminal window during playback, as dynamic text wrapping will corrupt the ASCII layout.
🎨 Customization
You can easily customize the look and feel of the engine:
Styling
Edit style.css to change the accent colors and typography using CSS variables:
:root {
--accent-color: #00ff41; /* Classic Matrix Green */
--bg-color: #050505;
}
Rendering Modes
The engine supports different fidelity levels via the --mode flag:
1: Black & White (DOM mode)2: 512 Colors3: 32K Colors4: 262K Colors5: 16M Colors (Ultra)
python stream_server.py --mode 5 --cols 240 --rows 100
📐 Resolution & Auto-Scaling
By default, you only need to specify the width (--cols). ASCILINE will automatically calculate the correct --rows based on the source video’s aspect ratio to prevent stretching.
- ASCII Mode Recommended:
--cols 200to--cols 240(Best balance of text detail and cinematic 30 FPS performance). - Pixel Mode Recommended:
--cols 600to--cols 900(Provides near-HD visual quality. Performance heavily depends on your machine’s CPU/VRAM). -
Smart Defaults: If you do not specify a
--colsvalue, ASCILINE automatically defaults to450when Pixel Mode is enabled, and200for standard ASCII text mode. -
⚠️ Hardware Limits & A/V Sync: If you push the
--colstoo high for your specific hardware (e.g.,1350on a laptop vs a gaming desktop), the Python backend won’t be able to encode and send the massive frames fast enough. When the video stream lags behind the audio, you will experience A/V desync (audio finishing early). If this happens, simply lower your--colsvalue!
python stream_server.py video.mp4 --mode 5 --cols 240
# Terminal will show: [AUTO] 1920x1080 → grid 240x67
Server-Side Volume Control
Volume is controlled at the server level via the --vol flag (scale 0–5).
When set to 0, the audio engine (FFmpeg) never runs, saving CPU and bandwidth.
--vol | FFmpeg Multiplier | Description |
|---|---|---|
0 | — | Muted (no processing) |
1 | 1.0× | Normal (default) |
3 | 1.5× | Loud |
5 | 2.0× | Double volume |
python stream_server.py video.mp4 --pixel --cols 560 --vol 0 # Silent
python stream_server.py video.mp4 --cols 220 --vol 3 # Loud
Playlist Format (playlist.json)
Each entry can override the global --mode, --pixel, --vol, and --cols defaults:
[
{ "video": "intro.mp4", "mode": 1, "vol": 1 },
{ "video": "main.mp4", "mode": 5, "pixel": true, "vol": 3, "cols": 520 },
{ "video": "outro.mp4", "mode": 3, "vol": 2, "cols": 240 }
]
Video paths are resolved automatically — the engine checks the project root and the videos/ subfolder, so you can write just the filename.
📜 License & Ethical Guardrails
MIT License (with Anti-Ad Restriction)
ASCILINE is distributed under the MIT License, but with a strict ethical guardrail. Because this engine bypasses standard browser constraints and ad-blockers (by rendering pure text instead of video), we strictly prohibit its use by ad-networks to serve unblockable advertisements.
See the LICENSE file for the full text, which includes the ANTI-ADVERTISEMENT RESTRICTION clause.
相似文章
Asciline – 实时ASCII视频渲染引擎
Asciline是一款实时ASCII视频渲染引擎,能够将视频帧即时转换为ASCII艺术。
@VincentLogic: 这才是真正的 Harness Engineering 实战吧! 把“文章转视频”的全流程拆解得明明白白:文章 -> 口播稿 -> 网页开发 -> 录音 -> 录屏。 不用卷 Sora 了,用代码写网页做视频可控性高多了,而且完全开源。 感…
本文介绍了一套完整的开源文本转视频工作流,涵盖文稿生成、前端开发、配音与录屏环节,强调通过代码实现更高的可控性与内容创作效率。
@VincentLogic: 以前做前端,为了个加载动画,要么到处找 GIF,要么自己写 CSS 写到头秃。 最近看到这个 math-curve-loaders 开源库,完全是用数学公式生成的动效。 我看了一下,玫瑰曲线、李萨如曲线这些数学图形,动效极其优雅。纯 HT…
介绍了一个名为 math-curve-loaders 的开源前端库,利用数学公式(如玫瑰曲线、李萨如曲线)生成优雅的加载动画,纯 HTML+CSS 实现,零依赖,并带有可视化调试面板,可以实时调整参数并一键复制代码。
@berryxia: 卧槽!老黄牛逼啊! 这下直接收藏当可以直接拿html轻松制作视频了,今天正好也在拿hyperframe和remotion捣鼓视频。 这下可以直接拿来用了,直接送枕头了啊! 地址 https://github.com/nexu-io/ope…
Open Design 是一个开源的 Claude Design 替代品,支持通过 HTML 生成视频、原型和仪表盘,集成多种 AI 代理,实现本地优先的设计工作流。
@LTChives: 网络爬虫已死。 视频里这个 PixelRAG,完全跳过 HTML 解析。 它把网页直接截图,然后让视觉模型从像素里读答案。 以前 AI 读网页,是先拆代码、提文字、切段落。 现在它直接看页面。 100% 开源,还带 Claude Code…
PixelRAG 是一种新型开源工具,它绕过传统 HTML 解析,直接通过对网页截图并使用视觉模型从像素中提取答案,并支持 Claude Code 插件,让 Claude 具备视觉能力。