最近公司要開發一個直播功能，自己也是研究了很久，這裡總結一下：

這裡直播還是用的第三方的整合：視訊用的是七牛雲的整合，聊天用的是融雲。

一、直播功能(七牛雲)

下面是直播的快速入門文件：

https://developer.qiniu.com/pili/manual/1221/the-console-quick-start

這裡前端功能沒什麼可說的，文件中都寫的很詳細。

我這裡用的前端播放器是videojs,引入相關的js和css，只需要簡單的設定就可以：

var myPlayer = videojs('demo-video',{ bigPlayButton : true, textTrackDisplay : true, posterImage: true, errorDisplay : true, controlBar : true },()=>{   })

二、聊天室功能(融雲)

融雲這個就比較坑了，文件和demo對於web開發者很不友好，開發的時候很多介面還有問題。下面是心得：

聊天室對於pc端應當有兩個介面，使用者客戶端觀看介面和超級管理員的管理介面

 

客戶端觀看介面：

1 先引入相關檔案

融雲的伺服器相關js：

<script src="http://cdn.ronghub.com/RongIMLib-2.3.2.js"></script> chatroom  web相關js檔案---下載地址： http://downloads.rongcloud.cn/chatroom-1.0.0.zip 需要用到其中的  message-types.js 檔案 2 連結融雲伺服器   這時候就需要後臺的小夥伴協助，通過server 獲取  token,詳見 https://www.rongcloud.cn/docs/web.html#get_token 以及在融雲上註冊得到的 appkey，如下： appInfo:{ appKey : "8tnym1br624m7", token : "ZThhLI1Xa1BX5EMREAdArWSH6ouuI8NT/fNmMkzF+4IOKIoFvbsi6JnH8QmnSltLkCcsK8vOgKl3IZgfbxFiWg==" }, 通過此次進入的直播間的 房間號或者id  請求後臺介面獲得該融雲聊天室的資訊： chatRoomInfo:{ "chatRoomId" : "chartroom-008", "count" : 0 },   然後開始連結融雲伺服器 //首先需要初始化 init RongIMLib.RongIMClient.init(appInfo.appKey);   //設定監聽 RongIMClient.setConnectionStatusListener({ onChanged: function (status) { switch (status) { case RongIMLib.ConnectionStatus.CONNECTED: console.log('連結成功'); break; case RongIMLib.ConnectionStatus.CONNECTING: console.log('正在連結'); break; case RongIMLib.ConnectionStatus.DISCONNECTED: console.log('斷開連線'); break; case RongIMLib.ConnectionStatus.KICKED_OFFLINE_BY_OTHER_CLIENT: console.log('其他裝置登入'); break; case RongIMLib.ConnectionStatus.DOMAIN_INCORRECT: console.log('域名不正確'); break; case RongIMLib.ConnectionStatus.NETWORK_UNAVAILABLE: console.log('網路不可用'); break; } }});   // 訊息監聽器 RongIMClient.setOnReceiveMessageListener({ // 接收到的訊息 onReceived: function (message) { console.log(message) 　　//這裡可以根據接受到messageType。來判斷展現方式或者進行相關處理　　 } }); //連結及重新連結伺服器 RongIMClient.connect(this.appInfo.token, { onSuccess: function(userId) { console.log("Connect successfully." + userId); }, onTokenIncorrect: function() { console.log('token無效'); }, onError:function(errorCode){ var info = ''; switch (errorCode) { case RongIMLib.ErrorCode.TIMEOUT: info = '超時'; break; case RongIMLib.ConnectionState.UNACCEPTABLE_PAROTOCOL_VERSION: info = '不可接受的協議版本'; break; case RongIMLib.ConnectionState.IDENTIFIER_REJECTED: info = 'appkey不正確'; break; case RongIMLib.ConnectionState.SERVER_UNAVAILABLE: info = '伺服器不可用'; break; } console.log(errorCode); } });
var callback = { onSuccess: function(userId) { console.log("Reconnect successfully." + userId); }, onTokenIncorrect: function() { console.log('token無效'); }, onError:function(errorCode){ console.log(errorcode); } }; var config = { // 預設 false, true 啟用自動重連，啟用則為必選引數 auto: true, // 重試頻率 [100, 1000, 3000, 6000, 10000, 18000] 單位為毫秒，可選 url: 'cdn.ronghub.com/RongIMLib-2.2.6.min.js', // 網路嗅探地址 [http(s)://]cdn.ronghub.com/RongIMLib-2.2.6.min.js 可選 rate: [100, 1000, 3000, 6000, 10000] }; RongIMClient.reconnect(callback, config);

3.訊息處理

通常在監聽訊息這步可以接受到message，就算成功了

一般的message通常是以下格式

{

content: 

　　{

　　messageName: "TextMessage", 

　　content: "123",

　　extra: "",

　　 user: {

　　　　"id" : “” 　　　　"name" :“” 　　　　"portrait" : “”

　　}

}

conversationType: 4

extra: undefined

isLocalMessage: undefined

messageDirection: 2

messageId: "4_32560"

messageType: "TextMessage"

messageUId: "B70T-8S90-IN8G-01JT"

objectName: "RC:TxtMsg"

offLineMessage: false

receiptResponse: undefined

receivedStatus: 1

receivedTime: 1542016057921

senderUserId: "391"

sentStatus: undefined

sentTime: 1542016058498

targetId: "41"

}

這裡一般要用到content 和 messageType兩個欄位
 messagetype有種不同的分類，這裡可以根據 結果的不同進行處理

 

超級管理員的控制介面

這裡超級管理員的控制介面前面跟客戶端基本一樣，在操作這裡多了開播通知，封禁，踢人等許可權：

 

融雲的通知訊息型別：

 

這裡我們用 chatroomStart 作為例子：

var time=1232132133   //時間戳，必填的欄位，表示開播時間 var chatroomMessages = RongMessageTypes.chatroom; var im = RongIMClient.getInstance(); im.registerMessageTypes(chatroomMessages); var user=  { 　　　　"id" : “” 　　　　"name" :“” 　　　　"portrait" : “” } var ChatroomStart = RongIMClient.RegisterMessage.ChatroomStart;//chartRoomStart可根據傳送訊息型別的不同更換，下面的例項化也是一樣 var msg = new ChatroomStart({ time:time, extra:JSON.stringify(user)//這裡我們在extra中以字串的形式儲存了使用者資訊 }); var chatroomType = RongIMLib.ConversationType.CHATROOM; var chatroomId = chatRoomInfo.chatRoomId; im.sendMessage(chatroomType, chatroomId, msg, { onSuccess: function(message) { console.log(message); console.log("直播開始") //自定義處理 }, onError: function(error) { console.log(error); } });

 可以參考文件： https://www.rongcloud.cn/docs/messages/chatroom/messages.html

 

由於時間和篇幅暫時介紹這麼多，歡迎各位同行來進行批評、交流和指正：

我的qq 673855200  請備註來自部落格園