React直播间的开发

直播-流媒体。整个项目是19年4-5月份完成的,20年2月疫情期间做了新ui。最近这几天加了SuperChat功能

Dark Mode

liveroom (this link opens in a new window) by MIMONATCH (this link opens in a new window)

hls直播间 - 📺可以更换推流源,从直播到点播,从使用别人的推流源到自己假设推流服务器

这算是自己兴趣使然的第一个项目。17年写过一点小程序,但是那会儿对于前端的知识掌握的太少,直接用腾讯的框架很多东西都不懂的

思路

  • 最早了解的直播是red5,red5可以直接搭建一个直播服务器,但是版本都很老了,后面的版本不开源。rtmp和hls,rtmp是常用的流协议,但不支持手机播放。因此,选择了nginx-rtmp-module模块,这个模块接收rtmp推流,推流可以选择使用obs或者ffmpeg。这个模块还提供对应的应用,比如hls支持,dash支持。可以将rtmp流变为hls,hls是通过http协议来拿到ts流切片的,现在的H5播放器(videojs)等一些封装好的播放器都支持。videojs拿到m3u8文件可以自动找到服务器或者客户端拿到的ts文件,非常的方便。且对于手机和PC都有很好的支持。
  • 直播间=互动+直播视频,最基本的两个功能。额外还有在线人数统计,还有醒目留言SC功能。20年更新的版本还可以换直播间的推流源,在线更改直播间标题和待机背景

    准备

    基本的思路明确后,服务器的nginx安装和安装nginx-rtmp-module模块都不是什么问题。

  • nginx-rtmp-module下载
path/to/nginx/configuer --add-module=/path/to/nginx-rtmp-module   // 编译安装
make
install

nginx的配置

rtmp{                                   # 添加一个rtmp块
    server{                             # rtmp推流端口
        listen 1935;
        chunk_size 4000;
    application hls{                    # hls应用块
        hls on;
        hls_path /path/to/hls/abcd;     # hls的文件存放位置
        live on;
        record off;
        }
    }

直播间结构

  • 播放器组件
  • 标题组件
  • 聊天内容组件
  • 发送聊天组件
  • 服务器通讯组件
  • 在线人数显示组件

简单说为上面这些组件构成,但一些组件下又追加了一些其他组件。这里不给出了

遇到的一些问题

布局

当时使用bootstrap3作为布局框架,栅格布局。现在来看,这种布局方式不灵活,调整布局需要到html文件下。理论上应该是在组件中调整布局的方式,以App组件来加载其他组件最后挂载App组件到html的一个定义好的dom上去。调整布局仅调整App组件即可

实时聊天

多人同时聊天需要一份共享的聊天数据,或者说有新聊天内容都要同步给所有参与聊天的人。这里使用了socketio,做了长连接。会话时间为进入直播间到关掉直播间页面。整个聊天数据都是在服务端处理的,比如新消息的下发,在线人数等

冗余数据处理

这一块在现在的项目中还没有优化,下发新的聊天数据应该是最新的一条数据。现在是下发给每一个连接的客户端所有的数据,之后react会做虚拟dom的对比仅更新最新一条的dom

推流源换源、换海报、配置直播标题

因为这些配置一般为直播up配置,但直播间没有权限划分、用户认证。故想到了使用路由开发隐藏页面(不直接提供入口)也就是README中提到的/backstage后台

hls延迟

hls是因为原理为加载切片,不为完整流有延迟。这点只能二次开发videojs或者使用其他协议,暂时没有计划

直播间的历程(同步README)

直播间1.0

当时正是Ultra2019的时候,为了给无法看Y2B的小伙伴云蹦迪的乐趣,想到了直播。不能用其他平台直播境外的东西,所以就自己用Red5和videojs5.x的版本弄了一个简易的网页。

直播间2.0

直播间1.0的最大问题就是rtmp推流只能用flash播放,手机不支持,没法在手机上看。之后正巧学习了React框架就索性用了这个框架。播放器啊、聊天框啊都是用的Ant Design第三方的UI组件库。播放器是FlowPlayer是H5的播放器,也就用HLS推流了。之后就一直没有了更新。直到2020年的这个多灾多难的假期,有了时间准备更新下直播间。受不了2.0的圆角设计和UI了,索性发布3.0

直播间3.0

直播间3.0全新设计了UI,我使用的是Balsamiq Wireframes 4,在liveroom_design的文件夹里面有设计样式图片。本来打算是重新重做直播间,其实说到也算是。参考设计是Y2B。做完了UI并且实现了逻辑后发现直播间的标题和播放器海报,直播源不能更改。后面又想到了用前端的另一个页面直接可以对这些元素修改。到最后终于做完啦,开始直播喽!

一点点感想

其实花的时间不久,多数的时间不是在编码,而是在解决遇到的问题。或者是权衡用什么方式实现最好。还有的时间在研究react,尤其是第二版的直播间,完全是边学边做。其实还有好多的功能没有添加,比如弹幕。最大的感触倒不是编码多牛了,而是比如以前太单纯考虑问题;弹幕仅考虑发送和显示,现在在此基础上考虑弹幕的显示是按照直播时间来显示,什么时候进来就从什么时候开始,显示以此时间开始后的弹幕。弹幕的记忆功能。考虑问题更多了罢。知识是学不完的,多练多尝试多学习。