最近公司要開發一個直播功能,自己也是研究了很久,這里總結一下:
這里直播還是用的第三方的集成:視頻用的是七牛雲的集成,聊天用的是融雲。
一、直播功能(七牛雲)
下面是直播的快速入門文檔:
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 請備注來自博客園