前端直播功能開發總結

最近公司要開發一個直播功能,本身也是研究了好久,這裏總結一下:

css

這裏直播仍是用的第三方的集成:視頻用的是七牛雲的集成,聊天用的是融雲。html

1、直播功能(七牛雲)前端

下面是直播的快速入門文檔:web

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

這裏前端功能沒什麼可說的,文檔中都寫的很詳細。網絡

我這裏用的前端播放器是videojs,引入相關的js和css,只須要簡單的設置就能夠:app

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

2、聊天室功能(融雲)ide

融雲這個就比較坑了,文檔和demo對於web開發者很不友好,開發的時候不少接口還有問題。下面是心得:post

聊天室對於pc端應當有兩個界面,用戶客戶端觀看界面和超級管理員的管理界面ui

 

客戶端觀看界面:

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  請備註來自博客園 

相關文章
相關標籤/搜索