前端直播功能开发总结

久未见 提交于 2020-03-09 14:16:34

这里直播还是用的第三方的集成:视频用的是七牛云的集成,聊天用的是融云。图玩智能科技提供免费的直播源码,详情请登录www.toivan.com.

一、直播功能(七牛云)

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

https://developer.qiniu.com/pili/manual/1221/the-console-quick-start

这里前端功能没什么可说的,文档中都写的很详细。

我这里用的前端播放器是videojs,引入相关的jscss,只需要简单的设置就可以:

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);

}

});

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!