码迷,mamicode.com
首页 > 其他好文 > 详细

前端直播功能开发总结

时间:2018-11-12 18:36:17      阅读:299      评论:0      收藏:0      [点我收藏+]

标签:quick   信息   txt   批评   gis   超时   hat   view   发送   

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

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

一、直播功能(七牛云)

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

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

 

前端直播功能开发总结

标签:quick   信息   txt   批评   gis   超时   hat   view   发送   

原文地址:https://www.cnblogs.com/liuxin-673855200/p/9948100.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!