ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

H5 如何实现直播

2021-04-20 10:31:28  阅读:208  来源: 互联网

标签:web rtc H5 如何 直播 主播 观众


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,还是很欣喜的。喜欢的大家可以体验下。

标签:web,rtc,H5,如何,直播,主播,观众
来源: https://blog.csdn.net/xiaoxiaoxuetu11/article/details/115894871

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有