Skip to content

Repository files navigation

🎤 danmu-presenter · 演讲弹幕互动工具

PPT 演讲时,让观众扫码发弹幕,实时飞过你的屏幕。

一层 透明 · 置顶 · 点击穿透 的桌面弹幕层,盖在 PPT 最前面却完全不挡你操作。

license platform electron backend PRs


✨ 这是什么

双击启动,屏幕最前面出现一层看不见的弹幕层。观众用手机扫码、填昵称、输 4 位房间码,就能把弹幕实时打到你的大屏上 —— 而你照常翻页、点击 PPT,弹幕层「点击穿透」毫无影响。

 演讲者双击启动  ──►  屏幕出现透明弹幕层(盖住 PPT,可穿透点击)
                        │
 观众扫码 ─► 填昵称 ─► 输房间码 ─► 发弹幕  ──►  实时飞过大屏 🎉

适合:课堂、分享会、发布会、年会、Live 演示 —— 任何想让台下「开口」的场合。

🌟 功能

🪟 透明穿透弹幕层 置顶盖住全屏 PPT/Keynote,却不挡你的鼠标键盘操作
📱 扫码即发 观众手机扫码 → 填昵称 → 输房间码,零安装;房间码隔离现场
🎚️ 双展示模式 「飘屏」横向飞过 / 「侧边栏」列表停留,一键切换
🎨 4 套皮肤 炫彩紫 / 学术 / 打字机 / 游戏机,弹幕层、控制台、扫码页同步换肤
⏱️ 秒表计时器 表盘式计时器,点表盘启停,大屏角落显示,全局快捷键控制
🎉 互动特效 撒花彩带 + 抖音直播式上升小心心(手机点赞触发)
🫧 桌面悬浮球 控制台可收起成吸附屏幕边缘的小球,hover 出快捷功能、双击弹回
👥 听众名单 + 禁言 点在线数看谁加入了,可一键禁止某人发言
🛡️ 敏感词打码 服务端自动给敏感词打码后再广播
☁️ 双后端可切换 Cloudflare Worker(免维护零月费)或自建 VPS(绑自有域名任意网络可达),改一行配置切换
💻 跨平台安装包 一条命令打出 macOS .dmg 与 Windows .exe

📸 截图

截图待补 —— 欢迎把 控制台 / 弹幕飞屏 / 手机发送端 的截图放进 docs/ 并在此引用。

🚀 快速开始(本地,先跑通)

git clone https://github.com/lisamsung/danmu-presenter.git
cd danmu-presenter
cp config.example.json config.json   # 本地模式:serverUrl 保持空即可
npm install
npm start                            # 启动 Electron:自动拉起本地后端 + 弹幕层 + 控制台
  • 控制台会显示二维码与 4 位房间码。手机需与电脑同一局域网,扫码后输房间码即可发弹幕。
  • 只想单独验证后端 / 浏览器里测:npm run server,再访问终端打印的发送端地址。

☁️ 上云(让观众用任意网络发弹幕)

桌面端通过 config.json 的 serverUrl 决定连哪个后端,切换只改一行:

方案 A:Cloudflare Worker(免维护、零月费、自带 HTTPS/WSS)
cd worker && npm install
npx wrangler secret put ADMIN_TOKEN   # 设管理员口令
npx wrangler deploy                   # 部署,得到 https://<name>.<account>.workers.dev

把 config.json 的 serverUrl 改成该地址即可。

注意:*.workers.dev 域名在中国大陆可能被 DNS 污染,面向大陆观众建议用方案 B、或给 Worker 绑自定义域名。

方案 B:自建 VPS 上的 Node 后端(绑自有域名,任意网络可达)
# VPS 上:
rsync -az --exclude node_modules server/ <your-vps>:/opt/danmu-presenter/
ssh <your-vps> 'cd /opt/danmu-presenter && npm install --omit=dev'
# 用 systemd 跑 `node index.js`(环境变量 PORT/DANMU_HOST/PUBLIC_BASE_URL/ADMIN_TOKEN),
# 前面用 nginx 反代 + Let's Encrypt 证书(记得开 WebSocket 升级)。

把 config.json 的 serverUrl 改成 https://your-domain.example 即可。

🏗️ 架构一图流

┌────────────────────────── 桌面端 (Electron) ──────────────────────────┐
│  overlay 透明弹幕层  │  control 控制台  │  scan 扫码大图  │  ball 悬浮球  │
└──────────────┬──────────────────┬─────────────────────────────────────┘
               │ contextBridge IPC │
        config.json serverUrl ?  ──┴── 空 = 本地内嵌 Node / 非空 = 连云端
               │
   WebSocket (/ws,协议两套后端完全一致)
               │
   ┌───────────┴─────────────┐
   │  server/ (Node + Express) │  或  worker/ (Cloudflare Worker + Durable Object)
   └───────────┬─────────────┘
               │ 静态服务
        server/public/send.html  ◄── 观众手机扫码打开

一条核心设计线:serverUrl 一个字段决定本地/云端,两套后端共用同一套 WebSocket 协议 —— 换后端对桌面端只是改一行。

🛠️ 技术栈

  • 桌面端:Electron(透明置顶穿透窗 + 多窗口 IPC + 多显示器跟随)
  • 后端:Node(ws + Express)/ Cloudflare Workers + Durable Objects(WebSocket Hibernation)
  • 前端:原生 HTML/CSS/JS(无框架)、WAAPI 动画、canvas-confetti、客户端生成二维码
  • 打包:electron-builder(dmg / nsis)

🔒 安全说明(按场景分层,诚实地讲)

已做:管理员口令保护「重开一场 / 禁言」、WS 消息大小上限、按连接限流、只收文本帧、断线重连指数退避、心跳回收半开连接。

有意未做(小范围私用 + 房间码 + 管理员口令下可接受):没有账号登录系统,所以「按浏览器禁言」可被清缓存/换设备绕过;房间码会出现在 /api/info。扩大到公开/大规模使用前请自行加固。

密钥不入库:真实口令放未提交的 config.json / worker/.dev.vars / wrangler secret,仓库里只有 config.example.json 模板。

📦 打包安装包

npm run dist:mac    # → release/*.dmg  (Apple Silicon)
npm run dist:win    # → release/*.exe  (Windows x64)

📄 License

MIT —— 随便用,保留版权声明即可。

Made with ❤️ by 山星 · Shanxing

About

No description, website, or topics provided.

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages