关于微吼直播的对接
先看一下效果图
由于页面未开启直播状态，所以展示的效果如下
js库的依赖
注意 ：这里如果不想使用后端的接口，前端加密的的使用MD5加密，所以 需要安装MD5加密，本文是前端使用MD5进行了加密
npm install md5 --save
<script src="http://cnstatic01.e.vhall.com/3rdlibs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://cnstatic01.e.vhall.com/jssdk/dist/2.6.8/vhallSDK.js"></script>
初始化播放器
initVideo(){
//这路获取登陆人的账号信息，我的登陆信息是本都缓存的
var token=JSON.parse(localStorage.getItem('token'))
var that=this;
// var account=token.phone//账号
var account=token.phone//账号
var userName="游客**"+token.phone.substring(7)//用户名
const AppKey = '你的appKey';//在后台账号管路中查看
const SecretKey = '你的seceekey';//后台管路账号可查看
//获取直播间的房间号
let roomid=”12345678''//房间号
let eMail="123@qq.com"//电子邮件 可选，但是必须填写一个不然下面md5加密会报错
//获取时间戳
let signedat = new Date().getTime();//当前时间戳
let sign = `${SecretKey}account${account}app_key${AppKey}email${eMail}roomid${roomid}signedat${signedat}username${userName}${SecretKey}`//签名
console.log(sign)
//这里使用md5加密
let signMd5 = md5(sign);//md5加密
//2 前端使用md5编码生成sign参数值
var params={
account :account,//必填，唯一用户id，与使用第三方创建用户接口所传的third_user_id需一致）
username : userName,//必填，用户昵称用以在各模块中显示
roomid :roomid,//必填，当前聊天所在活动id
app_key :AppKey,//必填，启用服务唯一验证，API/SDK权限申请后生成,此参数名在1.0.0版本中为appkey，使用当前版本时请更新
signedat :signedat,//必填，启用服务唯一验证，unix时间戳
sign :signMd5,//必填，启用服务唯一验证，有效期一小时，见下面的生成规则
email : eMail,//非必填，当前版本已不建议使用
facedom :'#face',可选，当使用微吼表情时必填，呼出表情弹窗dom属性 如（'#id','.class'等）
textdom : '#mywords',//可选，当使用微吼表情时必填，插入表情文本dom属性 如（'#id','.class'等）
videoContent : '#videoId',//必填，当需要使用视频模块时，插入视频dom属性 如（flash:'#id','.class'等, H5:只支持使用id）
// docContent: '#docId',//可选，当需要使用文档模块时，插入视频dom属性 如（'#id','.class'等）
x5_video_type: 'h5', //非必填，启用腾讯Ｈ5同层播放器，V2.3.5及之后版本支持
x5_video_fullscreen: 'true', //非必填,字符串，启用腾讯Ｈ5全屏方式，V2.3.5及之后版本支持
protocol:'https', //非必填,字符串 默认自适应当前url协议，支持手动指定http和https
// wrapper:"#board-container", //H5文档播放器容器
};
//初始化直播
VHALL_SDK.init(params)
//初始化错误回调
VHALL_SDK.on('error', function(msg) {
console.log(msg);
})
//初始成功准备完成
VHALL_SDK.on('ready', function() {
console.log("准备就绪")
//获取当前登录的用户信息
that.currentUser= VHALL_SDK.getUserinfo()
/**
* {
* avatar:"//cnstatic01.e.vhall.com/static/images/watch/head50.png" //头像
* forbidchat:"" //0:未开启全员禁言，1：已开启全员禁言
* is_gag:0 //0：未禁言，1：禁言
* is_kickout:0 //0：未踢出，1：踢出
* role:"user"//用户角色
* userid:"用户参会id"
* username:"昵称"
* }
*/
// VHALL_SDK.getRoominfo();
console.log( VHALL_SDK.getRoominfo())
//m默认初始话的点击
that.tabClick({type:"chat"})
/**
* {
* type: 1 // 1：活动直播中，2：预约中，3：活动结束
* openQuestion : 1 //1: 开启，0 || ''：关闭
* }
*/
});
VHALL_SDK.on('publishStart', function(msg) {
console.log('活动开始推流');
this.saveLog(3)
this.saveLog(1,60,true)
});
VHALL_SDK.on('streamOver', function(msg) {
console.log('活动已结束');
if(that.timer){
clearTimeout(that.timer)
}
this.saveLog(1,60,false)
});
/**
* [chatMsg 直播收到聊天消息]
* @param {[type]} msg [object]
*/
VHALL_SDK.on('chatMsg', function(msg) {
console.log(msg)
that.chatArr.unshift(msg)
});
VHALL_SDK.on('sendChat', function (msg) {
console.log(msg)
this.chatArr.unshift(msg)
});
//用户上线
VHALL_SDK.on('userOnline', function(msg) {
console.log(msg);
});
//获取到试试的公告信息的时候
VHALL_SDK.on('announcement', function(msg) {
that.getNoticeMessage()
});
},
获取直播的聊天信息
//获取历史的聊天信息
getHisMessage(){
if (VHALL_SDK.getRoominfo().type == 1) {
//当前直播中
VHALL_SDK.vhall_get_live_history_chat_msg().then((res) => {
if(res.code==200){
this.chatArr=res.data
}
})
}else{
//获取历史的聊天记录
VHALL_SDK.vhall_get_record_history_chat_msg().then((res) => {
console.log('-----promise历史聊天记录-----')
if(res.code==200){
this.chatArr=res.data
}
})
}
//滚动到最底部
this.scrollTobottom()
},
获取问答记录信息
//获取问答列表
getQuestionMessage(){
if (VHALL_SDK.getRoominfo().type == 1) {
//当前直播中
if (VHALL_SDK.getRoominfo().openQuestion == 1) {
VHALL_SDK.vhall_get_live_history_question_msg().then((res) => {
console.log('-----promise获取直播问答记录-----')
console.log(res)
this.questionArr=res.data
})
}else{
this.vueTool.showToast("暂未开始直播问答")
}
}else{
//非直播中获取
if(VHALL_SDK.getRoominfo().openQuestion == 1){
VHALL_SDK.vhall_get_history_question_msg().then((res) => {
console.log('-----promise历史聊天记录-----')
console.log(res)
this.questionArr=res.data
})
}else{
this.vueTool.showToast("暂未开始直播问答")
}
}
this.scrollTobottom()
},
获取公告列表信息
getNoticeMessage(){
if(VHALL_SDK.getRoominfo().type == 1){
VHALL_SDK.vhall_get_history_notice().then(res=>{
console.log(res)
if(res.code==200){
this.noticeArr=res.data.data
}
})
}
this.scrollTobottom()
},
发送弹幕
tosendDM(){
this.danmuShow = false
this.checked = !this.checked
console.log(this.dmvalue)
VHALL_SDK.player.sendBarrage(this.dmvalue)
this.dmvalue=""
},
关闭或开启弹幕
openAndCloseDM(){
console.log(this.checked)
this.checked = !this.checked
this.dmvalue = ''
if(this.checked){
// this.autofocus = true
// window.addEventListener('load',load, false);
this.danmuShow = true
console.log(this.$refs)
// this.$refs.danmuVal.focus()
VHALL_SDK.player.openBarrage()
}else{
this.danmuShow = false
VHALL_SDK.player.closeBarrage()
}
},
发送聊天信息和公告
toSendMessage(){
if(!this.message){
return
}
if(this.activeIndex==='chat'){
console.log(this.currentUser)
var msg = VHALL_SDK.sendChat({
text: this.message
});
this.chatArr.unshift(msg)
// this.chatArr.unshift({
// content:this.message,
// time:toolUtils.timecNow(),
// user_name:this.currentUser.username,
// avatar:this.currentUser.avatar
// })
}
if(this.activeIndex==='question'){
var msg = VHALL_SDK.sendQuestion({text:this.message})
console.log(msg)
this.questionArr.unshift(msg)
}
this.message=""
this.scrollTobottom()
},
今天的文章记录-关于微吼直播的对接分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/60329.html
