使用插件:
xgplayer
IM SDK
下载:
npm install xgplayer
import "xgplayer";
import HlsJsPlayer from "xgplayer-hls.js";
// IM Web SDK
npm install tim-js-sdk --save
// 发送图片、文件等消息需要的 COS SDK
npm install cos-js-sdk-v5 --save
import TIM from 'tim-js-sdk';
import COS from "cos-js-sdk-v5";
重点:
一、首先
//创建 SDK 实例
let tim = TIM.create({
SDKAppID: 1400261558
});
//注册 COS SDK 插件
tim.registerPlugin({
"cos-js-sdk": COSSDK
});
data() {
return {
// 播放器实例
player: null,
// 播放器地址
videoUrl: "",
// tim 用户id
timId: "",
// tim 用户sig
timSig: "",
// 聊天室ID
groupId: 0,
// 聊天数据
messageList: [],
// 主播名称
playerName: "",
// 观看量
watch: 0,
// 主播头像
avatar: ""
};
},
mounted() {
this.getData(window.location.search);
},
//获取视频数据和 IM用到的数据
// 获取数据
getData(data) {
this.$http
.getPlayerDetail(`${data}`)
.then(Response => {
// console.log(Response.data);
if (Response.code === this.$http_status.success) {
this.videoUrl = Response.data.m3u8;
this.timId = Response.data.uid;
this.timSig = Response.data.userSig;
this.groupId = Response.data.group_roomid;
this.timLogin();
this.playerInit();
this.playerName = Response.data.nickName;
this.watch = Response.data.watchNum;
this.avatar = Response.data.head;
} else if (Response.code === this.$http_status.error) {
alert("主播还没开播");
this.$router.push({ path: "/player-list" });
}
})
.catch(error => {
console.log(error);
});
},
//获取游客ID和用户登录即时通信 IM 的密码--timSing
// 获取游客tim账号
getVisitor() {
this.$http
.getVisitor()
.then(Response => {
if (Response.code === this.$http_status.success) {
this.timId = Response.data.uid;
this.timSig = Response.data.userSig;
//游客登录
this.timInit();
}
})
.catch(error => {
console.log(error);
});
},
// IM登录--用户登录 IM SDK 才能正常收发消息,登录需要用户提供 UserID、UserSig 等信息
timLogin() {
tim
.login({
userID: this.timId,
userSig: this.timSig
})
.then(res => {
console.log("登录成功: ", res);
this.timListener();
})
//登录失败的消息
.catch(imError => {
if (imError.code === 2000) {
console.error(imError.message + ", 请检查是否正确填写了 SDKAPPID");
} else {
console.error(imError.message);
}
});
},
//登录之后通过监听事件TIM.EVENT.SDK_READY ,获取 SDK 状态。
// IM监听
timListener() {
// 登录成功后会触发 SDK_READY 事件,该事件触发后,可正常使用 SDK 接口
//onReadyStateUpdate 加群组事件
tim.on(TIM.EVENT.SDK_READY, this.onReadyStateUpdate, this);
// 收到新消息--onReceiveMessage事件
tim.on(TIM.EVENT.MESSAGE_RECEIVED, this.onReceiveMessage);
},
//登录成功之后触发加群组事件
// 登录成功触发
onReadyStateUpdate() {
console.log("登录成功监听", this.groupId);
// 加群
tim.joinGroup({ groupID: this.groupId, type: "AVChatRoom" }).then(res => {
if (res.data.status === "JoinedSuccess") {
console.log("加群成功", res);
}
});
tim.getGroupList().then(res => {
console.log("群组:", res);
});
},
//触发接收新消息事件
// 收到消息触发
onReceiveMessage(data) {
console.log("收到消息:", data.data[0]);
if (data.data[0].type === "TIMCustomElem") {
let eleData = JSON.parse(data.data[0].payload.data);
if (eleData.head.cmd === 6) {
this.updateMessageList(eleData);
}
}
},
//消息更新事件
// 更新数据
updateMessageList(data) {
this.messageList = [...this.messageList, data];
},
二、视频部分
//定义视频
// 定义videojs
playerInit() {
this.player = new HlsJsPlayer({
id: "video",
useHls: true,
url: this.videoUrl,
autoplay: true,
//开启ios和微信的内联模式
playsinline: true,
//适配屏幕
height: window.innerHeight,
width: window.innerWidth,
//配置项关闭
ignores: ["mobile"],
controls: false,
"x5-video-player-type": "h5",
//自适应视频内容宽高
fitVideoSize: "auto"
});
},
// 点击提示下载app
vjsClickTip() {
if (
confirm("此功能仅对APP开放,首次到应用市场下载“翠叮当APP“送1000元红包")
) {
this.$router.push({ path: `/down-app` });
}
},
// 点击关闭
closeClick() {
this.$router.push({ path: "/player-list" });
},
三、页面部分
<template>
<div class="player-detail">
<div id="video"></div>
<div class="vjs-top-layout">
<img @click="closeClick" class="vjs-close-img" src="@/images/close.png" />
<div class="vjs-liver-info">
<img @click="vjsClickTip" id="vjsAvatar" class="vjs-liver-avatar" :src="imgUrl + avatar" />
<div @click="vjsClickTip" class="vjs-liver-user-info">
<span id="vjsName" class="vjs-liver-user-name">{{playerName}}</span>
<span id="vjsWatchNumber" class="vjs-liver-watch-number">观看:{{watch}}</span>
</div>
<div class="vjs-liver-follow" @click="vjsClickTip">关注</div>
</div>
<div @click="vjsClickTip" class="vjs-tsjy">投诉建议</div>
<img class="vjs-logo-img" src="http://zy.cuidingdang.xyz/FqJOczXooh2d9KXXyxB63Kd1pwfL" />
</div>
<div class="vjs-bottom-layout">
<input @click="vjsClickTip" disabled type="text" class="vjs-tim-input" placeholder="说点什么吧..." />
<div class="vjs-icons">
<span @click="vjsClickTip" class="vjs-icons-span">
<img class="vjs-icon-img" src="http://zy.cuidingdang.xyz/Fu0nJx1tKUqjKBkteCGOjIh6PGLt" />
</span>
<span @click="vjsClickTip" class="vjs-icons-span">
<img class="vjs-icon-img" src="http://zy.cuidingdang.xyz/FnwHVndk2DGxCsSQBz2dOxeoFUSs" />
</span>
<span @click="vjsClickTip" class="vjs-icons-span">
<img class="vjs-icon-img" src="http://zy.cuidingdang.xyz/Flar9ZXS56kK8MIeSKY3aOkpvw4O" />
</span>
<span @click="vjsClickTip" class="vjs-icons-span">
<img class="vjs-icon-img" src="http://zy.cuidingdang.xyz/FkTvyrOkfC8_0J9VTauqmLUF-gN0" />
</span>
</div>
</div>
<div id="timMessageBox" class="vjs-message-box">
<div class="vjs-message-list" v-for="(item, index) in messageList" :key="index">
<div class="vjs-message-item">
<div class="vjs-message-user">{{item.head.user.id}}:</div>
<div class="vjs-message-content">{{item.body.msg}}</div>
</div>
</div>
</div>
</div>
</template>
来源:CSDN
作者:丑下去
链接:https://blog.csdn.net/YiMiMMMi/article/details/103833357