H5 如何实现直播

/uploads/files_user28/article/6077e5d7c1586456158.png

目前直播大火,在看直播后突然想自己做个直播软件。想了想想自己做下,开始在网上各种找资源。直播嘛,那必然有主播端和观众端。经过一系列的考察后后来找到了融云,使用了他们的 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,还是很欣喜的。喜欢的大家可以体验下。


0 个评论

要回复文章请先登录注册