最近公司要開發一個直播功能,本身也是研究了好久,這裏總結一下:
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 請備註來自博客園