基于WebRTC+SRS+Node.js搭建开源跨端直播平台（累计450+⭐️）

前言

生态

以上数据统计截止至2023年12月13号

线上地址、源码

• 前台地址：live.hsslive.cn
• 前台源码：github.com/galaxy-s10/…
• 后台地址：live-admin.hsslive.cn
• 后台源码：github.com/galaxy-s10/…
• 后端接口：live-api.hsslive.cn
• 后端源码：github.com/galaxy-s10/…
• 安卓客户端：resource.hsslive.cn/billd-live/…
• 安卓客户端源码：github.com/galaxy-s10/…

前台优化

首页

首页的背景图是可以后台配置的；有的直播间需要SVIP权限，没有的话则播放不了~

分区

加了些小提示（直播中、SVIP、CDN）

进入直播间（后台没有配置直播间背景图）

进入直播间（后台配置了直播间背景图）

移动端界面：

初步支持登录：

直播间信息：

客服（二维码可在后台配置）：

后台优化

登录

控制台

直播记录

直播记录主要是做一些数据统计，比如观看数、弹幕数、直播时长等等

直播间列表

直播间列表主要展示或编辑直播间信息，比如开播预览图，直播间背景图，直播间是否可见，是否需要拉流鉴权等等

在线主播/观众

可以在线踢主播/观众

直播配置

可在后台编辑首页背景，客服二维码

用户角色权限（RABC）模块

用户角色权限其实涉及很多东西，这里就简单看看

用户管理

编辑用户角色

角色列表

角色树

编辑角色权限

安卓客户端

首页、分区、排行：

直播间详情、分区详情：

我的已登录/未登录：

直播中心：

为什么既有跨端的flutter和react-native，又有原生的kotlin呢，最主要的原因还是业务需求，一开始是打算用flutter开发的，没有别的意思，单纯的就是试试flutter练练手，后面发现flutter用的dart语言，类型太不习惯了，于是就索性换其他跨端框架，然后就用了react-native，果然用了react-native，感觉就跟普通的前端开发差不多了，也有很多现成的轮子可以用，开发起来贼爽，但是后面发现rn太过于依赖社区插件了，我的需求里用到了一个插件，出现了问题，有兴趣的嗯可以看看这个：issue，然后我自己解决不了，不得不又换回flutter哈哈哈（其实习惯了就好），后面发现flutter有些需求得依赖原生，比如获取系统扬声器的声音，网上搜了一轮发现没有flutter的轮子，就只能是用原生，于是就有了kotlin的版本。

注意：我只用过一门语言（js/ts），因此不管是dart还是kotlin，都是只懂一点皮毛。

加群

参考这里：live.hsslive.cn/about/group

总结、计划

1. 不知不觉，好像已经好久没有研究过技术了，现在都是为了实现业务而学习。
2. 继续完善 billd-live，不断提升用户体验。