Vue3+WebRTC+SRS+Node.js打造一个开源直播平台（累计450+⭐️）

galaxy_s10
2,014 阅读3分钟

前言

距离上一篇 文章 已经过了三个月了，来简单的总结看看这三个月我都做了些啥~

billd直播历史文章：

生态

image.png

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

线上地址、源码

前台优化

首页

image.png

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

分区

image.png

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

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

image.png

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

移动端界面：

初步支持登录：

image.png

image.png

直播间信息：

image.png

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

后台优化

登录

image.png

控制台

image.png

直播记录

image.png

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

直播间列表

image.png

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

在线主播/观众

image.png

image.png

可以在线踢主播/观众

直播配置

image.png

image.png

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

用户角色权限（RABC）模块

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

用户管理

image.png

编辑用户角色

image.png

角色列表

image.png

角色树

image.png

编辑角色权限

image.png

安卓客户端

首页、分区、排行：

image.png

直播间详情、分区详情：

image.png

我的已登录/未登录：

image.png

直播中心：

image.png

为什么既有跨端的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，不断提升用户体验。
avatar
文章
阅读
粉丝