H5 如何實(shí)現(xiàn)直播

目前直播大火，在看直播后突然想自己做個(gè)直播軟件。想了想想自己做下，開始在網(wǎng)上各種找資源。直播嘛，那必然有主播端和觀眾端。經(jīng)過一系列的考察后后來找到了融云，使用了他們的 SDK，一共用了無 UI IM 和低延時(shí)直播兩個(gè) SDK。

IM 用了連接和發(fā)送消息，選擇的是融云的聊天室場(chǎng)景。

低延時(shí)直播分了主播端和觀眾端。使用 H5 作為觀眾端進(jìn)行觀看，使用 web 端作為主播端進(jìn)行了直播。

功能點(diǎn)介紹

主播端

按照文檔的思路，主播端用的 web 界面，使用的 chrome 瀏覽器。
涉及到的功能點(diǎn)：

主播分享視頻

查看觀眾發(fā)的消息

回復(fù)消息

觀眾端

觀眾端用的 H5 實(shí)現(xiàn)，涉及到的功能點(diǎn)：

觀看主播分享的視頻

發(fā)消息

點(diǎn)贊

額，就是為了體驗(yàn)功能做的簡(jiǎn)單了些，沒有弄那些禮物什么的有些麻煩。

實(shí)現(xiàn)思路

主播端

需要先初始化連接 IM，RTC 兩個(gè)融云的 SDK，此處參考的快速集成 https://docs.rongcloud.cn/v4/views/rtc/livevideo/guide/quick/premise/web.html。

加入到房間中 https://docs.rongcloud.cn/v4/views/rtc/livevideo/guide/anchorManage/room/web.html#newroom。

發(fā)布視頻資源供觀眾查看 https://docs.rongcloud.cn/v4/views/rtc/livevideo/guide/anchorManage/resource/web.html#publish

配置直播 CDN 推流地址 https://docs.rongcloud.cn/v4/views/rtc/livevideo/guide/manager/pushcdn/web.html

完成

此處僅給了我認(rèn)為關(guān)鍵的幾個(gè)接口，如果大家感興趣可以自己細(xì)看下文檔。有些高級(jí)的接口這邊沒有測(cè)試，不過看介紹可以設(shè)置直播視頻的樣式。感興趣的小伙伴按照文檔自行研究下吧。

觀眾端

觀眾端就很簡(jiǎn)單了，H5 的觀眾端僅需要訂閱 CDN 推流的地址就可以看到主播的視頻流，很方便。

總結(jié)

整體做下來大概零零散散用了兩三天，UI 也沒怎么最求在網(wǎng)上找了個(gè)大致的樣式做了下。不過整體還好最起碼基本的功能實(shí)現(xiàn)了。也算是自己做的第一個(gè)直播的小 Demo，還是很欣喜的。喜歡的大家可以體驗(yàn)下。

總結(jié)

以上是生活随笔為你收集整理的H5 如何实现直播的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。