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，還是很欣喜的。喜歡的大家可以體驗下。