使用插件:
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" });
},
三、页面部分
关注
投诉建议