最近公司要开发一个直播功能，自己也是研究了很久，这里总结一下：
这里直播还是用的第三方的集成：视频用的是七牛云的集成，聊天用的是融云。
一、直播功能(七牛云)
下面是直播的快速入门文档：
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 请备注来自博客园
以上是关于前端直播功能开发总结的主要内容，如果未能解决你的问题，请参考以下文章
h5直播开发之旅总结
chrome 开发者工具——前端实用功能总结
小程序直播功能开发经过 开发直播小程序的过程 微信直播小程序 直播答题小程序开发 小程序怎么做直播
ApiCloud开发经验总结
mockjs学习总结（方便前端模拟数据，加快开发效率）
函数式编程在前端权限管理中的应用