H5 如何实现直播

Posted 2021-09-14 刘建伯

H5 如何实现直播

目前直播大火，在看直播后突然想自己做个直播软件。想了想想自己做下，开始在网上各种找资源。直播嘛，那必然有主播端和观众端。经过一系列的考察后后来找到了融云，使用了他们的 SDK，一共用了无 UI IM 和低延时直播两个 SDK。

IM 用了连接和发送消息，选择的是融云的聊天室场景。

低延时直播分了主播端和观众端。使用 H5 作为观众端进行观看，使用 web 端作为主播端进行了直播。

功能点介绍

主播端

按照文档的思路，主播端用的 web 界面，使用的 chrome 浏览器。
涉及到的功能点：

1. 主播分享视频
2. 查看观众发的消息
3. 回复消息

观众端

观众端用的 H5 实现，涉及到的功能点：

1. 观看主播分享的视频
2. 发消息
3. 点赞

额，就是为了体验功能做的简单了些，没有弄那些礼物什么的有些麻烦。

实现思路

主播端

1. 需要先初始化连接 IM，RTC 两个融云的 SDK，此处参考的快速集成 https://docs.rongcloud.cn/v4/views/rtc/livevideo/guide/quick/premise/web.html。
2. 加入到房间中 https://docs.rongcloud.cn/v4/views/rtc/livevideo/guide/anchorManage/room/web.html#newroom。
3. 发布视频资源供观众查看 https://docs.rongcloud.cn/v4/views/rtc/livevideo/guide/anchorManage/resource/web.html#publish
4. 配置直播 CDN 推流地址 https://docs.rongcloud.cn/v4/views/rtc/livevideo/guide/manager/pushcdn/web.html
5. 完成

此处仅给了我认为关键的几个接口，如果大家感兴趣可以自己细看下文档。有些高级的接口这边没有测试，不过看介绍可以设置直播视频的样式。感兴趣的小伙伴按照文档自行研究下吧。

观众端

观众端就很简单了，H5 的观众端仅需要订阅 CDN 推流的地址就可以看到主播的视频流，很方便。

总结

整体做下来大概零零散散用了两三天，UI 也没怎么最求在网上找了个大致的样式做了下。不过整体还好最起码基本的功能实现了。也算是自己做的第一个直播的小 Demo，还是很欣喜的。喜欢的大家可以体验下。