云起云市场_国内正版独立SaaS抖音QQ微信百度支付宝小程序软件应用交易服务市场商店平台

 找回密码
 立即注册
查看: 6K|回复: 7

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

[复制链接]

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

[复制链接]
平面插画风格微信H5直播广告图生成.jpg
  1. H5直播系统源码 主播观众小助手三端分离 直播间弹幕互动房管马甲敏感词过滤后台管理 支持私有化部署
复制代码



  1. ## 项目概述

  2. 本项目是一套微信端H5阿里云直播系统,采用三端分离架构(主播端、观众端、小助手端),外加一套独立的管理后台,共四个独立页面入口。系统依托阿里云直播服务实现推拉流,通过WebSocket实现实时评论互动和管控指令同步,支持微信公众号授权登录和普通浏览器昵称登录两种方式。

  3. 系统设有四种用户角色:管理员、主播、小助手、观众,权限从高到低依次递减,各角色之间相互隔离。

  4. ---

  5. ## 一、主播端功能

  6. 主播端是直播间的创建者和控制者,在直播间内拥有较高权限级别,通过独立页面访问,使用账号密码登录。

  7. ### 1. 账号登录
  8. 主播使用管理员预先分配的账号和密码进行登录。系统通过JWT生成鉴权令牌,令牌有效期七天。登录失败会提示账号或密码错误,被禁用的账号无法登录。

  9. ### 2. 直播间选择
  10. 登录后展示该主播名下的直播间列表,每个直播间显示标题和当前状态(未开播、直播中、已暂停、已结束),主播点击进入对应直播间操作。

  11. ### 3. 直播推流控制
  12. - **开始直播**:启动本地摄像头和麦克风,获取实时画面预览,同时调用后端接口将直播间状态标记为"直播中",后端动态生成带鉴权签名的阿里云推流地址和拉流地址。推流支持两种模式:Mock模式下模拟推流生命周期用于开发调试,Live模式下通过阿里云WebRTC SDK将浏览器摄像头画面实时推送到阿里云。
  13. - **暂停推流**:停止推流并关闭摄像头,直播间状态变更为"已暂停",观众端同步显示暂停状态。
  14. - **恢复推流**:重新启动摄像头和推流,直播间状态恢复为"直播中"。
  15. - **结束直播**:确认后停止推流、关闭摄像头,直播间状态变更为"已结束",同时清理本场临时踢出记录,并通过WebSocket通知在线观众直播已结束。

  16. ### 4. 设备控制
  17. - 前后摄像头切换:切换后自动重新启动摄像头预览,如正在推流中则同步重新推流。
  18. - 麦克风静音/开启:直接控制音频轨道的启用状态。

  19. ### 5. 推流信息展示
  20. 可查看并复制当前推流地址和拉流地址,支持将推流地址复制到剪贴板以便填入OBS等第三方推流工具。

  21. ### 6. 实时数据看板
  22. 顶部实时显示当前在线观众人数和本场直播累计时长(时:分:秒格式),推流状态指示灯根据直播状态(未开播灰色、直播中红色闪烁、已暂停黄色、已结束灰色)实时变化。

  23. ### 7. 评论管理
  24. 底部弹出面板中包含评论标签页,展示直播间内的评论滚动列表,显示发送者昵称和评论内容,主播可逐条删除违规评论,删除操作通过WebSocket实时同步到各端。主播自身也可以发送文字评论。

  25. ### 8. 观众管理
  26. 观众标签页展示当前在线观众列表(排除主播自身),每位观众旁提供四个操作按钮:
  27. - **踢出**:临时踢出该观众,本场直播内禁止重新进入,直播结束后自动解除。
  28. - **拉黑**:长期拉黑该用户,绑定用户ID,禁止进入直播间和发言,需确认操作。
  29. - **禁言**:限时禁言该用户(默认10分钟),禁言期间用户无法发送评论。
  30. - **解禁**:解除该用户的禁言状态。

  31. ### 9. 小助手授权管理
  32. 助手标签页中,主播可通过输入用户ID授权新的小助手,也可以取消已有小助手的权限。小助手列表展示已授权的小助手昵称。

  33. ---

  34. ## 二、观众端功能

  35. 观众端是直播间的观看和互动入口,优先在微信内置浏览器中运行,同时兼容普通浏览器作为备选方案。页面采用竖屏全屏设计,视频画面铺满屏幕。

  36. ### 1. 登录体系(环境自适应)
  37. 系统自动检测当前运行环境是否为微信:
  38. - **微信环境**:页面展示微信一键授权登录按钮,点击后模拟微信OAuth授权流程,自动获取用户OpenID作为全局身份标识,无需手动注册。
  39. - **非微信环境**:页面展示昵称输入框,用户输入任意昵称即可进入,系统自动生成访客ID。
  40. - 未登录用户无法观看直播和发送评论。
  41. - 被长期拉黑的用户在登录时即被拦截,提示无法进入直播间。

  42. ### 2. 直播间选择
  43. 登录后可查看直播间列表,展示每个直播间的标题、主播昵称和当前状态。已结束的直播间不可点击进入,用户也可以直接通过URL参数中的直播间ID进入指定直播间。

  44. ### 3. 直播观看
  45. - 使用HLS协议拉流播放直播画面,兼容微信内置浏览器和Safari原生支持。
  46. - 视频自动播放,适配手机全屏竖屏显示。
  47. - 顶部浮层显示直播间标题和实时在线人数。
  48. - 主播暂停推流时,画面显示"主播暂时离开"提示。
  49. - 直播结束时,页面自动切换为"直播已结束"提示页面,提供刷新按钮返回列表。

  50. ### 4. 实时评论互动
  51. - 评论区以透明气泡形式叠加在视频画面左下方,同时显示四条近期评论,每条评论显示六秒后自动渐隐消失。
  52. - 底部输入栏支持文字输入和发送。
  53. - 内置32个表情符号的面板,点击表情直接插入到输入框中。
  54. - 发送评论受双重频率限制:后端限制每人每秒两条上限,前端限制两秒内不能重复发送相同内容。

  55. ### 5. 管控响应
  56. - **被踢出**:页面立即跳转到提示页面,显示"您已被踢出直播间",提供离开按钮退出并清除登录状态。
  57. - **被拉黑**:页面跳转到提示页面,显示"您已被长期拉黑"。
  58. - **被禁言**:输入栏替换为红色提示文字"您已被禁言,无法发言",解除禁言后自动恢复输入功能。
  59. - **删评同步**:管理员或小助手删除评论后,观众端评论区实时移除对应评论。

  60. ---

  61. ## 三、小助手(房管)端功能

  62. 小助手端是直播间的运维管控入口,由主播授予权限,使用独立账号密码登录,推荐在电脑端操作。

  63. ### 1. 账号登录
  64. 小助手使用管理员分配的独立账号密码登录,登录流程与主播端一致。

  65. ### 2. 直播间选择
  66. 登录后展示直播间列表,小助手可进入非已结束状态的直播间。进入后顶部显示直播间标题、状态标签和实时在线人数。直播结束后,操作面板显示"直播已结束,操作已禁用"的通知,并提供返回列表按钮。

  67. ### 3. 评论管控
  68. - 展示直播间内的评论滚动列表。
  69. - 可逐条删除违规评论,删除操作各端实时同步。
  70. - 底部提供评论输入区域,小助手可以以自身身份或马甲身份发送评论。

  71. ### 4. 观众管理
  72. 展示在线观众列表,每位观众提供五个操作:
  73. - **踢出**:临时踢出,本场直播内禁止重回。
  74. - **拉黑**:长期拉黑,需确认操作。
  75. - **禁10分钟**:限时禁言十分钟。
  76. - **永禁**:长期禁言。
  77. - **解禁**:解除禁言。

  78. ### 5. 快捷回复
  79. 展示后台预设的快捷回复话术列表,小助手一键点击即可将对应话术发送至公屏评论区。发送时可以叠加马甲身份。

  80. ### 6. 马甲切换
  81. 展示系统内置的多组虚拟马甲(自定义昵称和头像),小助手可点击切换任意马甲身份在公屏发言,发言时评论区和各端显示的是马甲的昵称和头像,隐藏小助手的真实身份。当前使用的马甲在顶部有专门的标签提示,可随时取消。马甲仅限主播和小助手角色使用,普通观众无法使用。

  82. ---

  83. ## 四、管理后台功能

  84. 管理后台是独立的PC端管理系统,由超级管理员操作,提供系统级的管理能力。采用侧边栏导航布局,包含以下功能模块:

  85. ### 1. 仪表盘
  86. 展示四项核心统计数据卡片:总用户数、直播间总数、今日评论数、当前活跃管控数。下方展示当前直播中房间的实时列表,包括房间标题、主播昵称、实时在线人数、开播时间和状态。

  87. ### 2. 用户管理
  88. - 分页查看用户列表,支持按角色、状态筛选和关键词搜索(搜索昵称、用户名、OpenID)。
  89. - 创建新用户:指定用户名、密码、昵称和角色(主播、小助手、管理员),密码加密存储。
  90. - 编辑用户:修改昵称、密码、启用/禁用状态。
  91. - 查看用户详情:展示用户基本信息、近期50条评论记录和历史管控记录。
  92. - 删除用户:级联清理该用户关联的直播间、评论、黑名单、小助手授权等数据,管理员账号不可删除,不能删除自己。

  93. ### 3. 直播间管理
  94. - 分页查看直播间,支持按状态筛选和标题关键词搜索。
  95. - 查看直播间详情:展示直播间基本信息、近期100条评论、黑名单记录和小助手列表。
  96. - 强制关播:管理员可强制结束正在直播的直播间,清理本场临时踢出记录,通知在线观众直播结束。
  97. - 删除直播间:仅限非直播中的房间可删除,级联清理评论、黑名单、小助手、快捷回复等关联数据。

  98. ### 4. 评论管理
  99. - 分页查看评论,支持按直播间、用户筛选和内容关键词搜索。
  100. - 删除评论:软删除,评论标记为已删除状态,通过WebSocket实时同步到前端移除。
  101. - 恢复评论:可恢复已删除的评论。

  102. ### 5. 黑名单管控
  103. - 分页查看黑名单记录,支持按类型(踢出、拉黑、禁言)、直播间、用户筛选。
  104. - 展示被管控用户信息、操作人信息和管控类型。
  105. - 手动添加管控记录:指定直播间、用户、管控类型和时长。
  106. - 移除管控:删除黑名单记录,禁言类型的管控通过WebSocket实时通知对应房间解除限制。

  107. ### 6. 敏感词管理
  108. - 分页查看敏感词列表,支持按分类(辱骂、广告、政治等)和关键词筛选。
  109. - 逐条添加敏感词,指定词语和分类,自动去重。
  110. - 编辑敏感词内容和分类。
  111. - 删除敏感词。
  112. - 批量导入敏感词:支持一次性导入多个敏感词,自动跳过已存在的词。
  113. - 敏感词修改后自动刷新后端内存缓存,确保过滤及时生效。

  114. ### 7. 马甲管理
  115. - 查看马甲列表。
  116. - 创建马甲:指定昵称和头像(可选,默认自动生成)。
  117. - 编辑马甲:修改昵称、头像、启用/禁用状态。
  118. - 删除马甲。

  119. ### 8. 快捷回复管理
  120. - 按直播间查看快捷回复列表,按排序值排列。
  121. - 创建快捷回复:指定所属直播间、内容和排序值。
  122. - 编辑快捷回复内容、排序和所属直播间。
  123. - 删除快捷回复。
  124. - 支持批量更新排序。

  125. ### 9. 系统配置
  126. 管理员可在线修改以下运行配置:
  127. - 阿里云模式切换(Mock模式/Live模式)。
  128. - 推流域名、拉流域名、应用名称。
  129. - 评论频率限制(每秒1到10条可调)。
  130. 配置修改后即时生效,保存到本地运行时配置文件,同时更新内存中的配置对象。密钥等敏感信息不在界面展示,只能通过环境变量配置。

  131. ### 10. 操作日志
  132. 分页查看管理员的操作记录,包括操作人、操作类型、操作对象和详细信息。覆盖用户管理、直播间管理、评论管理、黑名单管理、敏感词管理、马甲管理、快捷回复管理、系统配置修改等操作类型。

  133. ---

  134. ## 五、全局业务规则

  135. ### 1. 身份体系
  136. 微信用户以OpenID为身份标识,非微信用户以系统生成的访客ID为身份标识。管控操作(踢人、拉黑、禁言)均绑定用户ID,用户更换昵称不影响管控效力。

  137. ### 2. 直播间状态联动
  138. 直播间有四种状态:未开播、直播中、已暂停、已结束。主播关播后,观众端自动提示直播结束并停止拉流,小助手端操作面板显示禁用通知。

  139. ### 3. 消息实时同步
  140. 评论发送、评论删除、踢人、拉黑、禁言、解禁、在线人数变化、推流状态变化、直播结束等事件均通过WebSocket实时广播到对应直播间的在线用户,响应速度快。

  141. ### 4. 权限隔离
  142. - 观众:仅可观看直播和发送评论,无管控权限。
  143. - 小助手:拥有评论管控(删评)、观众管控(踢人、拉黑、禁言、解禁)、快捷回复和马甲切换能力,不可关闭直播或管理主播权限。
  144. - 主播:在直播间内拥有较高权限级别,包括开播/关播、推流控制、评论管理、观众管控、小助手授权/取消。
  145. - 管理员:拥有系统级管理权限,包括强制关播、删除直播间和用户、管理敏感词和马甲等。
  146. 后端对接口进行角色权限校验,前端不可越权操作。

  147. ### 5. 断线重连
  148. WebSocket客户端配置了自动重连机制,初始重连间隔一秒,上限间隔五秒,超时二十秒。用户网络中断后切回前台时自动恢复连接并重新加入直播间。

  149. ### 6. 评论防刷屏
  150. 后端采用内存计数器方式限制每人发言频率,默认每秒两条上限,超出频率自动拦截并提示"发言过于频繁"。前端额外做两秒内相同内容去重。系统每三十秒自动清理过期的频率限制记录以释放内存。

  151. ### 7. 敏感词过滤
  152. 评论内容在发送时经后端敏感词服务检测,敏感词库缓存在内存中(一分钟有效期),命中敏感词的评论直接拦截,返回"评论包含违规内容"的提示。敏感词支持检测和替换两种模式。

  153. ### 8. 过期管控自动清理
  154. 系统每六十秒自动扫描黑名单表中的过期记录(限时禁言到期、临时踢出到期),自动删除过期记录并通过WebSocket通知对应房间解除管控。

  155. ### 9. 推流地址安全
  156. 推流鉴权密钥仅存储在后端,前端只获取带签名的临时URL。推拉流地址采用阿里云auth_key鉴权机制,包含时间戳、随机数和MD5哈希签名,有效期一小时。

  157. ### 10. Mock与Live双模式
  158. 系统支持两种运行模式:Mock模式下使用模拟数据和Apple公开测试HLS流进行开发调试,无需阿里云真实配置;Live模式下对接阿里云直播服务,进行正式的推流和拉流。模式可通过管理后台在线切换。

  159. ---
  160. 根据项目的核心功能卖点和用户搜索习惯,推荐以下SEO标题:

  161. ---

  162. **推荐标题:**

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

  164. ---

  165. **关键词覆盖分析:**

  166. | 标题片段 | 对应搜索词 |
  167. |---------|-----------|
  168. | 微信H5直播系统源码 | 微信直播源码、H5直播源码、直播系统源码 |
  169. | 主播观众小助手三端分离 | 多角色直播系统、三端直播 |
  170. | 直播间弹幕互动 | 直播弹幕系统、直播互动源码 |
  171. | 房管马甲 | 直播房管系统、直播马甲功能 |
  172. | 敏感词过滤 | 直播敏感词、评论过滤系统 |
  173. | 后台管理 | 直播后台管理、直播管理系统 |
  174. | 支持私有化部署 | 直播系统部署、私有化直播 |

  175. **备选标题(不同侧重方向):**

  176. 侧重商业场景:
  177. 微信H5直播系统源码 三角色权限隔离 弹幕互动与房管管控 马甲快捷回复 配套管理后台 开箱即用

  178. 侧重功能完整度:
  179. H5直播源码 主播推流观众观看小助手房管四合一 弹幕表情互动 禁言拉黑踢人 敏感词过滤 含管理后台

  180. 侧重技术卖点:
  181. 微信端直播系统源码 阿里云推拉流对接 WebSocket实时同步 三端独立页面 后台数据看板 支持Mock调试
复制代码
13425876518842635.jpeg




上一篇:团油快电 - 一站式优惠加油服务平台 | VIP会员系统 | 分销...
下一篇:微信加油H5系统源码 — 附近油站导航、在线支付、三级分...
回复

使用道具 举报

你好棒!!
回复

使用道具 举报

你历害!!
回复

使用道具 举报

沙发!!
回复

使用道具 举报

hhh*** 昨天 10:09 | 显示全部楼层
已加客服
回复

使用道具 举报

DZ*** 昨天 11:18 | 显示全部楼层
不错!!
回复

使用道具 举报

非常好!!
回复

使用道具 举报

支持!!!
回复

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies |上传

本版积分规则

加载中0.085188

QQ|小黑屋|云起SaaS | 鲁ICP备15033450号-1 劰载中...|网站地图

GMT+8, 2026-6-15 02:19 , Processed in 0.132472 second(s), 31 queries .

Copyright © 菏泽云起网络科技有限公司.

快速回复 返回顶部 返回列表