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

前言

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

生态

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

线上地址、源码

前台优化

首页

首页的背景图是可以后台配置的;有的直播间需要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,不断提升用户体验。
相关推荐
king199901029 分钟前
小程序Npm package entry file not found?
前端·npm·node.js
程序猿阿伟18 分钟前
《解锁CSS Flex布局:重塑现代网页布局的底层逻辑》
前端·css
生产队队长19 分钟前
CSS:选择器-复合选择器
前端·css
黄同学real1 小时前
前端安全中的XSS(跨站脚本攻击)
前端·安全·xss
楠奕1 小时前
Neo4j多关系或多路径
前端·javascript·neo4j
小彭努力中3 小时前
8.Three.js中的 StereoCamera 立体相机详解+示例代码
开发语言·前端·javascript·vue.js·深度学习·数码相机·ecmascript
牧天白衣.7 小时前
html中margin的用法
前端·html
NoneCoder7 小时前
HTML与安全性:XSS、防御与最佳实践
前端·html·xss
沃野_juededa7 小时前
关于uniapp 中uview input组件设置为readonly 或者disabled input区域不可点击问题
java·前端·uni-app
哎哟喂_!7 小时前
UniApp 实现分享功能
前端·javascript·vue.js·uni-app