|
|
@@ -145,11 +145,38 @@
|
|
|
:before-close="handleClose"
|
|
|
:modal="false"
|
|
|
v-dialogDrag
|
|
|
+ :fullscreen="zoomShow"
|
|
|
:title="videoTle"
|
|
|
:visible.sync="videoVisible"
|
|
|
width="600px"
|
|
|
>
|
|
|
- <div class="video_box">
|
|
|
+ <!-- <div class="video_box"> -->
|
|
|
+ <div :class="zoomShow == false ? 'video_box' : 'video_box-big'">
|
|
|
+ <!-- 最大化、最小化 -->
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ position: absolute;
|
|
|
+ right: 42px;
|
|
|
+ color: #9fa2a7;
|
|
|
+ top: -28px;
|
|
|
+ font-size: 13px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <!-- 最小化 -->
|
|
|
+ <span
|
|
|
+ style="font-size: 25px; cursor: pointer"
|
|
|
+ class="iconfont icon-zuixiaohua"
|
|
|
+ @click="zoomOperate('small')"
|
|
|
+ ></span>
|
|
|
+ <!-- 最大化 -->
|
|
|
+ <span
|
|
|
+ style="font-size: 25px; cursor: pointer"
|
|
|
+ class="iconfont icon-zuidahua"
|
|
|
+ @click="zoomOperate('big')"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ <!-- 最大化、最小化 -->
|
|
|
+
|
|
|
<div class="host_video" v-if="videoShow">
|
|
|
<img
|
|
|
src="../../assets/images/realTime/8.png"
|
|
|
@@ -420,6 +447,7 @@ export default {
|
|
|
Token: "",
|
|
|
RoomID: "",
|
|
|
videoTle: "正在和云飞-卢万里视频通话",
|
|
|
+ timer: null, // 接听
|
|
|
|
|
|
// 文本聊天框
|
|
|
tltData: "",
|
|
|
@@ -429,7 +457,7 @@ export default {
|
|
|
// 文本消息功能
|
|
|
url:
|
|
|
// "ws://192.168.1.17:12345/api/api_gateway?method=control_center.real_time.im_message",
|
|
|
- "ws" +
|
|
|
+ // "ws" +
|
|
|
// "https" +
|
|
|
this.$wsUrl +
|
|
|
"/api/api_gateway?method=control_center.real_time.im_message",
|
|
|
@@ -445,6 +473,9 @@ export default {
|
|
|
timeoutObj: null, //心跳心跳倒计时
|
|
|
serverTimeoutObj: null, //心跳倒计时
|
|
|
timeoutnum: null, //断开 重连倒计时
|
|
|
+
|
|
|
+ // 视频通话窗口缩放
|
|
|
+ zoomShow: false, // 默认最小化
|
|
|
};
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
@@ -525,7 +556,7 @@ export default {
|
|
|
|
|
|
// 搜索
|
|
|
searchData() {
|
|
|
- this.page = 1
|
|
|
+ this.page = 1;
|
|
|
this.userListData();
|
|
|
},
|
|
|
|
|
|
@@ -698,15 +729,18 @@ export default {
|
|
|
|
|
|
// 退出房间
|
|
|
notLogin() {
|
|
|
+ clearTimeout(this.timer);
|
|
|
this.zg.logoutRoom(this.RoomID);
|
|
|
this.videoVisible = false;
|
|
|
},
|
|
|
|
|
|
// 当音视频通话关闭时的回调
|
|
|
handleClose(done) {
|
|
|
+ var that = this;
|
|
|
this.$confirm("目前正在音视频通话中,确认关闭？")
|
|
|
.then((_) => {
|
|
|
done();
|
|
|
+ that.notLogin(); // 退出房间
|
|
|
})
|
|
|
.catch((_) => {});
|
|
|
},
|
|
|
@@ -777,7 +811,7 @@ export default {
|
|
|
},
|
|
|
};
|
|
|
this.websock.send(JSON.stringify(obj1));
|
|
|
- // this.start(); //开启心跳
|
|
|
+ this.start(); //开启心跳
|
|
|
};
|
|
|
this.websock.onmessage = (event) => {
|
|
|
// console.log("WebSocket:消息");
|
|
|
@@ -839,12 +873,25 @@ export default {
|
|
|
this.websock.onerror = (event) => {
|
|
|
console.log("WebSocket:发生错误 ");
|
|
|
console.log(event);
|
|
|
- // that.reconnect(); // 重连
|
|
|
+ if (that.timeoutnum !== null) {
|
|
|
+ setTimeout(() => {
|
|
|
+ that.websock.close(); // 先关闭
|
|
|
+ clearTimeout(that.timeoutObj); //清除时间
|
|
|
+ that.reconnect(); // 重连
|
|
|
+ }, 5000);
|
|
|
+ }
|
|
|
};
|
|
|
this.websock.onclose = (event) => {
|
|
|
console.log("WebSocket:已关闭");
|
|
|
console.log(event);
|
|
|
- // that.reconnect(); // 重连
|
|
|
+ console.log(that.timeoutnum);
|
|
|
+ if (that.timeoutnum !== null) {
|
|
|
+ setTimeout(() => {
|
|
|
+ that.websock.close(); // 先关闭
|
|
|
+ clearTimeout(that.timeoutObj); //清除时间
|
|
|
+ that.reconnect(); // 重连
|
|
|
+ }, 5000);
|
|
|
+ }
|
|
|
};
|
|
|
}
|
|
|
},
|
|
|
@@ -857,8 +904,6 @@ export default {
|
|
|
},
|
|
|
// 监听房间
|
|
|
soundOn() {
|
|
|
- var timer;
|
|
|
-
|
|
|
// 房间状态更新回调
|
|
|
this.zg.on(
|
|
|
"roomStateUpdate",
|
|
|
@@ -868,7 +913,7 @@ export default {
|
|
|
// 接下来的“预览并推流”的代码写在这里
|
|
|
console.log("房间连接成功");
|
|
|
//定时器
|
|
|
- timer = setTimeout(() => {
|
|
|
+ this.timer = setTimeout(() => {
|
|
|
if (document.getElementsByClassName("el-message").length == 0) {
|
|
|
this.$message({
|
|
|
message: "没人接听，请稍后重试",
|
|
|
@@ -877,8 +922,8 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
this.videoVisible = false;
|
|
|
- }, 5000);
|
|
|
- // }, 60000);
|
|
|
+ // }, 5000);
|
|
|
+ }, 30000);
|
|
|
}
|
|
|
if (state == "DISCONNECTED") {
|
|
|
// 与房间断开了连接
|
|
|
@@ -896,8 +941,22 @@ export default {
|
|
|
// 其他用户进出房间的通知
|
|
|
console.log(updateType);
|
|
|
console.log(userList);
|
|
|
- clearTimeout(timer);
|
|
|
console.log("有其他用户进出房间");
|
|
|
+
|
|
|
+ if (updateType == "DELETE") {
|
|
|
+ if (document.getElementsByClassName("el-message").length == 0) {
|
|
|
+ this.$message({
|
|
|
+ message: "对方已挂断，结束通话！",
|
|
|
+ type: "warning",
|
|
|
+ duration: 1500,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ this.notLogin(); // 退出房间
|
|
|
+ }, 2000);
|
|
|
+ } else if (updateType == "ADD") {
|
|
|
+ clearTimeout(this.timer); // 关闭无人接听回调
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
this.zg.on(
|
|
|
@@ -928,23 +987,6 @@ export default {
|
|
|
// 推流质量回调
|
|
|
console.log("推流质量更新");
|
|
|
});
|
|
|
-
|
|
|
- // this.zg.on("IMRecvBroadcastMessage", (roomID, chatData) => {
|
|
|
- // console.log("IMRecvBroadcastMessage", roomID, chatData);
|
|
|
- // console.log(">>>>>>>>>>>>>>>>>>>>>接收到文本消息了");
|
|
|
- // var list = {
|
|
|
- // id: "2", //模拟数据中使用id来区分当前是发送人还是接收人 1为接收人 2为发送人
|
|
|
- // msg: chatData[0].message, // 文本消息
|
|
|
- // img: "../../../static/img/6.png", // 头像url
|
|
|
- // };
|
|
|
- // this.msgList = [...this.msgList, list];
|
|
|
- // // let message = {
|
|
|
- // // ID: 'zego' + chatData[0].fromUser.userID + chatData[0].sendTime,
|
|
|
- // // name: chatData[0].fromUser.userName,
|
|
|
- // // time: format(chatData[0].sendTime),
|
|
|
- // // content: chatData[0].message + '(广播发送)'
|
|
|
- // // }
|
|
|
- // });
|
|
|
},
|
|
|
// 检测是否兼容当前浏览器
|
|
|
async detection() {
|
|
|
@@ -1013,6 +1055,9 @@ export default {
|
|
|
// 重连机制
|
|
|
reconnect() {
|
|
|
var that = this;
|
|
|
+ console.log("进入重连了");
|
|
|
+ clearTimeout(that.timeoutObj); //清除时间
|
|
|
+ var that = this;
|
|
|
if (that.lockReconnect) {
|
|
|
return;
|
|
|
}
|
|
|
@@ -1024,6 +1069,17 @@ export default {
|
|
|
that.lockReconnect = false;
|
|
|
}, 5000);
|
|
|
},
|
|
|
+
|
|
|
+ // 视频通话窗口最小化、最大化
|
|
|
+ zoomOperate(ref) {
|
|
|
+ if (ref == "small") {
|
|
|
+ // 最小化
|
|
|
+ this.zoomShow = false;
|
|
|
+ } else if (ref == "big") {
|
|
|
+ // 最大化
|
|
|
+ this.zoomShow = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
@@ -1050,7 +1106,12 @@ export default {
|
|
|
beforeMount() {}, //生命周期 - 挂载之前
|
|
|
beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
updated() {}, //生命周期 - 更新之后
|
|
|
- beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ beforeDestroy() {
|
|
|
+ var that = this;
|
|
|
+ clearTimeout(that.timeoutnum); // 清除重连
|
|
|
+ clearTimeout(that.timeoutObj); // 清除心跳
|
|
|
+ that.websock.close(); // 关闭websocket
|
|
|
+ }, //生命周期 - 销毁之前
|
|
|
destroyed() {}, //生命周期 - 销毁完成
|
|
|
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
};
|
|
|
@@ -1116,24 +1177,27 @@ export default {
|
|
|
width: 80%;
|
|
|
}
|
|
|
|
|
|
- // 视频通话
|
|
|
+ // 视频通话 - 最小化
|
|
|
.video_box {
|
|
|
border: 1px solid #000;
|
|
|
- // margin: 15px 0 0 0;
|
|
|
background: #2c2c2c;
|
|
|
height: 325px;
|
|
|
position: relative;
|
|
|
|
|
|
// 主视频画面
|
|
|
.host_video {
|
|
|
- // width: 100%;
|
|
|
height: 326px;
|
|
|
- // height: 300px;
|
|
|
- // display: table-cell;
|
|
|
vertical-align: middle;
|
|
|
text-align: center;
|
|
|
+ position: relative;
|
|
|
.video_img {
|
|
|
margin: 120px auto;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ margin: auto;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1162,6 +1226,55 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ // 视频通话 - 最大化
|
|
|
+ .video_box-big {
|
|
|
+ border: 1px solid #000;
|
|
|
+ background: #2c2c2c;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ // 主视频画面
|
|
|
+ .host_video {
|
|
|
+ height: 100%;
|
|
|
+ vertical-align: middle;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ .video_img {
|
|
|
+ margin: 120px auto;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 副视频画面
|
|
|
+ .deputy_video {
|
|
|
+ width: 190px;
|
|
|
+ height: 190px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 操作
|
|
|
+ .operate {
|
|
|
+ height: 25px;
|
|
|
+ width: 100%;
|
|
|
+ background: #000;
|
|
|
+ padding: 5px 0 5px 0;
|
|
|
+ margin: -13px 0 0 0px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 3%;
|
|
|
+ left: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
/* 聊天内容 */
|
|
|
.ul_list {
|
|
|
height: 350px;
|
|
|
@@ -1238,6 +1351,7 @@ export default {
|
|
|
/deep/.el-dialog__body {
|
|
|
padding: 0;
|
|
|
// margin-top: -15px;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
/deep/.el-textarea__inner {
|
|
|
border: 0;
|
