|
|
@@ -64,9 +64,7 @@
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="mobile" label="手机号" width="250">
|
|
|
<template slot-scope="scope">
|
|
|
- <span
|
|
|
- >{{ scope.row.mobile || "无" }}</span
|
|
|
- >
|
|
|
+ <span>{{ scope.row.mobile || '无' }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
@@ -404,8 +402,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { color } from "highcharts";
|
|
|
-import { ZegoExpressEngine } from "zego-express-engine-webrtc";
|
|
|
+import { mapState, mapMutations } from 'vuex';
|
|
|
+import { color } from 'highcharts';
|
|
|
+import { ZegoExpressEngine } from 'zego-express-engine-webrtc';
|
|
|
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
@@ -416,21 +415,21 @@ export default {
|
|
|
fullHeight: document.documentElement.clientHeight - 116, //
|
|
|
|
|
|
// 搜索
|
|
|
- nameVal: "",
|
|
|
- phoneVal: "",
|
|
|
+ nameVal: '',
|
|
|
+ phoneVal: '',
|
|
|
|
|
|
// 表格
|
|
|
tableData: [],
|
|
|
websockMsgList: [], // websocket传递来的数组数据
|
|
|
loading: false, // 加载
|
|
|
- org_id: "", //组织id
|
|
|
+ org_id: '', //组织id
|
|
|
|
|
|
// 树形图
|
|
|
data: [],
|
|
|
loading2: false,
|
|
|
defaultProps: {
|
|
|
- children: "childrens",
|
|
|
- label: "org_name",
|
|
|
+ children: 'childrens',
|
|
|
+ label: 'org_name'
|
|
|
},
|
|
|
|
|
|
// 分页
|
|
|
@@ -438,8 +437,8 @@ export default {
|
|
|
page: 1,
|
|
|
|
|
|
// 视频通话弹框
|
|
|
- idName: "remoteVideo", // ref 副视频
|
|
|
- idName1: "localVideo", // ref 主视频
|
|
|
+ idName: 'remoteVideo', // ref 副视频
|
|
|
+ idName1: 'localVideo', // ref 主视频
|
|
|
videoVisible: false,
|
|
|
videoShow: true, //主视频是否展示画面
|
|
|
audioShow: true, // 判断当前是语音通话还是视频通话 true为视频 false为语音
|
|
|
@@ -449,23 +448,23 @@ export default {
|
|
|
appID: 3215939266, //项目唯一标识 AppID
|
|
|
// server: "1e8344b2a193220e5e96338ba53c3dcc", // 接入服务器地址Server
|
|
|
// videoUrl: "wss://webliveroom2672645646-api.imzego.com/ws", // 请求 - 测试
|
|
|
- videoUrl: "wss://webliveroom3215939266-api.imzego.com/ws", // 请求 - 正式
|
|
|
+ videoUrl: 'wss://webliveroom3215939266-api.imzego.com/ws', // 请求 - 正式
|
|
|
zg: null,
|
|
|
// UserID: "sample" + Math.floor(Math.random() * 10000000000000).toString(),
|
|
|
- UserID: "user00002",
|
|
|
+ UserID: 'user00002',
|
|
|
// UserID: "168",
|
|
|
// StreamID: "web-4796754531236",
|
|
|
- StreamID: "web-" + Math.floor(Math.random() * 10000000000000).toString(),
|
|
|
+ StreamID: 'web-' + Math.floor(Math.random() * 10000000000000).toString(),
|
|
|
localStream: null,
|
|
|
- Token: "",
|
|
|
- RoomID: "",
|
|
|
- videoTle: "正在和云飞-卢万里视频通话",
|
|
|
+ Token: '',
|
|
|
+ RoomID: '',
|
|
|
+ videoTle: '正在和云飞-卢万里视频通话',
|
|
|
timer: null, // 接听
|
|
|
|
|
|
// 文本聊天框
|
|
|
- tltData: "",
|
|
|
+ tltData: '',
|
|
|
dialogVisible: false,
|
|
|
- input: "", //发送框
|
|
|
+ input: '', //发送框
|
|
|
iconShow: true,
|
|
|
// 文本消息功能
|
|
|
url:
|
|
|
@@ -473,11 +472,11 @@ export default {
|
|
|
// "ws" +
|
|
|
// "https" +
|
|
|
this.$wsUrl +
|
|
|
- "/api/api_gateway?method=control_center.real_time.im_message",
|
|
|
+ '/api/api_gateway?method=control_center.real_time.im_message',
|
|
|
websock: null,
|
|
|
getUserObj: {}, // 获取到当前点击的行数据
|
|
|
msgList: [], //当前点击的账号消息列表
|
|
|
- userName: "",
|
|
|
+ userName: '',
|
|
|
|
|
|
// 心跳、重连机制
|
|
|
ws: null, //建立的连接
|
|
|
@@ -495,10 +494,16 @@ export default {
|
|
|
|
|
|
// 消息发送加载
|
|
|
msgSetTime: null,
|
|
|
+ socketTimeoutLogs: []
|
|
|
};
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
- computed: {},
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ isVideoCallRefused: state => state.isVideoCallRefused,
|
|
|
+ isVideoTalking: state => state.isVideoTalking
|
|
|
+ })
|
|
|
+ },
|
|
|
//监控data中的数据变化
|
|
|
watch: {
|
|
|
fullHeight(val) {
|
|
|
@@ -507,7 +512,7 @@ export default {
|
|
|
this.fullHeight = val;
|
|
|
this.timer = true;
|
|
|
let that = this;
|
|
|
- setTimeout(function () {
|
|
|
+ setTimeout(function() {
|
|
|
//防止过度调用监测事件,导致卡顿
|
|
|
that.timer = false;
|
|
|
}, 400);
|
|
|
@@ -518,7 +523,7 @@ export default {
|
|
|
msgList(val) {
|
|
|
// 实现打开聊天框后滚动条定位到最下方
|
|
|
this.$nextTick(() => {
|
|
|
- var div = document.getElementById("msgBox");
|
|
|
+ var div = document.getElementById('msgBox');
|
|
|
div.scrollTop = div.scrollHeight;
|
|
|
});
|
|
|
},
|
|
|
@@ -551,7 +556,7 @@ export default {
|
|
|
sdjaks.unread !== 0 &&
|
|
|
sdjaks.unread
|
|
|
) {
|
|
|
- this.tableData[i]["unread"] = sdjaks.unread;
|
|
|
+ this.tableData[i]['unread'] = sdjaks.unread;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -561,7 +566,7 @@ export default {
|
|
|
// websocket列表变化
|
|
|
websockMsgList(val) {
|
|
|
console.log(
|
|
|
- "-----------------有变化了啊---------------------------",
|
|
|
+ '-----------------有变化了啊---------------------------',
|
|
|
val
|
|
|
);
|
|
|
// var that = this
|
|
|
@@ -576,9 +581,27 @@ export default {
|
|
|
// }
|
|
|
this.userListData(); // 获取右侧用户列表
|
|
|
},
|
|
|
+ isVideoCallRefused(val) {
|
|
|
+ console.warn(val, 'isVideoCallRefused video');
|
|
|
+ if (val) {
|
|
|
+ this.$message({
|
|
|
+ message: '对方正忙,请稍后再试!',
|
|
|
+ type: 'warning',
|
|
|
+ duration: 1500
|
|
|
+ });
|
|
|
+
|
|
|
+ this.notLogin();
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
+ ...mapMutations([
|
|
|
+ 'updateVideoSelfRoomInfo',
|
|
|
+ 'updateIsRefusedCall',
|
|
|
+ 'updateVideoInfo',
|
|
|
+ 'updateTalkingStatus'
|
|
|
+ ]),
|
|
|
//动态获取浏览器高度
|
|
|
get_boderHeight() {
|
|
|
const that = this;
|
|
|
@@ -614,26 +637,26 @@ export default {
|
|
|
// 获取左侧组织列表
|
|
|
organizationData() {
|
|
|
this.$axios({
|
|
|
- method: "POST",
|
|
|
- url: "/api/api_gateway?method=sysmenage.usermanager.org_list",
|
|
|
+ method: 'POST',
|
|
|
+ url: '/api/api_gateway?method=sysmenage.usermanager.org_list',
|
|
|
data: this.qs.stringify({
|
|
|
page: this.page,
|
|
|
- page_item: "100000000",
|
|
|
- org_name: "",
|
|
|
- }),
|
|
|
+ page_item: '100000000',
|
|
|
+ org_name: ''
|
|
|
+ })
|
|
|
})
|
|
|
- .then((res) => {
|
|
|
+ .then(res => {
|
|
|
if (res.data.data.page_list.length !== 0) {
|
|
|
var obj = {
|
|
|
- org_name: "全部",
|
|
|
- id: "",
|
|
|
+ org_name: '全部',
|
|
|
+ id: ''
|
|
|
};
|
|
|
var data = res.data.data.page_list;
|
|
|
this.data = [obj, ...data]; // 左侧组织列表
|
|
|
}
|
|
|
this.loading2 = false;
|
|
|
})
|
|
|
- .catch((err) => {
|
|
|
+ .catch(err => {
|
|
|
this.loading2 = false;
|
|
|
});
|
|
|
},
|
|
|
@@ -641,17 +664,18 @@ export default {
|
|
|
// 获取右侧用户列表
|
|
|
userListData() {
|
|
|
this.$axios({
|
|
|
- method: "POST",
|
|
|
- url: "/api/api_gateway?method=sysmenage.usermanager.user_list",
|
|
|
+ method: 'POST',
|
|
|
+ url: '/api/api_gateway?method=sysmenage.usermanager.user_list',
|
|
|
data: this.qs.stringify({
|
|
|
page: this.page,
|
|
|
- page_item: "20",
|
|
|
+ page_item: '20',
|
|
|
real_name: this.nameVal, //用户名称
|
|
|
mobile: this.phoneVal, // 电话
|
|
|
org_id: this.org_id,
|
|
|
- }),
|
|
|
+ is_mails: 1
|
|
|
+ })
|
|
|
})
|
|
|
- .then((res) => {
|
|
|
+ .then(res => {
|
|
|
if (res.data.data.total_item !== 0) {
|
|
|
var data = res.data.data.page_list;
|
|
|
var list = [];
|
|
|
@@ -664,7 +688,7 @@ export default {
|
|
|
this.loading = false;
|
|
|
}
|
|
|
})
|
|
|
- .catch((err) => {
|
|
|
+ .catch(err => {
|
|
|
this.loading = false;
|
|
|
});
|
|
|
},
|
|
|
@@ -673,17 +697,17 @@ export default {
|
|
|
msgAxios(data) {
|
|
|
this.getUserObj = data;
|
|
|
this.redtf = data;
|
|
|
- this.userName = localStorage.getItem("usernme");
|
|
|
+ this.userName = localStorage.getItem('usernme');
|
|
|
console.log(this.userName);
|
|
|
- this.tltData = "与" + data.real_name + "的对话";
|
|
|
+ this.tltData = '与' + data.real_name + '的对话';
|
|
|
var obj = {};
|
|
|
obj = {
|
|
|
- action: "list",
|
|
|
+ action: 'list',
|
|
|
recv_user_id: data.user_id,
|
|
|
data: {
|
|
|
msg_status: false,
|
|
|
- msg_info: "",
|
|
|
- },
|
|
|
+ msg_info: ''
|
|
|
+ }
|
|
|
};
|
|
|
this.websock.send(JSON.stringify(obj)); // 获取聊天记录
|
|
|
// var readObj = {};
|
|
|
@@ -702,19 +726,19 @@ export default {
|
|
|
// 视频消息
|
|
|
videoAxios(data) {
|
|
|
this.getUserObj = data;
|
|
|
- this.userName = localStorage.getItem("username");
|
|
|
- this.videoTle = "正在和" + data.real_name + "视频通话";
|
|
|
- this.UserID = localStorage.getItem("userID");
|
|
|
+ this.userName = localStorage.getItem('username');
|
|
|
+ this.videoTle = '正在和' + data.real_name + '视频通话';
|
|
|
+ this.UserID = localStorage.getItem('userID');
|
|
|
|
|
|
// 先获取当前用户的房间号和登录所需的Token
|
|
|
var obj = {};
|
|
|
obj = {
|
|
|
- action: "send_video",
|
|
|
+ action: 'send_video',
|
|
|
recv_user_id: data.user_id,
|
|
|
data: {
|
|
|
msg_status: false,
|
|
|
- msg_info: "",
|
|
|
- },
|
|
|
+ msg_info: ''
|
|
|
+ }
|
|
|
};
|
|
|
// console.log('gdahjdgjasgd', data.user_id)
|
|
|
this.websock.send(JSON.stringify(obj));
|
|
|
@@ -741,7 +765,7 @@ export default {
|
|
|
this.camera = true;
|
|
|
const localStream = await this.zg.createStream();
|
|
|
// stream 为 MediaStream 对象,开发者可通过赋值给 video 或 audio 的 srcObject 属性进行渲染
|
|
|
- this.$refs["localVideo"].srcObject = localStream;
|
|
|
+ this.$refs['localVideo'].srcObject = localStream;
|
|
|
this.localStream = localStream;
|
|
|
// localStream 为创建流获取的 MediaStream 对象
|
|
|
this.zg.startPublishingStream(this.StreamID, localStream);
|
|
|
@@ -755,10 +779,13 @@ export default {
|
|
|
},
|
|
|
// 拉流
|
|
|
async tensile(streamID) {
|
|
|
- var playOption = {videoDecodeType: 'H264', playType:'video'}
|
|
|
- const remoteStream = await this.zg.startPlayingStream(streamID, playOption);
|
|
|
+ var playOption = { videoDecodeType: 'H264', playType: 'video' };
|
|
|
+ const remoteStream = await this.zg.startPlayingStream(
|
|
|
+ streamID,
|
|
|
+ playOption
|
|
|
+ );
|
|
|
// remoteVideo 为本地 <video> 或 <audio> 对象
|
|
|
- this.$refs["remoteVideo"].srcObject = remoteStream;
|
|
|
+ this.$refs['remoteVideo'].srcObject = remoteStream;
|
|
|
},
|
|
|
notTensile(streamID) {
|
|
|
this.zg.stopPlayingStream(streamID);
|
|
|
@@ -768,13 +795,15 @@ export default {
|
|
|
switchWindow() {
|
|
|
// 副视频画面 remoteVideo
|
|
|
// 主视频画面 localVideo
|
|
|
- this.idName = this.idName == "remoteVideo" ? "localVideo" : "remoteVideo";
|
|
|
+ this.idName = this.idName == 'remoteVideo' ? 'localVideo' : 'remoteVideo';
|
|
|
this.idName =
|
|
|
- this.idName1 == "remoteVideo" ? "localVideo" : "remoteVideo";
|
|
|
+ this.idName1 == 'remoteVideo' ? 'localVideo' : 'remoteVideo';
|
|
|
},
|
|
|
|
|
|
// 退出房间
|
|
|
notLogin() {
|
|
|
+ this.updateTalkingStatus(false);
|
|
|
+ this.updateIsRefusedCall(false);
|
|
|
clearTimeout(this.timer);
|
|
|
this.zg.logoutRoom(this.RoomID);
|
|
|
this.videoVisible = false;
|
|
|
@@ -783,51 +812,51 @@ export default {
|
|
|
// 当音视频通话关闭时的回调
|
|
|
handleClose(done) {
|
|
|
var that = this;
|
|
|
- this.$confirm("目前正在音视频通话中,确认关闭?")
|
|
|
- .then((_) => {
|
|
|
+ this.$confirm('目前正在音视频通话中,确认关闭?')
|
|
|
+ .then(_ => {
|
|
|
done();
|
|
|
that.notLogin(); // 退出房间
|
|
|
})
|
|
|
- .catch((_) => {});
|
|
|
+ .catch(_ => {});
|
|
|
},
|
|
|
|
|
|
// 发送消息
|
|
|
async submit() {
|
|
|
- if (this.input.split(" ").join("").length == 0) {
|
|
|
- if (document.getElementsByClassName("el-message").length == 0) {
|
|
|
+ if (this.input.split(' ').join('').length == 0) {
|
|
|
+ if (document.getElementsByClassName('el-message').length == 0) {
|
|
|
this.$message({
|
|
|
- message: "不能发送空白消息!",
|
|
|
- type: "warning",
|
|
|
- duration: 1500,
|
|
|
+ message: '不能发送空白消息!',
|
|
|
+ type: 'warning',
|
|
|
+ duration: 1500
|
|
|
});
|
|
|
}
|
|
|
- this.input = "";
|
|
|
+ this.input = '';
|
|
|
} else {
|
|
|
try {
|
|
|
var obj = {};
|
|
|
obj = {
|
|
|
- action: "send",
|
|
|
+ action: 'send',
|
|
|
recv_user_id: this.getUserObj.user_id,
|
|
|
data: {
|
|
|
msg_status: false,
|
|
|
- msg_info: this.input,
|
|
|
- },
|
|
|
+ msg_info: this.input
|
|
|
+ }
|
|
|
};
|
|
|
var v = JSON.stringify(obj);
|
|
|
this.websock.send(v);
|
|
|
- this.input = "";
|
|
|
+ this.input = '';
|
|
|
this.msgSetTime = setTimeout(() => {
|
|
|
// 设定十秒内没有接收到服务器返回的list数据就表明消息没有发送成
|
|
|
- if (document.getElementsByClassName("el-message").length == 0) {
|
|
|
+ if (document.getElementsByClassName('el-message').length == 0) {
|
|
|
this.$message({
|
|
|
- message: "消息发送失败,请刷新界面重试!",
|
|
|
- type: "warning",
|
|
|
- duration: 1500,
|
|
|
+ message: '消息发送失败,请刷新界面重试!',
|
|
|
+ type: 'warning',
|
|
|
+ duration: 1500
|
|
|
});
|
|
|
}
|
|
|
- },10000)
|
|
|
+ }, 10000);
|
|
|
} catch (error) {
|
|
|
- console.log(">>> sendMsg, error: ", error);
|
|
|
+ console.log('>>> sendMsg, error: ', error);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -836,7 +865,7 @@ export default {
|
|
|
pushKeyword(event) {
|
|
|
if (event.keyCode === 13) {
|
|
|
event.preventDefault(); // 阻止浏览器默认换行操作
|
|
|
- this.keyword = "";
|
|
|
+ this.keyword = '';
|
|
|
return false;
|
|
|
}
|
|
|
},
|
|
|
@@ -847,24 +876,24 @@ export default {
|
|
|
// 文本消息功能初始化
|
|
|
async msgInit() {
|
|
|
var that = this;
|
|
|
- if (typeof WebSocket === "undefined") {
|
|
|
- alert("您的浏览器不支持socket!");
|
|
|
+ if (typeof WebSocket === 'undefined') {
|
|
|
+ alert('您的浏览器不支持socket!');
|
|
|
} else {
|
|
|
this.websock = new window.WebSocket(
|
|
|
- this.url + "&token=" + localStorage.getItem("session")
|
|
|
+ this.url + '&token=' + localStorage.getItem('session')
|
|
|
);
|
|
|
- this.websock.onopen = (event) => {
|
|
|
- console.log("WebSocket:已连接");
|
|
|
+ this.websock.onopen = event => {
|
|
|
+ console.log('WebSocket:已连接');
|
|
|
console.log(event);
|
|
|
// 发送消息 - 获取对话列表
|
|
|
var obj1 = {};
|
|
|
obj1 = {
|
|
|
- action: "list",
|
|
|
- recv_user_id: "",
|
|
|
+ action: 'list',
|
|
|
+ recv_user_id: '',
|
|
|
data: {
|
|
|
msg_status: false,
|
|
|
- msg_info: "",
|
|
|
- },
|
|
|
+ msg_info: ''
|
|
|
+ }
|
|
|
};
|
|
|
this.start(); //开启心跳
|
|
|
if (this.fullscreenLoading !== null) {
|
|
|
@@ -872,11 +901,11 @@ export default {
|
|
|
}
|
|
|
// this.fullscreenLoading.close(); // 加载关闭
|
|
|
};
|
|
|
- this.websock.onmessage = (event) => {
|
|
|
+ this.websock.onmessage = event => {
|
|
|
var data = JSON.parse(event.data);
|
|
|
- console.log("WebSocket:消息---------------------------", data);
|
|
|
+ console.log('WebSocket:消息---------------------------', data);
|
|
|
|
|
|
- if (data.action == "none") {
|
|
|
+ if (data.action == 'none') {
|
|
|
// 获取聊天记录
|
|
|
var datArr = data.data; // 总数据
|
|
|
this.websockMsgList = datArr; // 把数据定义在data中
|
|
|
@@ -894,51 +923,111 @@ export default {
|
|
|
// data.data[0].msg_list = data.data[0].msg_list.reverse();
|
|
|
// this.msgList = data.data[0];
|
|
|
// }
|
|
|
- } else if (data.action == "list") {
|
|
|
- console.log('消息发送成功了----------------------------------')
|
|
|
+ } else if (data.action == 'list') {
|
|
|
+ console.log('消息发送成功了----------------------------------');
|
|
|
clearTimeout(this.msgSetTime); // 清除发送失败定时器
|
|
|
// 返回list为发送消息成功后需要再次调用聊天列表
|
|
|
var obj = {};
|
|
|
obj = {
|
|
|
- action: "list",
|
|
|
+ action: 'list',
|
|
|
// recv_user_id: this.getUserObj.user_id,
|
|
|
- recv_user_id: "",
|
|
|
+ recv_user_id: '',
|
|
|
data: {
|
|
|
msg_status: false,
|
|
|
- msg_info: "",
|
|
|
- },
|
|
|
+ msg_info: ''
|
|
|
+ }
|
|
|
};
|
|
|
this.websock.send(JSON.stringify(obj));
|
|
|
- } else if (data.action == "recv_video") {
|
|
|
+ } else if (data.action == 'recv_video') {
|
|
|
+ console.warn('recv_video', data.data, this.isVideoCallRefused);
|
|
|
+ if (this.isVideoCallRefused) {
|
|
|
+ this.updateIsRefusedCall(false);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.updateIsRefusedCall(false);
|
|
|
+ if (this.isVideoTalking) {
|
|
|
+ // 占线中
|
|
|
+ var obj = {
|
|
|
+ action: 'occupy', // 动作标识,必填
|
|
|
+ recv_user_id: data.data.user_id, // 接收人用户id, 非必填
|
|
|
+ data: {}
|
|
|
+ };
|
|
|
+
|
|
|
+ this.websock.send({
|
|
|
+ data: JSON.stringify(obj),
|
|
|
+ async success(res) {
|
|
|
+ console.warn('占线消息发送成功1111', data.data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
// 获取当前点击用户的房间号以及登录房间所需的Token
|
|
|
// console.log(JSON.parse(event.data));
|
|
|
console.log(data);
|
|
|
var data = JSON.parse(event.data);
|
|
|
this.RoomID = data.data.room_id; // 房间号
|
|
|
this.Token = data.data.room_token; // Token
|
|
|
- // 登录房间
|
|
|
- this.zg
|
|
|
- .loginRoom(
|
|
|
- this.RoomID,
|
|
|
- this.Token,
|
|
|
- { userID: this.UserID, userName: this.UserID },
|
|
|
- { userUpdate: true }
|
|
|
- )
|
|
|
- .then((result) => {
|
|
|
- console.log(result)
|
|
|
- if (result == true) {
|
|
|
- console.log("0000000000000000000000000000000000000登录成功");
|
|
|
- this.plugFlow(); //推流
|
|
|
- this.videoVisible = true;
|
|
|
- }
|
|
|
+
|
|
|
+ //TODO 提示弹窗,确认后登录房间
|
|
|
+ this.$confirm(`${data.data.real_name}邀请你进行视频通话...`)
|
|
|
+ .then(_ => {
|
|
|
+ this.videoTle = '正在和' + data.data.real_name + '视频通话';
|
|
|
+ this.loginRoom();
|
|
|
+ })
|
|
|
+ .catch(_ => {
|
|
|
+ console.log('------------------------ confirm catch', _);
|
|
|
+ const socketData = {
|
|
|
+ action: 'reject_video', // 动作标识,必填
|
|
|
+ recv_user_id: data.data.user_id, // 接收人用户id, 非必填
|
|
|
+ data: {}
|
|
|
+ };
|
|
|
+
|
|
|
+ console.warn('send reject_video', socketData);
|
|
|
+ this.websock.send({
|
|
|
+ data: JSON.stringify(socketData),
|
|
|
+ async success(res) {
|
|
|
+ console.log('reject_video 消息发送成功 reject_video');
|
|
|
+ }
|
|
|
+ });
|
|
|
});
|
|
|
- } else if (data.action == "ok") {
|
|
|
+ //
|
|
|
+ } else if (data.action == 'send_video_rsp') {
|
|
|
+ console.warn('recv_video---------------- response', data.data);
|
|
|
+ if (this.isVideoCallRefused) {
|
|
|
+ this.updateIsRefusedCall(false);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.updateIsRefusedCall(false);
|
|
|
+ this.updateVideoSelfRoomInfo(data.data);
|
|
|
+ this.RoomID = data.data.room_id; // 房间号
|
|
|
+ this.Token = data.data.room_token; // Token
|
|
|
+ console.warn(
|
|
|
+ 'into romm ready ------------------',
|
|
|
+ data.data.room_token
|
|
|
+ );
|
|
|
+ console.warn('into romm ------------------');
|
|
|
+
|
|
|
+ this.updateTalkingStatus(true);
|
|
|
+
|
|
|
+ // 唤起视频弹窗
|
|
|
+ this.loginRoom();
|
|
|
+ } else if (data.action == 'reject_video_rsp') {
|
|
|
+ // 被拒绝后挂断视频通话
|
|
|
+ this.updateIsRefusedCall(true);
|
|
|
+ } else if (data.action == 'occupy_rsp') {
|
|
|
+ console.warn('----------------------- is refused');
|
|
|
+ // 占线中,挂断发起通话
|
|
|
+ this.updateIsRefusedCall(true);
|
|
|
+ } else if (data.action == 'ok') {
|
|
|
// 心跳机制 - 当前状态是websocket连接没有问题
|
|
|
this.start(); // 心跳机制
|
|
|
}
|
|
|
};
|
|
|
- this.websock.onerror = (event) => {
|
|
|
- console.log("WebSocket:发生错误 ");
|
|
|
+ this.websock.onerror = event => {
|
|
|
+ console.log('WebSocket:发生错误 ', Date.now());
|
|
|
+ this.socketTimeoutLogs.push(Date.now());
|
|
|
console.log(event);
|
|
|
if (that.timeoutnum !== null) {
|
|
|
setTimeout(() => {
|
|
|
@@ -948,8 +1037,8 @@ export default {
|
|
|
}, 5000);
|
|
|
}
|
|
|
};
|
|
|
- this.websock.onclose = (event) => {
|
|
|
- console.log("WebSocket:已关闭");
|
|
|
+ this.websock.onclose = event => {
|
|
|
+ console.log('WebSocket:已关闭');
|
|
|
console.log(event);
|
|
|
console.log(that.timeoutnum);
|
|
|
if (that.timeoutnum !== null) {
|
|
|
@@ -963,7 +1052,26 @@ export default {
|
|
|
};
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+ loginRoom() {
|
|
|
+ const userID = localStorage.getItem('userID');
|
|
|
+ console.warn(`userID:${userID};userName:${this.userName}`);
|
|
|
+ // 登录房间
|
|
|
+ this.zg
|
|
|
+ .loginRoom(
|
|
|
+ this.RoomID,
|
|
|
+ this.Token,
|
|
|
+ { userID: userID, userName: this.userName },
|
|
|
+ { userUpdate: true }
|
|
|
+ )
|
|
|
+ .then(result => {
|
|
|
+ console.log(result);
|
|
|
+ if (result == true) {
|
|
|
+ console.log('0000000000000000000000000000000000000登录成功');
|
|
|
+ this.plugFlow(); //推流
|
|
|
+ this.videoVisible = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
// 音视频消息功能初始化
|
|
|
videoInit() {
|
|
|
this.zg = new ZegoExpressEngine(this.appID, this.videoUrl);
|
|
|
@@ -974,100 +1082,100 @@ export default {
|
|
|
soundOn() {
|
|
|
// 房间状态更新回调
|
|
|
this.zg.on(
|
|
|
- "roomStateUpdate",
|
|
|
+ 'roomStateUpdate',
|
|
|
(roomID, state, errorCode, extendedData) => {
|
|
|
- if (state == "CONNECTED") {
|
|
|
+ if (state == 'CONNECTED') {
|
|
|
// 与房间连接成功,只有当房间状态是连接成功时,才能进行推流、拉流等操作。
|
|
|
// 接下来的“预览并推流”的代码写在这里
|
|
|
- console.log("房间连接成功");
|
|
|
+ console.log('房间连接成功');
|
|
|
//定时器
|
|
|
this.timer = setTimeout(() => {
|
|
|
- if (document.getElementsByClassName("el-message").length == 0) {
|
|
|
+ if (document.getElementsByClassName('el-message').length == 0) {
|
|
|
this.$message({
|
|
|
- message: "没人接听,请稍后重试",
|
|
|
- type: "warning",
|
|
|
- duration: 2500,
|
|
|
+ message: '没人接听,请稍后重试',
|
|
|
+ type: 'warning',
|
|
|
+ duration: 2500
|
|
|
});
|
|
|
}
|
|
|
this.videoVisible = false;
|
|
|
// }, 5000);
|
|
|
}, 30000);
|
|
|
}
|
|
|
- if (state == "DISCONNECTED") {
|
|
|
+ if (state == 'DISCONNECTED') {
|
|
|
// 与房间断开了连接
|
|
|
- console.log("与房间断开连接");
|
|
|
+ console.log('与房间断开连接');
|
|
|
}
|
|
|
|
|
|
- if (state == "CONNECTING") {
|
|
|
+ if (state == 'CONNECTING') {
|
|
|
// 与房间尝试连接中
|
|
|
- console.log("与房间尝试连接中");
|
|
|
+ console.log('与房间尝试连接中');
|
|
|
}
|
|
|
}
|
|
|
);
|
|
|
|
|
|
- this.zg.on("roomUserUpdate", (roomID, updateType, userList) => {
|
|
|
+ this.zg.on('roomUserUpdate', (roomID, updateType, userList) => {
|
|
|
// 其他用户进出房间的通知
|
|
|
console.log(updateType);
|
|
|
console.log(userList);
|
|
|
- console.log("有其他用户进出房间");
|
|
|
+ console.log('有其他用户进出房间');
|
|
|
|
|
|
- if (updateType == "DELETE") {
|
|
|
- if (document.getElementsByClassName("el-message").length == 0) {
|
|
|
+ if (updateType == 'DELETE') {
|
|
|
+ if (document.getElementsByClassName('el-message').length == 0) {
|
|
|
this.$message({
|
|
|
- message: "对方已挂断,结束通话!",
|
|
|
- type: "warning",
|
|
|
- duration: 1500,
|
|
|
+ message: '对方已挂断,结束通话!',
|
|
|
+ type: 'warning',
|
|
|
+ duration: 1500
|
|
|
});
|
|
|
}
|
|
|
setTimeout(() => {
|
|
|
this.notLogin(); // 退出房间
|
|
|
}, 2000);
|
|
|
- } else if (updateType == "ADD") {
|
|
|
+ } else if (updateType == 'ADD') {
|
|
|
clearTimeout(this.timer); // 关闭无人接听回调
|
|
|
}
|
|
|
});
|
|
|
|
|
|
this.zg.on(
|
|
|
- "roomStreamUpdate",
|
|
|
+ 'roomStreamUpdate',
|
|
|
async (roomID, updateType, streamList, extendedData) => {
|
|
|
console.log(roomID);
|
|
|
console.log(updateType);
|
|
|
console.log(streamList);
|
|
|
console.log(extendedData);
|
|
|
// 房间内其他用户音视频流变化的通知
|
|
|
- console.log("有其他用户开启或关闭音频");
|
|
|
- if (updateType == "ADD") {
|
|
|
+ console.log('有其他用户开启或关闭音频');
|
|
|
+ if (updateType == 'ADD') {
|
|
|
// 流新增,开始拉流
|
|
|
- console.log('这是拉流的ID', streamList)
|
|
|
+ console.log('这是拉流的ID', streamList);
|
|
|
this.tensile(streamList[0].streamID);
|
|
|
- } else if (updateType == "DELETE") {
|
|
|
+ } else if (updateType == 'DELETE') {
|
|
|
// 流删除,停止拉流
|
|
|
this.notTensile(streamList[0].streamID);
|
|
|
}
|
|
|
}
|
|
|
);
|
|
|
|
|
|
- this.zg.on("publisherStateUpdate", (result) => {
|
|
|
+ this.zg.on('publisherStateUpdate', result => {
|
|
|
// 推流状态更新回调
|
|
|
- console.log("推流状态更新");
|
|
|
+ console.log('推流状态更新');
|
|
|
console.log(result);
|
|
|
});
|
|
|
|
|
|
- this.zg.on("publishQualityUpdate", (streamID, stats) => {
|
|
|
+ this.zg.on('publishQualityUpdate', (streamID, stats) => {
|
|
|
// 推流质量回调
|
|
|
- console.log("推流质量更新");
|
|
|
+ console.log('推流质量更新');
|
|
|
console.log(streamID, stats);
|
|
|
});
|
|
|
|
|
|
- this.zg.on("playerStateUpdate", (result) => {
|
|
|
+ this.zg.on('playerStateUpdate', result => {
|
|
|
// 拉流状态回调
|
|
|
- console.log("拉流状态的回调");
|
|
|
+ console.log('拉流状态的回调');
|
|
|
console.log(result);
|
|
|
});
|
|
|
|
|
|
- this.zg.on("playQualityUpdate", (streamID, stats) => {
|
|
|
+ this.zg.on('playQualityUpdate', (streamID, stats) => {
|
|
|
// 拉流成功后回调
|
|
|
- console.log("拉流质量回调");
|
|
|
+ console.log('拉流质量回调');
|
|
|
console.log(streamID);
|
|
|
console.log(stats);
|
|
|
});
|
|
|
@@ -1078,9 +1186,9 @@ export default {
|
|
|
// 返回的 result 为兼容性检测结果。 webRTC 为 true 时表示支持 webRTC,其他属性含义可以参考接口 API 文档
|
|
|
console.log(result);
|
|
|
if (result.webRTC == true) {
|
|
|
- console.log("兼容");
|
|
|
+ console.log('兼容');
|
|
|
} else {
|
|
|
- console.log("不兼容");
|
|
|
+ console.log('不兼容');
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -1090,29 +1198,29 @@ export default {
|
|
|
var self = this;
|
|
|
self.timeoutObj && clearTimeout(self.timeoutObj);
|
|
|
self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
|
|
|
- self.timeoutObj = setTimeout(function () {
|
|
|
+ self.timeoutObj = setTimeout(function() {
|
|
|
//这里发送一个心跳,后端收到后,返回一个心跳消息,
|
|
|
- console.log("心跳中。。。", self.websock.readyState);
|
|
|
+ console.log('心跳中。。。', self.websock.readyState);
|
|
|
if (self.websock.readyState == 1) {
|
|
|
//如果连接正常
|
|
|
var obj1 = {};
|
|
|
obj1 = {
|
|
|
- action: "keepalive",
|
|
|
- type: "PC",
|
|
|
- recv_user_id: "",
|
|
|
+ action: 'keepalive',
|
|
|
+ type: 'PC',
|
|
|
+ recv_user_id: '',
|
|
|
data: {
|
|
|
msg_status: false,
|
|
|
- msg_info: "",
|
|
|
- },
|
|
|
+ msg_info: ''
|
|
|
+ }
|
|
|
};
|
|
|
self.websock.send(JSON.stringify(obj1));
|
|
|
} else {
|
|
|
//否则重连
|
|
|
self.reconnect();
|
|
|
}
|
|
|
- self.serverTimeoutObj = setTimeout(function () {
|
|
|
+ self.serverTimeoutObj = setTimeout(function() {
|
|
|
//超时关闭
|
|
|
- console.log("又进入了?");
|
|
|
+ console.log('又进入了?');
|
|
|
self.websock.close();
|
|
|
self.reconnect(); // 重连
|
|
|
}, self.timeout);
|
|
|
@@ -1129,7 +1237,7 @@ export default {
|
|
|
// 重连机制
|
|
|
reconnect() {
|
|
|
var that = this;
|
|
|
- console.log("进入重连了");
|
|
|
+ console.log('进入重连了');
|
|
|
clearTimeout(that.timeoutObj); //清除时间
|
|
|
if (that.lockReconnect) {
|
|
|
return;
|
|
|
@@ -1137,7 +1245,7 @@ export default {
|
|
|
that.lockReconnect = true;
|
|
|
// 没连接上会一直重连,设置延迟避免请求过多
|
|
|
that.timeoutnum && clearTimeout(that.timeoutnum);
|
|
|
- that.timeoutnum = setTimeout(function () {
|
|
|
+ that.timeoutnum = setTimeout(function() {
|
|
|
that.msgInit(); //新连接
|
|
|
that.lockReconnect = false;
|
|
|
}, 5000);
|
|
|
@@ -1145,10 +1253,10 @@ export default {
|
|
|
|
|
|
// 视频通话窗口最小化、最大化
|
|
|
zoomOperate(ref) {
|
|
|
- if (ref == "small") {
|
|
|
+ if (ref == 'small') {
|
|
|
// 最小化
|
|
|
this.zoomShow = false;
|
|
|
- } else if (ref == "big") {
|
|
|
+ } else if (ref == 'big') {
|
|
|
// 最大化
|
|
|
this.zoomShow = true;
|
|
|
}
|
|
|
@@ -1162,7 +1270,7 @@ export default {
|
|
|
// spinner: "el-icon-loading",
|
|
|
// background: "rgba(0, 0, 0, 0.7)",
|
|
|
// });
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
|
created() {
|
|
|
@@ -1184,6 +1292,8 @@ export default {
|
|
|
this.msgInit(); // 文本消息功能初始化
|
|
|
}
|
|
|
this.videoInit(); // 视频消息功能初始化
|
|
|
+
|
|
|
+ window.socketTimeoutLogs = this.socketTimeoutLogs;
|
|
|
},
|
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|
|
beforeMount() {}, //生命周期 - 挂载之前
|
|
|
@@ -1196,7 +1306,7 @@ export default {
|
|
|
// that.websock.close(); // 关闭websocket
|
|
|
}, //生命周期 - 销毁之前
|
|
|
destroyed() {
|
|
|
- console.log("我进入到销毁里喽");
|
|
|
+ console.log('我进入到销毁里喽');
|
|
|
var that = this;
|
|
|
clearTimeout(that.timeoutnum); // 清除重连
|
|
|
clearTimeout(that.timeoutObj); // 清除心跳
|
|
|
@@ -1204,7 +1314,7 @@ export default {
|
|
|
that.websock = null; // 清空
|
|
|
console.log(that.websock);
|
|
|
}, //生命周期 - 销毁完成
|
|
|
- activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
+ activated() {} //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|