小程序多人視頻通話如何實現(xiàn)
小程序多人視頻通話需要通過騰訊視頻云實現(xiàn),那么要如何實現(xiàn),操作流程如下:
功能體驗
在微信小程序中搜索騰訊視頻云可以加載到我們的演示用小程序,其中多人音視頻功能可用于體驗和測試多人音視頻通話功能。出于 UI 美觀和畫面大小的考慮,Demo 中僅支持了最多四人的視頻通話,您可以通過修改源碼中的限制參數(shù)來調(diào)整這個數(shù)值。
技術(shù)指標
通訊延遲:300ms - 800ms
底層協(xié)議:基于 UDP 協(xié)議構(gòu)建,并遵循 RTMP 標準對音視頻數(shù)據(jù)進行切分和封裝,支持丟包恢復(fù)和網(wǎng)絡(luò)自適應(yīng)。
安全加密:每次連接都獨立啟用一對全新的非對稱加密密鑰,整個通訊過程無法監(jiān)聽和篡改。
支持錄制:如果需要可以在云端進行錄制,適用于在線客服、金融開戶等商用音視頻解決方案,支持私有化部署。
雙人vs多人
雙人音視頻僅僅是兩個端之間交換 URL 這么簡單,但是從雙人通話到多人通話,問題的復(fù)雜性就迅速增加了。
我們可以將房間中的成員都交給 Server 來管理,由于 Server 的信息是集中的,因此不會出現(xiàn)信息不一致性的 BUG,只要各個終端在需要的時候從 Server 同步最新的成員列表到本地(GET LIST)即可,同時,新成員的加入或者退出,亦可由 Server 完成通知。
為了幫您更好的實現(xiàn)基于 Server 的解決方案,我們推薦您使用 RTCRoom 解決方案:
RTCROOM
RTCRoom(RealTime ChatRoom)存在的意義在于封裝雙人或者多人音視頻實現(xiàn)過程中需要考慮的各種細節(jié)邏輯問題,比如房間管理、狀態(tài)同步,消息收發(fā)等等,讓您只需要面對幾個非常簡單的接口,從而快速構(gòu)建自己的音視頻能力。
原理解讀
Client
RTCRoom 的 Client 部分(小程序上的 RTCRoom 是一個叫做 rtcroom.js 的 javascript 文件) 提供了一組 API 接口:
CreateRoom創(chuàng)建一個雙人(或多人)視頻通話房間,調(diào)用這個接口的人即為創(chuàng)建者。
EnterRoom
進入一個已經(jīng)創(chuàng)建好的視頻通話房間,調(diào)用這個接口的人即為參與者。
ExitRoom退出一個視頻通話房間,在我們的默認實現(xiàn)中,如果是創(chuàng)建者退出,房間將被解散,您可以根據(jù)自己的需要進行調(diào)整。
SendTxtMsg
發(fā)送文本消息,用于作為視頻交流的輔助手段,通常是用來發(fā)送一些不重要的系統(tǒng)通知。
事件通知事件通知,比如新的與會者加入,或者有人離開,等等。
小程序的限制
由于小程序是嚴格遵循數(shù)據(jù)驅(qū)動的設(shè)計理念,所以不支持動態(tài)創(chuàng)建
Server
列表管理RTCRoom 的 Server 部分是一組用于房間列表管理和成員列表管理的簡單代碼實現(xiàn)。以視頻會議為例,一個公司同時可能會有多個進行中的視頻會議,那么每一個會議都是一個房間,每一個房間里又有多個與會者。所以對于房間的管理和對于房間中成員的管理就是 Server 部分的工作。
事件通知
同時,Server 還有一個重要職責,就是當房間解散以及成員進出時,通過 IM 消息通道通知房間里的各個成員。由于騰訊云已經(jīng)有非常成熟的 IM 通訊解決方案,所以我們直接復(fù)用騰訊云 IM 實現(xiàn)房間內(nèi)各成員的狀態(tài)通知。
心跳機制除了音視頻鏈路,小程序和 Server 之間最好還要加一個心跳機制,這種方式用于甄別微信是否發(fā)生了意外崩潰,您也可以使用騰訊云音視頻鏈路的中斷通知來達到同樣效果,但是接入復(fù)雜性要高很多。源碼下載RTCRoom 是一套開源實現(xiàn),在 iOS,Android,Windows、小程序以及服務(wù)器端均有一套示例源碼。其中客戶端的源碼主要是提供 CreateRoom、EnterRoom、ExitRoom 等進出房間的接口,而服務(wù)端源碼則用于房間管理,并通過騰訊云通訊(IM)服務(wù)向房間內(nèi)成員發(fā)送事件通知。操作系統(tǒng)下載鏈接源碼位置小程序DOWNLOAD小程序源碼 zip 包中的 wxlite 文件夾服務(wù)端DOWNLOAD小程序源碼 zip 包中的 server 文件夾iOSDOWNLOADSDK 開發(fā)包 RtcRoom.mAndroidDOWNLOADSDK 開發(fā)包 RtcRoom.javaWindowsDOWNLOADDemo 源碼中的 RTCRoom.h+RTCRoom.cpp
小程序端源碼包的內(nèi)部目錄結(jié)構(gòu):
RTMPRoom ├── README.md ├── server //后臺代碼目錄,具體目錄節(jié)后見文檔稍后部分 ├── wxlite //騰訊視頻云小程序目錄 ├── ├── pages //騰訊視頻云小程序界面主目錄 ├── ├── ├── main //騰訊視頻云小程序主界面 ├── ├── ├── liveroom //騰訊視頻云小程序直播體驗室 ├── ├── ├── ├────roomlist//騰訊視頻云小程序直播體驗室列表界面 ├── ├── ├── ├────room //騰訊視頻云小程序直播體驗室直播界面 ├── ├── ├── doubleroom //騰訊視頻云小程序雙人音視頻 ├── ├── ├── ├────roomlist//騰訊視頻云小程序雙人音視頻在線列表 ├── ├── ├── ├────room //騰訊視頻云小程序雙人音視頻視頻聊天界面 ├── ├── ├── multiroom //騰訊視頻云小程序多人音視頻 ├── ├── ├── ├────roomlist//騰訊視頻云小程序多人音視頻在線列表 ├── ├── ├── ├────room //騰訊視頻云小程序多人音視頻視頻聊天界面 ├── ├── ├── cameraview //騰訊視頻云小程序雙人、多人聊天推流自定義組件 ├── ├── ├── play //騰訊視頻云小程序播放界面 ├── ├── ├── push //騰訊視頻云小程序推流界面 ├── ├── ├── rtpplay //騰訊視頻云小程序低延時播放界面 ├── ├── ├── vodplay //騰訊視頻云小程序點播播放界面 ├── ├── ├── Resources //騰訊視頻云小程序資源目錄 ├── ├── lib //小程序使用的通用庫目錄 ├── ├── utils //騰訊視頻云小程序界工具庫目錄 ├── ├── ├── rtcroom.js //騰訊視頻云小程序雙人、多人音視頻庫文件 ├── ├── ├── liveroom.js //騰訊視頻云小程序單向音視頻庫文件 └── └── config.js //配置文件,主要配置后臺服務(wù)器地址服務(wù)端端源碼包的內(nèi)部目錄結(jié)構(gòu):
一鍵部署
下載源碼只需要點幾下鼠標,但是讓 RTCRoom 跑起來卻未必是件容易的事情,尤其是在您沒有服務(wù)器的情況下??紤]到這一點,我們提供了免費的一鍵部署服務(wù),您只需要免費開通幾項騰訊云服務(wù),即可在 5 分鐘時間內(nèi)快速搭建出自己的調(diào)試環(huán)境。
雙人場景
RTCRoom 不僅僅可用于多人場景,雙人視頻通話也可以使用,而且要比從零開始用
HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。
更多小程序資訊,盡在:westcoastpropertyservices.com/xiaocx/