← 返回项目展示
🎁 直播工具 · Electron 桌面应用

抖音直播间
在线观众抽奖工具

基于网页版直播间 DOM 解析的可见观众采集与随机抽奖工具。纯前端解析,不涉及任何接口抓包或协议逆向。控制台私有采集、绿幕展示窗供 OBS 抠像投屏,开抽即冻结名单保证公平。

Electron + Chromium · 纯 DOM 解析 · 不抓包 / 不逆向
01 / Overview

项目概述

一个程序,两个窗口:私有的采集控制台 + 给粉丝看的绿幕抽奖大屏。

本工具在抖音网页版直播间页面上,通过解析 DOM 采集"可见在线观众"(头像 + 昵称),再从中随机抽奖。核心实现为 Electron 桌面应用(另附轻量油猴脚本版本)。整个过程是纯前端 DOM 解析——不调用任何私有接口、不抓包、不逆向协议

  • 控制台窗口(私有):内嵌直播间页面采集观众 + 全部设置 + 候选名单 + 抽奖控制
  • 展示窗口(公开):纯绿幕 + 中奖头像 + 昵称,供 OBS / 直播伴侣窗口捕获 + 色度键抠像
现实限制(设计如实告知):抖音网页版 DOM 只渲染前排可见观众(头像墙 + 弹幕发言者 + 进场提示),不提供"全部在线观众名单"。因此抽奖池是"近期露过脸的可见观众"的累积,会随挂机时长增长,但不等于全员。选"前 1000"时实际候选大概率到不了 1000,N 只是上限。
02 / Architecture

整体架构

主进程编排双窗口,控制台内嵌 webview 采集,展示窗独立成项供捕获。
主进程 main.js
控制台窗口 私有 · setContentProtection 防录屏 <webview> 内嵌抖音直播间 · 注入 capture.js 采集 DOM 展示窗口 绿幕 · backgroundThrottling off IPC 桥接 contextIsolation 安全隔离
采集 → 去重合并进 pool → 前 N开抽冻结 → 摇奖 → 推送展示窗
01

采集编排

定时向内嵌直播间注入 capture.js,采到的观众合并去重进 pool,保留排名顺序。

02

抽奖控制

选前 N → 开抽瞬间冻结名单 → 头像昵称滚动 → 停止定格中奖人。

03

投屏展示

绿幕窗口同步滚动与结果,OBS 色度键抠像后叠加到直播画面。

03 / Capture Engine

采集引擎核心技术

抖音前端 class 名频繁变动、列表虚拟滚动、观众靠悬停才展开——这些都被逐一攻克。

🎯 头像 CDN 特征识别(抗改版)

不死磕易变的 CSS class 名,而是按头像 CDN 域名特征(douyinpic / pstatp / bytecdn 等)+ 方形小图判定来识别观众头像。即使抖音改版换 class,采集依然有效。同时配有基于实测结构的精确选择器(行 / 昵称 / 头像 / 排名)作为首选,特征扫描作兜底。

🖱️ 合成鼠标事件 · 静默展开头像墙

抖音的完整观众列表需"悬停才显示"。工具通过派发合成的 pointerover / mouseover / mousemove 事件触发展开弹层——不动用你的真实鼠标,采集在后台静默进行。

📜 虚拟滚动列表边滚边采

在线观众列表是虚拟滚动(DOM 节点滚动时复用)。工具自动定位可滚动容器,派发 WheelEvent + scroll 边滚边采集。由于头像 img.src 在虚拟列表里可能滞后 / 重复,用排名序号(rank)作为唯一去重键,避免把不同人误塌缩成一个。

💬 弹幕 MutationObserver 实时兜底

弹幕在 DOM 里存活极短、滚动飞快,定时轮询会漏。工具用 MutationObserver 监听公屏容器的节点插入,消息一进来就抓,把发言观众也累积进抽奖池,几乎不漏。支持关键词过滤(只采发言含指定词的粉丝)。

🎯 精准锁定"在线观众面板"

以"高等级用户 / 贡献用户 / 全部"等面板独有标签为锚点,向上定位到同时包含多张头像的祖先容器,把采集范围严格锁定在观众面板内,避开主播信息区、连麦、榜单等区域的头像误采。

04 / Lottery

抽奖与公平性

开抽即定,杜绝"边抽边进人"的不公平。

🔒 开抽冻结名单

点击"开始摇奖"的瞬间,立刻冻结当前候选名单并停止刷新采集,之后进来的观众不再进入本轮抽奖池——保证每一轮抽奖对所有候选人公平。停止后定格中奖人,结果同步推送到展示窗。

🎚️ 前 N 范围 / 候选池

抽奖范围可选预设 前 10/20/50/100/200/500/1000、"全部"或自定义任意数字。候选显示为"实际人数 / 池子总数",按观众列表真实排名取前 N(弹幕额外采到的排在列表之后)。

05 / Display & Capture

投屏展示与防捕获

控制内容不外泄,展示画面稳定可抠像。

🟢 绿幕展示窗 + 色度键

独立绿幕窗口(默认 #00B140,可改),全屏显示中奖头像 + 昵称。OBS / 直播伴侣按窗口捕获后设色度键过滤绿色即可抠像叠加。展示窗开启 backgroundThrottling: false,失焦 / 被遮挡时仍持续渲染,被捕获时不掉帧。

🛡️ 控制台内容保护

控制台窗口默认开启 setContentProtection,正常情况下不会被 OBS / 录屏捕获,避免把候选名单、内定等控制内容暴露给粉丝。同时全局 disableHardwareAcceleration,规避硬件合成画面被捕获成黑屏的兼容问题。

工程细节:双窗口经 contextIsolation + preload 安全桥通信;头像用 HttpClient 异步加载并设超时;窗口关闭时自动释放 webview、后台线程与子窗口,无资源泄漏。
06 / Stack

技术栈

  • 桌面框架:Electron(内置 Chromium)+ Node.js,electron-builder 打包为 Windows 绿色版 exe
  • 采集:webview 内嵌 + 注入 JS(DOM 解析 / 合成事件 / MutationObserver)
  • 安全隔离:contextIsolation + preload IPC 桥,渲染层零 Node 权限
  • 另附实现:轻量油猴脚本版(Tampermonkey,浏览器内即用)
GeekAudio Lab · 抖音直播间在线观众抽奖工具技术白皮书 · 纯前端 DOM 解析,合规使用