這裏直播仍是用的第三方的集成：視頻用的是七牛雲的集成，聊天用的是融雲。圖玩智能科技提供免費的直播源碼，詳情請登陸www.toivan.com.css
1、直播功能(七牛雲)html
下面是直播的快速入門文檔：前端
https://developer.qiniu.com/pili/manual/1221/the-console-quick-startweb
這裏前端功能沒什麼可說的，文檔中都寫的很詳細。服務器
我這裏用的前端播放器是videojs,引入相關的js和css，只須要簡單的設置就能夠：網絡
var myPlayer = videojs('demo-video',{app
bigPlayButton : true,ide
textTrackDisplay : true,post
posterImage: true,ui
errorDisplay : true,
controlBar : true
},()=>{
})
2、聊天室功能(融雲)
融雲這個就比較坑了，文檔和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);
}
});