騰訊雲獨家詳解小程序多人視頻通話

時間 2019-11-25

標籤騰訊獨家詳解程序多人視頻通話欄目騰訊简体版

原文原文鏈接

歡迎你們前往雲+社區，獲取更多騰訊海量技術實踐乾貨哦~

做者：小程序音視頻產品經理

功能體驗

在微信小程序中搜索騰訊視頻雲能夠加載到咱們的演示用小程序，其中多人音視頻功能可用於體驗和測試多人音視頻通話功能。出於 UI 美觀和畫面大小的考慮，Demo 中僅支持了最多四人的視頻通話，您能夠經過修改源碼中的限制參數來調整這個數值。javascript

技術指標

通信延遲：300ms - 800ms
底層協議：基於 UDP 協議構建，並遵循 RTMP 標準對音視頻數據進行切分和封裝，支持丟包恢復和網絡自適應。
安全加密：每次鏈接都獨立啓用一對全新的非對稱加密密鑰，整個通信過程沒法監聽和篡改。
支持錄製：若是須要能夠在雲端進行錄製，適用於在線客服、金融開戶等商用音視頻解決方案，支持私有化部署。

雙人vs多人

雙人音視頻僅僅是兩個端之間交換 URL 這麼簡單，可是從雙人通話到多人通話，問題的複雜性就迅速增長了。java

以下是一種解決問題的思路，即每一個端都要維護好各端的狀態信息：node

這種方案的對於終端開發不是很友好，代碼會很複雜也不易閱讀，更重要的是，它極易引入各端信息不一致的 BUG。因此咱們能夠考慮讓 Server 來協助解決這個問題：json

咱們能夠將房間中的成員都交給 Server 來管理，因爲 Server 的信息是集中的，所以不會出現信息不一致性的 BUG，只要各個終端在須要的時候從 Server 同步最新的成員列表到本地（GET LIST）便可，同時，新成員的加入或者退出，亦可由 Server 完成通知。小程序

爲了幫您更好的實現基於 Server 的解決方案，咱們推薦您使用 RTCRoom 解決方案：微信小程序

<h2 id="RTCROOM">RTCROOM </h2>安全

RTCRoom（RealTime ChatRoom）存在的意義在於封裝雙人或者多人音視頻實現過程當中須要考慮的各類細節邏輯問題，好比房間管理、狀態同步，消息收發等等，讓您只須要面對幾個很是簡單的接口，從而快速構建本身的音視頻能力。服務器

原理解讀

Client

RTCRoom 的 Client 部分（小程序上的 RTCRoom 是一個叫作 rtcroom.js 的 javascript 文件）提供了一組 API 接口：微信

CreateRoom
建立一個雙人（或多人）視頻通話房間，調用這個接口的人即爲建立者。
EnterRoom

進入一個已經建立好的視頻通話房間，調用這個接口的人即爲參與者。網絡

ExitRoom
退出一個視頻通話房間，在咱們的默認實現中，若是是建立者退出，房間將被解散，您能夠根據本身的須要進行調整。
SendTxtMsg

發送文本消息，用於做爲視頻交流的輔助手段，一般是用來發送一些不重要的系統通知。

事件通知
事件通知，好比新的與會者加入，或者有人離開，等等。
小程序的限制

因爲小程序是嚴格遵循數據驅動的設計理念，因此不支持動態建立 <live-pusher> 和 <live-player> 對象, 所以咱們還沒法作到讓您無需關心這兩個標籤而直接使用 RTCRoom，所以小程序端的 Demo 代碼要比 iOS、Android 以及 Win 平臺要複雜一點點。

Server

列表管理
RTCRoom 的 Server 部分是一組用於房間列表管理和成員列表管理的簡單代碼實現。以視頻會議爲例，一個公司同時可能會有多個進行中的視頻會議，那麼每個會議都是一個房間，每個房間裏又有多個與會者。因此對於房間的管理和對於房間中成員的管理就是 Server 部分的工做。
事件通知

同時，Server 還有一個重要職責，就是當房間解散以及成員進出時，經過 IM 消息通道通知房間裏的各個成員。因爲騰訊雲已經有很是成熟的 IM 通信解決方案，因此咱們直接複用騰訊雲 IM 實現房間內各成員的狀態通知。

心跳機制
除了音視頻鏈路，小程序和 Server 之間最好還要加一個心跳機制，這種方式用於甄別微信是否發生了意外崩潰，您也可使用騰訊雲音視頻鏈路的中斷通知來達到一樣效果，可是接入複雜性要高不少。源碼下載RTCRoom 是一套開源實現，在 iOS，Android，Windows、小程序以及服務器端均有一套示例源碼。其中客戶端的源碼主要是提供 CreateRoom、EnterRoom、ExitRoom 等進出房間的接口，而服務端源碼則用於房間管理，並經過騰訊雲通信（IM）服務向房間內成員發送事件通知。操做系統下載連接源碼位置小程序DOWNLOAD小程序源碼 zip 包中的 wxlite 文件夾服務端DOWNLOAD小程序源碼 zip 包中的 server 文件夾iOSDOWNLOADSDK 開發包 RtcRoom.mAndroidDOWNLOADSDK 開發包 RtcRoom.javaWindowsDOWNLOADDemo 源碼中的 RTCRoom.h+RTCRoom.cpp
小程序端源碼包的內部目錄結構：

RTMPRoom
├── README.md
├── server               //後臺代碼目錄，具體目錄節後見文檔稍後部分
├── 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        //配置文件，主要配置後臺服務器地址

 
  server
├── README.md
├── app.js    // 服務器端 的主入口文件，使用 Koa 框架，在 `app.js` 建立一個 Koa 實例並響應請求。
├── double_room                // 雙人實時音視頻房間，每一個js文件對應一個https接口的實現
│   ├── index.js  
│   ├── get_im_login_info.js
│   ├── get_push_url.js
│   ├── create_room.js
│   ├── destroy_room.js
│   ├── add_pusher.js
│   ├── delete_pusher.js
│   ├── get_pushers.js
│   ├── pusher_heartbeat.js
│   └── get_room_list.js
├── multi_room                // 多人實時音視頻房間，每一個js文件對應一個https接口的實現
│   ├── index.js
│   ├── get_im_login_info.js
│   ├── get_push_url.js
│   ├── create_room.js
│   ├── destroy_room.js
│   ├── add_pusher.js
│   ├── delete_pusher.js
│   ├── get_pushers.js
│   ├── pusher_heartbeat.js
│   └── get_room_list.js
├── live_room                 // RTMP直播房間業務邏輯，每一個js文件對應一個https接口的實現
│   ├── index.js
│   ├── get_im_login_info.js
│   ├── get_push_url.js
│   ├── create_room.js
│   ├── destroy_room.js
│   ├── add_pusher.js
│   ├── delete_pusher.js
│   ├── get_pushers.js
│   ├── pusher_heartbeat.js
│   └── get_room_list.js
├── utils                     // 存放服務器端輔助接口的目錄
│   ├── index.js
│   ├── get_test_pushurl.js
│   ├── get_test_rtmpaccurl.js
│   ├── getlogfile.js
│   └── logfilelist.js
├── logic                     //
│   ├── im_mgr.js             // 雲通訊相關的處理，主要功能
│   ├── live_util.js          // 輔助函數，負責生成推流地址以及播放地址，以及用戶ID分配和房間ID分配的功能
│   ├── double_room_mgr.js    // 雙人實時音視頻房間管理模塊
│   ├── multi_room_mgr.js     // 多人實時音視頻房間管理模塊
│   └── live_room_mgr.js      // 標準 RTMP 直播房間管理模塊
├── middlewares
│   ├── bodyparser.js
│   └── response.js
├── config.js                 // 配置騰訊雲直播服務和雲通信服務的相關參數，如推流防盜鏈key，bizid等
├── log.js                    // 後臺日誌模塊，主要記錄請求響應和錯誤兩大類日誌。
├── log_config.js             
├── package.json
├── process.json
├── nodemon.json
├── qcloud.js
└── routes
      └── index.js      // 服務器端路由定義文件：即每一個 https 接口具體是由哪一個 js 文件所實現的 
 

一鍵部署

下載源碼只須要點幾下鼠標，可是讓 RTCRoom 跑起來卻未必是件容易的事情，尤爲是在您沒有服務器的狀況下。考慮到這一點，咱們提供了免費的一鍵部署服務，您只須要免費開通幾項騰訊雲服務，便可在 5 分鐘時間內快速搭建出本身的調試環境。

雙人場景

RTCRoom 不只僅可用於多人場景，雙人視頻通話也可使用，並且要比從零開始用 <live-pusher> 和 <live-player> 構建雙人視頻通話功能要簡單的多。