H5直播系统源码主播观众小助手三端分离直播间弹幕互动...

zhang*** · 前天 20:28

H5直播系统源码主播观众小助手三端分离直播间弹幕互动房管马甲敏感词过滤后台管理支持私有化部署

复制代码

## 项目概述
本项目是一套微信端H5阿里云直播系统，采用三端分离架构（主播端、观众端、小助手端），外加一套独立的管理后台，共四个独立页面入口。系统依托阿里云直播服务实现推拉流，通过WebSocket实现实时评论互动和管控指令同步，支持微信公众号授权登录和普通浏览器昵称登录两种方式。
系统设有四种用户角色：管理员、主播、小助手、观众，权限从高到低依次递减，各角色之间相互隔离。
---
## 一、主播端功能
主播端是直播间的创建者和控制者，在直播间内拥有较高权限级别，通过独立页面访问，使用账号密码登录。
### 1. 账号登录
主播使用管理员预先分配的账号和密码进行登录。系统通过JWT生成鉴权令牌，令牌有效期七天。登录失败会提示账号或密码错误，被禁用的账号无法登录。
### 2. 直播间选择
登录后展示该主播名下的直播间列表，每个直播间显示标题和当前状态（未开播、直播中、已暂停、已结束），主播点击进入对应直播间操作。
### 3. 直播推流控制
- **开始直播**：启动本地摄像头和麦克风，获取实时画面预览，同时调用后端接口将直播间状态标记为"直播中"，后端动态生成带鉴权签名的阿里云推流地址和拉流地址。推流支持两种模式：Mock模式下模拟推流生命周期用于开发调试，Live模式下通过阿里云WebRTC SDK将浏览器摄像头画面实时推送到阿里云。
- **暂停推流**：停止推流并关闭摄像头，直播间状态变更为"已暂停"，观众端同步显示暂停状态。
- **恢复推流**：重新启动摄像头和推流，直播间状态恢复为"直播中"。
- **结束直播**：确认后停止推流、关闭摄像头，直播间状态变更为"已结束"，同时清理本场临时踢出记录，并通过WebSocket通知在线观众直播已结束。
### 4. 设备控制
- 前后摄像头切换：切换后自动重新启动摄像头预览，如正在推流中则同步重新推流。
- 麦克风静音/开启：直接控制音频轨道的启用状态。
### 5. 推流信息展示
可查看并复制当前推流地址和拉流地址，支持将推流地址复制到剪贴板以便填入OBS等第三方推流工具。
### 6. 实时数据看板
顶部实时显示当前在线观众人数和本场直播累计时长（时:分:秒格式），推流状态指示灯根据直播状态（未开播灰色、直播中红色闪烁、已暂停黄色、已结束灰色）实时变化。
### 7. 评论管理
底部弹出面板中包含评论标签页，展示直播间内的评论滚动列表，显示发送者昵称和评论内容，主播可逐条删除违规评论，删除操作通过WebSocket实时同步到各端。主播自身也可以发送文字评论。
### 8. 观众管理
观众标签页展示当前在线观众列表（排除主播自身），每位观众旁提供四个操作按钮：
- **踢出**：临时踢出该观众，本场直播内禁止重新进入，直播结束后自动解除。
- **拉黑**：长期拉黑该用户，绑定用户ID，禁止进入直播间和发言，需确认操作。
- **禁言**：限时禁言该用户（默认10分钟），禁言期间用户无法发送评论。
- **解禁**：解除该用户的禁言状态。
### 9. 小助手授权管理
助手标签页中，主播可通过输入用户ID授权新的小助手，也可以取消已有小助手的权限。小助手列表展示已授权的小助手昵称。
---
## 二、观众端功能
观众端是直播间的观看和互动入口，优先在微信内置浏览器中运行，同时兼容普通浏览器作为备选方案。页面采用竖屏全屏设计，视频画面铺满屏幕。
### 1. 登录体系（环境自适应）
系统自动检测当前运行环境是否为微信：
- **微信环境**：页面展示微信一键授权登录按钮，点击后模拟微信OAuth授权流程，自动获取用户OpenID作为全局身份标识，无需手动注册。
- **非微信环境**：页面展示昵称输入框，用户输入任意昵称即可进入，系统自动生成访客ID。
- 未登录用户无法观看直播和发送评论。
- 被长期拉黑的用户在登录时即被拦截，提示无法进入直播间。
### 2. 直播间选择
登录后可查看直播间列表，展示每个直播间的标题、主播昵称和当前状态。已结束的直播间不可点击进入，用户也可以直接通过URL参数中的直播间ID进入指定直播间。
### 3. 直播观看
- 使用HLS协议拉流播放直播画面，兼容微信内置浏览器和Safari原生支持。
- 视频自动播放，适配手机全屏竖屏显示。
- 顶部浮层显示直播间标题和实时在线人数。
- 主播暂停推流时，画面显示"主播暂时离开"提示。
- 直播结束时，页面自动切换为"直播已结束"提示页面，提供刷新按钮返回列表。
### 4. 实时评论互动
- 评论区以透明气泡形式叠加在视频画面左下方，同时显示四条近期评论，每条评论显示六秒后自动渐隐消失。
- 底部输入栏支持文字输入和发送。
- 内置32个表情符号的面板，点击表情直接插入到输入框中。
- 发送评论受双重频率限制：后端限制每人每秒两条上限，前端限制两秒内不能重复发送相同内容。
### 5. 管控响应
- **被踢出**：页面立即跳转到提示页面，显示"您已被踢出直播间"，提供离开按钮退出并清除登录状态。
- **被拉黑**：页面跳转到提示页面，显示"您已被长期拉黑"。
- **被禁言**：输入栏替换为红色提示文字"您已被禁言，无法发言"，解除禁言后自动恢复输入功能。
- **删评同步**：管理员或小助手删除评论后，观众端评论区实时移除对应评论。
---
## 三、小助手（房管）端功能
小助手端是直播间的运维管控入口，由主播授予权限，使用独立账号密码登录，推荐在电脑端操作。
### 1. 账号登录
小助手使用管理员分配的独立账号密码登录，登录流程与主播端一致。
### 2. 直播间选择
登录后展示直播间列表，小助手可进入非已结束状态的直播间。进入后顶部显示直播间标题、状态标签和实时在线人数。直播结束后，操作面板显示"直播已结束，操作已禁用"的通知，并提供返回列表按钮。
### 3. 评论管控
- 展示直播间内的评论滚动列表。
- 可逐条删除违规评论，删除操作各端实时同步。
- 底部提供评论输入区域，小助手可以以自身身份或马甲身份发送评论。
### 4. 观众管理
展示在线观众列表，每位观众提供五个操作：
- **踢出**：临时踢出，本场直播内禁止重回。
- **拉黑**：长期拉黑，需确认操作。
- **禁10分钟**：限时禁言十分钟。
- **永禁**：长期禁言。
- **解禁**：解除禁言。
### 5. 快捷回复
展示后台预设的快捷回复话术列表，小助手一键点击即可将对应话术发送至公屏评论区。发送时可以叠加马甲身份。
### 6. 马甲切换
展示系统内置的多组虚拟马甲（自定义昵称和头像），小助手可点击切换任意马甲身份在公屏发言，发言时评论区和各端显示的是马甲的昵称和头像，隐藏小助手的真实身份。当前使用的马甲在顶部有专门的标签提示，可随时取消。马甲仅限主播和小助手角色使用，普通观众无法使用。
---
## 四、管理后台功能
管理后台是独立的PC端管理系统，由超级管理员操作，提供系统级的管理能力。采用侧边栏导航布局，包含以下功能模块：
### 1. 仪表盘
展示四项核心统计数据卡片：总用户数、直播间总数、今日评论数、当前活跃管控数。下方展示当前直播中房间的实时列表，包括房间标题、主播昵称、实时在线人数、开播时间和状态。
### 2. 用户管理
- 分页查看用户列表，支持按角色、状态筛选和关键词搜索（搜索昵称、用户名、OpenID）。
- 创建新用户：指定用户名、密码、昵称和角色（主播、小助手、管理员），密码加密存储。
- 编辑用户：修改昵称、密码、启用/禁用状态。
- 查看用户详情：展示用户基本信息、近期50条评论记录和历史管控记录。
- 删除用户：级联清理该用户关联的直播间、评论、黑名单、小助手授权等数据，管理员账号不可删除，不能删除自己。
### 3. 直播间管理
- 分页查看直播间，支持按状态筛选和标题关键词搜索。
- 查看直播间详情：展示直播间基本信息、近期100条评论、黑名单记录和小助手列表。
- 强制关播：管理员可强制结束正在直播的直播间，清理本场临时踢出记录，通知在线观众直播结束。
- 删除直播间：仅限非直播中的房间可删除，级联清理评论、黑名单、小助手、快捷回复等关联数据。
### 4. 评论管理
- 分页查看评论，支持按直播间、用户筛选和内容关键词搜索。
- 删除评论：软删除，评论标记为已删除状态，通过WebSocket实时同步到前端移除。
- 恢复评论：可恢复已删除的评论。
### 5. 黑名单管控
- 分页查看黑名单记录，支持按类型（踢出、拉黑、禁言）、直播间、用户筛选。
- 展示被管控用户信息、操作人信息和管控类型。
- 手动添加管控记录：指定直播间、用户、管控类型和时长。
- 移除管控：删除黑名单记录，禁言类型的管控通过WebSocket实时通知对应房间解除限制。
### 6. 敏感词管理
- 分页查看敏感词列表，支持按分类（辱骂、广告、政治等）和关键词筛选。
- 逐条添加敏感词，指定词语和分类，自动去重。
- 编辑敏感词内容和分类。
- 删除敏感词。
- 批量导入敏感词：支持一次性导入多个敏感词，自动跳过已存在的词。
- 敏感词修改后自动刷新后端内存缓存，确保过滤及时生效。
### 7. 马甲管理
- 查看马甲列表。
- 创建马甲：指定昵称和头像（可选，默认自动生成）。
- 编辑马甲：修改昵称、头像、启用/禁用状态。
- 删除马甲。
### 8. 快捷回复管理
- 按直播间查看快捷回复列表，按排序值排列。
- 创建快捷回复：指定所属直播间、内容和排序值。
- 编辑快捷回复内容、排序和所属直播间。
- 删除快捷回复。
- 支持批量更新排序。
### 9. 系统配置
管理员可在线修改以下运行配置：
- 阿里云模式切换（Mock模式/Live模式）。
- 推流域名、拉流域名、应用名称。
- 评论频率限制（每秒1到10条可调）。
配置修改后即时生效，保存到本地运行时配置文件，同时更新内存中的配置对象。密钥等敏感信息不在界面展示，只能通过环境变量配置。
### 10. 操作日志
分页查看管理员的操作记录，包括操作人、操作类型、操作对象和详细信息。覆盖用户管理、直播间管理、评论管理、黑名单管理、敏感词管理、马甲管理、快捷回复管理、系统配置修改等操作类型。
---
## 五、全局业务规则
### 1. 身份体系
微信用户以OpenID为身份标识，非微信用户以系统生成的访客ID为身份标识。管控操作（踢人、拉黑、禁言）均绑定用户ID，用户更换昵称不影响管控效力。
### 2. 直播间状态联动
直播间有四种状态：未开播、直播中、已暂停、已结束。主播关播后，观众端自动提示直播结束并停止拉流，小助手端操作面板显示禁用通知。
### 3. 消息实时同步
评论发送、评论删除、踢人、拉黑、禁言、解禁、在线人数变化、推流状态变化、直播结束等事件均通过WebSocket实时广播到对应直播间的在线用户，响应速度快。
### 4. 权限隔离
- 观众：仅可观看直播和发送评论，无管控权限。
- 小助手：拥有评论管控（删评）、观众管控（踢人、拉黑、禁言、解禁）、快捷回复和马甲切换能力，不可关闭直播或管理主播权限。
- 主播：在直播间内拥有较高权限级别，包括开播/关播、推流控制、评论管理、观众管控、小助手授权/取消。
- 管理员：拥有系统级管理权限，包括强制关播、删除直播间和用户、管理敏感词和马甲等。
后端对接口进行角色权限校验，前端不可越权操作。
### 5. 断线重连
WebSocket客户端配置了自动重连机制，初始重连间隔一秒，上限间隔五秒，超时二十秒。用户网络中断后切回前台时自动恢复连接并重新加入直播间。
### 6. 评论防刷屏
后端采用内存计数器方式限制每人发言频率，默认每秒两条上限，超出频率自动拦截并提示"发言过于频繁"。前端额外做两秒内相同内容去重。系统每三十秒自动清理过期的频率限制记录以释放内存。
### 7. 敏感词过滤
评论内容在发送时经后端敏感词服务检测，敏感词库缓存在内存中（一分钟有效期），命中敏感词的评论直接拦截，返回"评论包含违规内容"的提示。敏感词支持检测和替换两种模式。
### 8. 过期管控自动清理
系统每六十秒自动扫描黑名单表中的过期记录（限时禁言到期、临时踢出到期），自动删除过期记录并通过WebSocket通知对应房间解除管控。
### 9. 推流地址安全
推流鉴权密钥仅存储在后端，前端只获取带签名的临时URL。推拉流地址采用阿里云auth_key鉴权机制，包含时间戳、随机数和MD5哈希签名，有效期一小时。
### 10. Mock与Live双模式
系统支持两种运行模式：Mock模式下使用模拟数据和Apple公开测试HLS流进行开发调试，无需阿里云真实配置；Live模式下对接阿里云直播服务，进行正式的推流和拉流。模式可通过管理后台在线切换。
---
根据项目的核心功能卖点和用户搜索习惯，推荐以下SEO标题：
---
**推荐标题：**
微信H5直播系统源码主播观众小助手三端分离直播间弹幕互动房管马甲敏感词过滤后台管理支持私有化部署
---
**关键词覆盖分析：**
| 标题片段 | 对应搜索词 |
|---------|-----------|
| 微信H5直播系统源码 | 微信直播源码、H5直播源码、直播系统源码 |
| 主播观众小助手三端分离 | 多角色直播系统、三端直播 |
| 直播间弹幕互动 | 直播弹幕系统、直播互动源码 |
| 房管马甲 | 直播房管系统、直播马甲功能 |
| 敏感词过滤 | 直播敏感词、评论过滤系统 |
| 后台管理 | 直播后台管理、直播管理系统 |
| 支持私有化部署 | 直播系统部署、私有化直播 |
**备选标题（不同侧重方向）：**
侧重商业场景：
微信H5直播系统源码三角色权限隔离弹幕互动与房管管控马甲快捷回复配套管理后台开箱即用
侧重功能完整度：
H5直播源码主播推流观众观看小助手房管四合一弹幕表情互动禁言拉黑踢人敏感词过滤含管理后台
侧重技术卖点：
微信端直播系统源码阿里云推拉流对接 WebSocket实时同步三端独立页面后台数据看板支持Mock调试

复制代码

zzzzz*** · 前天 20:28

你好棒！！

jerryz*** · 昨天 09:03

你历害！！

haiyunt*** · 昨天 09:31

沙发！！

hhh*** · 昨天 10:09

已加客服

DZ*** · 昨天 11:18

不错！！

asdfghj*** · 昨天 12:10

非常好！！

tj4*** · 1 小时前

支持！！！

		自动登录	找回密码
密码			立即注册

H5直播系统源码 主播观众小助手三端分离 直播间弹幕互动...

H5直播系统源码 主播观众小助手三端分离 直播间弹幕互动...

H5直播系统源码主播观众小助手三端分离直播间弹幕互动...

H5直播系统源码主播观众小助手三端分离直播间弹幕互动...