HLS多人交流且无需登录可配置海报和流地址的React直播间应用
建议在Linux下部署
- nodejs环境安装配置
- npm的安装和配置或者cnpm
- 服务器需要nginx或着apache
React应用构建
- 通过Git GUI工具或者Git bash将此仓库clone到准备部署的环境下
- 通过npm命令安装直播间所需要的模块
npm install - 模块安装完毕后启动React应用
npm start - 编写代码，同时React会自动编译。在浏览器里查看React应用
- 编写完代码用npm命令build
npm run build - 将本地的build目录上传到服务器，并且配置服务器的nginx或者apache
- React应用部署完毕
服务端
- 将liveroom_server文件夹上传到服务器
- 通过npm命令安装服务端所需模块
npm install - 之后通过node或者用npm下的pm2模块启动服务端js文件
-
使用node(建议后台运行)
nohup node socket.js & > nohup.out 2>&1nohup node socket-backstage.js & > nohup.out 2>&1 -
使用pm2(需要使用npm安装)
pm2 start socket.jspm2 start socket-backstage.js
-
- 后台OK了
- 切换到liveroom_server_new文件夹下
- 通过npm命令安装服务端所需模块
npm install - 之后通过node或者用npm下的pm2模块启动服务端js文件
-
使用node(建议后台运行)
nohup node ./app.js & > nohup.out 2>&1 -
使用pm2(需要使用npm安装)
pm2 start app.js
-
如果要访问后台配置直播间的页面要在url后面加上/backstage eg.http://yoururl/ 这个是普通用户访问的页面 eg.http://yoururl/backstage 这个是主播访问的页面
-
重新设计了UI
-
播放器使用开源播放器videojs
-
直播间的后台管理页面
- 可以直接更改直播间标题
- 可以配置其他直播源地址
- 可以改变播放器的背景海报
-
SuperChat醒目留言
-
修复了直播间2.0的一些问题
-
减少了第三方UI组件库的使用
- 增加了聊天功能，可以实时和在直播间的人互动了
- 增加了在线人数统计
- 使用第三方UI组件库重置了UI
- 使用了React-flow-player组件，可以在移动端播放
- 使用hls推流直播
其实这个1.0版本没什么可说的，太老了
- 使用red5软件做直播服务器
- ...我都忘了2333
当时正是Ultra2019的时候，为了给无法看Y2B的小伙伴云蹦迪的乐趣，想到了直播。不能用其他平台直播境外的东西，所以就自己用Red5和videojs5.x的版本弄了一个简易的网页。
直播间1.0的最大问题就是rtmp推流只能用flash播放，手机不支持，没法在手机上看。之后正巧学习了React框架就索性用了这个框架。播放器啊、聊天框啊都是用的Ant Design第三方的UI组件库。播放器是FlowPlayer是H5的播放器，也就用HLS推流了。之后就一直没有了更新。直到2020年的这个多灾多难的假期，有了时间准备更新下直播间。受不了2.0的圆角设计和UI了，索性发布3.0
直播间3.0全新设计了UI，我使用的是Balsamiq Wireframes 4，在liveroom_design的文件夹里面有设计样式图片。本来打算是重新重做直播间，其实说到也算是。参考设计是Y2B。做完了UI并且实现了逻辑后发现直播间的标题和播放器海报，直播源不能更改。后面又想到了用前端的另一个页面直接可以对这些元素修改。到最后终于做完啦，开始直播喽！
我的思路还是有局限的地方，有新的点子的你也希望在issue中讨论哦。不断的学习，编码，才能有更好的直播间。O(∩_∩)O
这个项目是用React的官方脚手架构建的 Create React App.