最近公司要开发一个直播功能，自己也是研究了很久，这里总结一下：

这里直播还是用的第三方的集成：视频用的是七牛云的集成，聊天用的是融云。

一、直播功能(七牛云)

下面是直播的快速入门文档：

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  请备注来自博客园