|
@@ -4,6 +4,20 @@
|
|
<div class="warning-detail-title">
|
|
<div class="warning-detail-title">
|
|
<h2>预警详情</h2>
|
|
<h2>预警详情</h2>
|
|
<el-button size="mini" icon="el-icon-arrow-left">返回列表</el-button>
|
|
<el-button size="mini" icon="el-icon-arrow-left">返回列表</el-button>
|
|
|
|
+ <el-button
|
|
|
|
+ @click="initSubscribeVideo"
|
|
|
|
+ type="primary"
|
|
|
|
+ size="mini"
|
|
|
|
+ icon="el-icon-arrow-left"
|
|
|
|
+ >开始视频</el-button
|
|
|
|
+ >
|
|
|
|
+ <el-button
|
|
|
|
+ @click="closeSubscribeVideo"
|
|
|
|
+ type="danger"
|
|
|
|
+ size="mini"
|
|
|
|
+ icon="el-icon-arrow-left"
|
|
|
|
+ >关闭视频</el-button
|
|
|
|
+ >
|
|
</div>
|
|
</div>
|
|
<div class="warning-detail-student">
|
|
<div class="warning-detail-student">
|
|
<div class="student-head">
|
|
<div class="student-head">
|
|
@@ -32,18 +46,22 @@
|
|
</div>
|
|
</div>
|
|
<div class="student-video">
|
|
<div class="student-video">
|
|
<div class="student-video-item">
|
|
<div class="student-video-item">
|
|
- <video ref="FirstViewVideo" v-if="firstViewVideoReady"></video>
|
|
|
|
|
|
+ <flv-media
|
|
|
|
+ ref="FirstViewVideo"
|
|
|
|
+ :data="firstViewVideo"
|
|
|
|
+ v-if="firstViewVideoReady"
|
|
|
|
+ ></flv-media>
|
|
<div class="student-video-none" v-else>
|
|
<div class="student-video-none" v-else>
|
|
<i class="el-icon-video-camera-solid"></i>
|
|
<i class="el-icon-video-camera-solid"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="student-video-item">
|
|
<div class="student-video-item">
|
|
- <video
|
|
|
|
- src=""
|
|
|
|
- ref="ThreeViewVideo"
|
|
|
|
- v-show="threeViewVideoReady"
|
|
|
|
- ></video>
|
|
|
|
- <div class="student-video-none" v-show="!threeViewVideoReady">
|
|
|
|
|
|
+ <flv-media
|
|
|
|
+ ref="ThirdViewVideo"
|
|
|
|
+ :data="secondViewVideo"
|
|
|
|
+ v-if="secondViewVideoReady"
|
|
|
|
+ ></flv-media>
|
|
|
|
+ <div class="student-video-none" v-else>
|
|
<i class="el-icon-video-camera-solid"></i>
|
|
<i class="el-icon-video-camera-solid"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -78,11 +96,22 @@
|
|
<el-button type="primary" slot="reference">实时通话</el-button>
|
|
<el-button type="primary" slot="reference">实时通话</el-button>
|
|
</el-popover>
|
|
</el-popover>
|
|
</div>
|
|
</div>
|
|
- <div class="warning-body-head-info">
|
|
|
|
- <p><span>系统预警</span><span>1次</span></p>
|
|
|
|
- <p><span>陌生人脸</span><span>1次</span></p>
|
|
|
|
- <p><span>异常处理</span><span>1次</span></p>
|
|
|
|
- <p><span></span><span>违纪状态:正常</span></p>
|
|
|
|
|
|
+ <div class="warning-body-head-info summary-line">
|
|
|
|
+ <p class="summary-line-item">
|
|
|
|
+ <i class="line-point line-point-danger"></i
|
|
|
|
+ ><span class="line-name">系统预警</span><span>1次</span>
|
|
|
|
+ </p>
|
|
|
|
+ <p class="summary-line-item">
|
|
|
|
+ <i class="line-point line-point-danger"></i
|
|
|
|
+ ><span class="line-name">陌生人脸</span><span>1次</span>
|
|
|
|
+ </p>
|
|
|
|
+ <p class="summary-line-item">
|
|
|
|
+ <i class="line-point line-point-danger"></i
|
|
|
|
+ ><span class="line-name">异常处理</span><span>1次</span>
|
|
|
|
+ </p>
|
|
|
|
+ <p class="summary-line-item">
|
|
|
|
+ <span></span><span>违纪状态:正常</span>
|
|
|
|
+ </p>
|
|
<el-button type="danger" icon="icon icon-stop">违纪处理</el-button>
|
|
<el-button type="danger" icon="icon icon-stop">违纪处理</el-button>
|
|
<el-button type="warning" icon="icon icon-forbide"
|
|
<el-button type="warning" icon="icon icon-forbide"
|
|
>强制收卷</el-button
|
|
>强制收卷</el-button
|
|
@@ -103,13 +132,9 @@
|
|
append-to-body
|
|
append-to-body
|
|
fullscreen
|
|
fullscreen
|
|
>
|
|
>
|
|
- <div class="communication-box">
|
|
|
|
- <div class="communication-host">
|
|
|
|
- <video src="" ref="VideoHost" v-show="videoHostReady"></video>
|
|
|
|
- </div>
|
|
|
|
- <div class="communication-guest">
|
|
|
|
- <video src="" ref="VideoGuest" v-show="videoGuestReady"></video>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="communication-box" v-show="!isWaiting">
|
|
|
|
+ <div class="communication-host" id="communication-host"></div>
|
|
|
|
+ <div class="communication-guest" id="communication-guest"></div>
|
|
<div class="communication-action">
|
|
<div class="communication-action">
|
|
<el-button round type="danger" @click="hangup">结束通话</el-button>
|
|
<el-button round type="danger" @click="hangup">结束通话</el-button>
|
|
</div>
|
|
</div>
|
|
@@ -118,18 +143,32 @@
|
|
<span>持续时长:{{ durationTime }}</span>
|
|
<span>持续时长:{{ durationTime }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="communication-wait" v-show="isWaiting">
|
|
|
|
+ <p class="communication-wait-tips">等待接听…</p>
|
|
|
|
+ <div class="communication-wait-avatar">
|
|
|
|
+ <img :src="curStudent.stdAvatar" :alt="curStudent.stdName" />
|
|
|
|
+ </div>
|
|
|
|
+ <p class="communication-wait-username">{{ curStudent.stdName }}</p>
|
|
|
|
+ <div class="communication-wait-action">
|
|
|
|
+ <el-button round type="danger" @click="hangup">取消通话</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
<span slot="footer" class="dialog-footer"> </span>
|
|
<span slot="footer" class="dialog-footer"> </span>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import { initRongRTC, connectIM } from "@/plugins/RongIM";
|
|
|
|
|
|
+import TRTC from "trtc-js-sdk";
|
|
|
|
+import FlvMedia from "./FlvMedia";
|
|
|
|
+import { warningStudentDetail } from "@/api/invigilation";
|
|
|
|
|
|
export default {
|
|
export default {
|
|
name: "warning-detail",
|
|
name: "warning-detail",
|
|
|
|
+ components: { FlvMedia },
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ recordId: "777",
|
|
exceptionList: [
|
|
exceptionList: [
|
|
{
|
|
{
|
|
title: "身份验证不通过",
|
|
title: "身份验证不通过",
|
|
@@ -151,208 +190,179 @@ export default {
|
|
stdName: "张龙龙",
|
|
stdName: "张龙龙",
|
|
subjectName: "大学英语",
|
|
subjectName: "大学英语",
|
|
subjectCode: "10006",
|
|
subjectCode: "10006",
|
|
- liveUrlFirst:
|
|
|
|
- "F7XLyBeoubx0mK+pY9TmqnPWqaI5x6SmcN2+qjnWpKUtjfvIBIT8+jmH8+Ygg+X6Jobx/CeF8/gWtcvIFbWHiVbWs4VT1ryFQ9b4iVTvspEmjL+RJo34kX3Ro4ZD+6eFffj+hlP0vJFD8LGReuT5kXrg+ZFt3rORbeemhnr4+5JG9I6FffSyhVb09sgix6iXetaU/3WCqv0k0Pn7LoH7+HaE+Kpzg6mtIdby+XSBrf50ga6XRdqlr1TZpL1z55+LSITLyBe1ZHVxu8v9ZdaUpXTq/Kog1P77cof48SOF+6kmhqmsIdeu/nSM+qsj0/2rI9CUmnjbrIt72r6sReGIlye1y8gXfsxCoA==",
|
|
|
|
- liveUrlThree: "",
|
|
|
|
roomId: "8888",
|
|
roomId: "8888",
|
|
},
|
|
},
|
|
|
|
+ firstViewVideo: {
|
|
|
|
+ id: "111",
|
|
|
|
+ src: "http://live.qmth.com.cn/live/8888_mobile_first.flv",
|
|
|
|
+ name: "第一视角",
|
|
|
|
+ },
|
|
|
|
+ secondViewVideo: {
|
|
|
|
+ id: "222",
|
|
|
|
+ src: "http://live.qmth.com.cn/live/8888_mobile_second.flv",
|
|
|
|
+ name: "第二视角",
|
|
|
|
+ },
|
|
firstViewVideoReady: false,
|
|
firstViewVideoReady: false,
|
|
- threeViewVideoReady: false,
|
|
|
|
|
|
+ secondViewVideoReady: false,
|
|
// communication
|
|
// communication
|
|
durationTime: "00:10:23",
|
|
durationTime: "00:10:23",
|
|
- token:
|
|
|
|
- "R2wA227fM5guGJjIUQiOFy7ePbpkBY7e/88fWPXjr+k=@tlem.cn.rongnav.com;tlem.cn.rongcfg.com",
|
|
|
|
- // token:
|
|
|
|
- // "iy7OAXkkr+ooBirzYIT8BC7ePbpkBY7eRygkv+h3Iok=@tlem.cn.rongnav.com;tlem.cn.rongcfg.com",
|
|
|
|
- rongUserId: null,
|
|
|
|
- rongRTC: null,
|
|
|
|
- room: null,
|
|
|
|
- stream: null,
|
|
|
|
- streamUser: null,
|
|
|
|
- curStreamType: null,
|
|
|
|
- videoHostReady: false,
|
|
|
|
- videoGuestReady: false,
|
|
|
|
|
|
+ appId: "1400411036",
|
|
|
|
+ videoUserSig:
|
|
|
|
+ "eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwsUGZlDh4pTsxIKCzBQlK0MTAwMTQ0MDYzOITGpFQWZRKlDc1NTUyMDAACJakpkLFrM0NzI0NLKEqi3OTAeaWmoeWZAd6O1h7B4YbhJoXOYdkeNmEebm5Z1R5JxXEmVhbOZkYWFQkZvjV26rVAsAYQkvlQ__",
|
|
|
|
+ videoUserId: "s06",
|
|
|
|
+ client: null,
|
|
|
|
+ localStream: null,
|
|
dialogVisible: false,
|
|
dialogVisible: false,
|
|
|
|
+ isWaiting: true,
|
|
|
|
+ setT: null,
|
|
};
|
|
};
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
- this.initRong();
|
|
|
|
|
|
+ // this.initClinet();
|
|
|
|
+ // this.initData();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- async initRong() {
|
|
|
|
- this.rongUserId = await connectIM(this.token).catch((error) => {
|
|
|
|
- console.log(error);
|
|
|
|
|
|
+ initClinet() {
|
|
|
|
+ this.client = TRTC.createClient({
|
|
|
|
+ mode: "rtc",
|
|
|
|
+ sdkAppId: this.appId,
|
|
|
|
+ userId: this.videoUserId,
|
|
|
|
+ userSig: this.videoUserSig,
|
|
});
|
|
});
|
|
- if (!this.rongUserId) {
|
|
|
|
- this.$message.error("初始化错误!");
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- this.initVideo();
|
|
|
|
},
|
|
},
|
|
- async initVideo() {
|
|
|
|
- const { Mode, ROLE } = window.RongRTC;
|
|
|
|
- this.rongRTC = initRongRTC({
|
|
|
|
- debug: false,
|
|
|
|
- mode: Mode.LIVE,
|
|
|
|
- liveRole: ROLE.AUDIENCE,
|
|
|
|
|
|
+ async initData() {
|
|
|
|
+ const data = await warningStudentDetail({ recordId: this.recordId });
|
|
|
|
+ const records = data.records.map((item) => {
|
|
|
|
+ item.src = `http://live.qmth.com.cn/live/${item.liveUrl}.flv`;
|
|
|
|
+ item.name = item.source;
|
|
|
|
+ return item;
|
|
});
|
|
});
|
|
- const { Stream } = this.rongRTC;
|
|
|
|
-
|
|
|
|
- // 初始化stream
|
|
|
|
- this.stream = new Stream({
|
|
|
|
- published: (user) => {
|
|
|
|
- console.log(user);
|
|
|
|
- },
|
|
|
|
- unpublished: (user) => {
|
|
|
|
- console.log(user);
|
|
|
|
- },
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- const { mediaStream } = await this.stream
|
|
|
|
- .subscribe({ liveUrl: this.curStudent.liveUrlFirst })
|
|
|
|
- .catch((error) => {
|
|
|
|
- console.log(error);
|
|
|
|
- });
|
|
|
|
- console.log(mediaStream);
|
|
|
|
|
|
+ this.firstViewVideo = records[0] || {};
|
|
|
|
+ this.secondViewVideo = records[1] || {};
|
|
|
|
|
|
- if (mediaStream) {
|
|
|
|
- this.firstViewVideoReady = true;
|
|
|
|
- this.$nextTick(() => {
|
|
|
|
- this.$refs.FirstViewVideo.srcObject = mediaStream;
|
|
|
|
- this.$refs.FirstViewVideo.autoplay = true;
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- // this.stream.subscribe({ liveUrl: this.curStudent.liveUrlThree }).then((user) => {
|
|
|
|
- // let {
|
|
|
|
- // stream: { mediaStream },
|
|
|
|
- // } = user;
|
|
|
|
- // this.$refs.ThreeViewVideo.srcObject = mediaStream;
|
|
|
|
- // this.$refs.ThreeViewVideo.autoplay = true;
|
|
|
|
- // this.threeViewVideoReady = true;
|
|
|
|
- // });
|
|
|
|
|
|
+ if (records.length) this.initSubscribeVideo();
|
|
|
|
+ },
|
|
|
|
+ initSubscribeVideo() {
|
|
|
|
+ if (this.firstViewVideo.id) this.firstViewVideoReady = true;
|
|
|
|
+ if (this.secondViewVideo.id) this.secondViewVideoReady = true;
|
|
},
|
|
},
|
|
- closeVideo() {
|
|
|
|
- this.stream.unsubscribe({ liveUrl: this.curStudent.liveUrlFirst });
|
|
|
|
- this.stream.unsubscribe({ liveUrl: this.curStudent.liveUrlThree });
|
|
|
|
- this.stream = null;
|
|
|
|
- this.rongRTC.destroy();
|
|
|
|
- this.rongRTC = null;
|
|
|
|
|
|
+ closeSubscribeVideo() {
|
|
this.firstViewVideoReady = false;
|
|
this.firstViewVideoReady = false;
|
|
- this.threeViewVideoReady = false;
|
|
|
|
|
|
+ this.secondViewVideoReady = false;
|
|
},
|
|
},
|
|
async answer(isVideo) {
|
|
async answer(isVideo) {
|
|
- this.closeVideo();
|
|
|
|
|
|
+ this.closeSubscribeVideo();
|
|
this.dialogVisible = true;
|
|
this.dialogVisible = true;
|
|
|
|
|
|
- const { Mode, ROLE } = window.RongRTC;
|
|
|
|
- this.rongRTC = initRongRTC({
|
|
|
|
- debug: false,
|
|
|
|
- mode: Mode.LIVE,
|
|
|
|
- liveRole: ROLE.ANCHOR,
|
|
|
|
|
|
+ // 添加远程用户视频发布监听
|
|
|
|
+ this.client.on("stream-added", (event) => {
|
|
|
|
+ console.log(event);
|
|
|
|
+ const remoteStream = event.stream;
|
|
|
|
+ if (remoteStream.userId_ !== "s01") return;
|
|
|
|
+
|
|
|
|
+ // 延迟订阅视频
|
|
|
|
+ this.setT = setTimeout(() => {
|
|
|
|
+ this.client
|
|
|
|
+ .subscribe(remoteStream, { audio: true, video: true })
|
|
|
|
+ .then(() => {
|
|
|
|
+ console.log("订阅视频成功!");
|
|
|
|
+ })
|
|
|
|
+ .catch((error) => {
|
|
|
|
+ console.log("订阅视频失败!", error);
|
|
|
|
+ });
|
|
|
|
+ }, 5000);
|
|
});
|
|
});
|
|
|
|
+ this.client.on("stream-subscribed", (event) => {
|
|
|
|
+ const remoteStream = event.stream;
|
|
|
|
+ if (remoteStream.userId_ !== "s01") return;
|
|
|
|
|
|
- const { Room, Stream, StreamType } = this.rongRTC;
|
|
|
|
- // 初始化房间
|
|
|
|
- this.room = new Room({
|
|
|
|
- id: this.curStudent.roomId,
|
|
|
|
- joined: (user) => {
|
|
|
|
- console.log(user);
|
|
|
|
- },
|
|
|
|
- left: (user) => {
|
|
|
|
- console.log(user);
|
|
|
|
- },
|
|
|
|
|
|
+ this.isWaiting = false;
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ remoteStream.play("communication-host", { objectFit: "contain" });
|
|
|
|
+ });
|
|
});
|
|
});
|
|
|
|
+
|
|
// 加入房间
|
|
// 加入房间
|
|
- let joinRoomSuccess = true;
|
|
|
|
- await this.room.join({ id: this.rongUserId }).catch((error) => {
|
|
|
|
- console.log(error);
|
|
|
|
- joinRoomSuccess = false;
|
|
|
|
|
|
+ let roomJoinResult = true;
|
|
|
|
+ await this.client
|
|
|
|
+ .join({
|
|
|
|
+ roomId: this.curStudent.roomId,
|
|
|
|
+ role: "audience",
|
|
|
|
+ })
|
|
|
|
+ .catch((error) => {
|
|
|
|
+ roomJoinResult = false;
|
|
|
|
+ console.log("加入房间失败!", error);
|
|
|
|
+ });
|
|
|
|
+ if (!roomJoinResult) return;
|
|
|
|
+
|
|
|
|
+ // 切换角色,连麦互动
|
|
|
|
+ let switchResult = true;
|
|
|
|
+ await this.client.switchRole("anchor").catch((error) => {
|
|
|
|
+ console.log("切换角色失败!", error);
|
|
|
|
+ switchResult = false;
|
|
});
|
|
});
|
|
- if (!joinRoomSuccess) return;
|
|
|
|
|
|
+ if (!switchResult) return;
|
|
|
|
|
|
// 初始化stream
|
|
// 初始化stream
|
|
- this.stream = new Stream({
|
|
|
|
- published: (user) => {
|
|
|
|
- console.log(user);
|
|
|
|
- this.stream.subscribe(user).then((user) => {
|
|
|
|
- let {
|
|
|
|
- stream: { mediaStream },
|
|
|
|
- } = user;
|
|
|
|
- this.$refs.VideoHost.srcObject = mediaStream;
|
|
|
|
- this.$refs.VideoHost.autoplay = true;
|
|
|
|
- this.videoHostReady = true;
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- unpublished: (user) => {
|
|
|
|
- this.stream.unsubscribe(user);
|
|
|
|
- },
|
|
|
|
|
|
+ this.localStream = TRTC.createStream({
|
|
|
|
+ userId: this.videoUserId,
|
|
|
|
+ audio: true,
|
|
|
|
+ video: isVideo,
|
|
});
|
|
});
|
|
|
|
|
|
- // 按需发布本地音视频
|
|
|
|
- this.curStreamType = isVideo
|
|
|
|
- ? StreamType.AUDIO_AND_VIDEO
|
|
|
|
- : StreamType.AUDIO;
|
|
|
|
- const localStream = await this.stream.get().catch((error) => {
|
|
|
|
- console.log(error);
|
|
|
|
- this.$message.error("获取本地音视频失败!");
|
|
|
|
|
|
+ let initLocalStreamResult = true;
|
|
|
|
+ await this.localStream.initialize().catch((error) => {
|
|
|
|
+ console.log("初始化视频失败!", error);
|
|
|
|
+ initLocalStreamResult = false;
|
|
});
|
|
});
|
|
- if (!localStream) return;
|
|
|
|
|
|
+ if (!initLocalStreamResult) return;
|
|
|
|
|
|
- const streamUser = {
|
|
|
|
- id: this.rongUserId,
|
|
|
|
- stream: {
|
|
|
|
- tag: "RongCloudRTC",
|
|
|
|
- type: this.curStreamType,
|
|
|
|
- mediaStream: localStream.mediaStream,
|
|
|
|
- },
|
|
|
|
- };
|
|
|
|
- const streamPublishResult = await this.stream
|
|
|
|
- .publish(streamUser)
|
|
|
|
- .catch((error) => {
|
|
|
|
- console.log(error);
|
|
|
|
- });
|
|
|
|
- console.log(streamPublishResult);
|
|
|
|
- // {configUrl, liveUrl}
|
|
|
|
- if (isVideo && streamPublishResult) {
|
|
|
|
- this.$refs.VideoGuest.autoplay = true;
|
|
|
|
- this.$refs.VideoGuest.srcObject = localStream.mediaStream;
|
|
|
|
- this.videoGuestReady = true;
|
|
|
|
- }
|
|
|
|
|
|
+ // 发布本地视频
|
|
|
|
+ let publishStreamResult = true;
|
|
|
|
+ this.client.publish(this.localStream).catch((error) => {
|
|
|
|
+ console.log("发布本地视频失败!", error);
|
|
|
|
+ publishStreamResult = false;
|
|
|
|
+ });
|
|
|
|
+ if (!publishStreamResult) return;
|
|
|
|
+
|
|
|
|
+ // 播放本地视频
|
|
|
|
+ this.localStream.play("communication-guest", { muted: true });
|
|
},
|
|
},
|
|
async hangup() {
|
|
async hangup() {
|
|
- const streamUser = {
|
|
|
|
- id: this.rongUserId,
|
|
|
|
- stream: {
|
|
|
|
- tag: "RongCloudRTC",
|
|
|
|
- type: this.curStreamType,
|
|
|
|
- },
|
|
|
|
- };
|
|
|
|
- await this.stream.unpublish(streamUser).catch((error) => {
|
|
|
|
- console.log(error);
|
|
|
|
|
|
+ if (this.setT) clearTimeout(this.setT);
|
|
|
|
+
|
|
|
|
+ // 取消发布本地视频
|
|
|
|
+ let unpublishStreamResult = true;
|
|
|
|
+ this.client.unpublish(this.localStream).catch((error) => {
|
|
|
|
+ console.log("取消发布本地视频失败!", error);
|
|
|
|
+ unpublishStreamResult = false;
|
|
});
|
|
});
|
|
- await this.room.leave().catch((error) => {
|
|
|
|
- console.log(error);
|
|
|
|
|
|
+ if (!unpublishStreamResult) return;
|
|
|
|
+
|
|
|
|
+ this.localStream.close();
|
|
|
|
+ this.localStream = null;
|
|
|
|
+
|
|
|
|
+ // 离开房间
|
|
|
|
+ let result = true;
|
|
|
|
+ await this.client.leave().catch((error) => {
|
|
|
|
+ console.log("离开房间失败!", error);
|
|
|
|
+ result = false;
|
|
});
|
|
});
|
|
|
|
+ if (!result) return;
|
|
|
|
|
|
|
|
+ this.client.off("*");
|
|
this.dialogVisible = false;
|
|
this.dialogVisible = false;
|
|
- this.initData();
|
|
|
|
- },
|
|
|
|
- initData() {
|
|
|
|
- this.room = null;
|
|
|
|
- this.stream = null;
|
|
|
|
- this.streamUser = null;
|
|
|
|
- this.curStreamType = null;
|
|
|
|
- this.videoHostReady = false;
|
|
|
|
- this.videoGuestReady = false;
|
|
|
|
- this.rongRTC.destroy();
|
|
|
|
- this.rongRTC = null;
|
|
|
|
- this.initVideo();
|
|
|
|
|
|
+ this.localStream = null;
|
|
|
|
+ this.isWaiting = true;
|
|
|
|
+ // this.initSubscribeVideo();
|
|
},
|
|
},
|
|
},
|
|
},
|
|
beforeDestroy() {
|
|
beforeDestroy() {
|
|
- if (this.rongRTC) this.rongRTC.destroy();
|
|
|
|
|
|
+ if (this.setT) clearTimeout(this.setT);
|
|
|
|
+ if (this.client) {
|
|
|
|
+ this.client.leave();
|
|
|
|
+ this.client.off("*");
|
|
|
|
+ }
|
|
},
|
|
},
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
@@ -433,22 +443,34 @@ export default {
|
|
margin-left: 210px;
|
|
margin-left: 210px;
|
|
height: 240px;
|
|
height: 240px;
|
|
font-size: 0;
|
|
font-size: 0;
|
|
|
|
+ position: relative;
|
|
|
|
|
|
&-item {
|
|
&-item {
|
|
|
|
+ position: relative;
|
|
display: inline-block;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
vertical-align: top;
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
padding: 0 15px;
|
|
padding: 0 15px;
|
|
width: 50%;
|
|
width: 50%;
|
|
height: 100%;
|
|
height: 100%;
|
|
- > video {
|
|
|
|
- display: block;
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
- border-radius: 6px;
|
|
|
|
- box-shadow: 0 0 1px #333;
|
|
|
|
- background: #606060;
|
|
|
|
- }
|
|
|
|
|
|
+ }
|
|
|
|
+ video {
|
|
|
|
+ display: block;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ border-radius: 6px;
|
|
|
|
+ box-shadow: 0 0 1px #333;
|
|
|
|
+ background: #606060;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &-main {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 15px;
|
|
|
|
+ right: 15px;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ z-index: 9;
|
|
|
|
+ border-radius: 6px;
|
|
}
|
|
}
|
|
|
|
|
|
&-none {
|
|
&-none {
|
|
@@ -563,33 +585,9 @@ export default {
|
|
&-info {
|
|
&-info {
|
|
float: right;
|
|
float: right;
|
|
> p {
|
|
> p {
|
|
- margin: 0;
|
|
|
|
height: 32px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
line-height: 32px;
|
|
- display: inline-block;
|
|
|
|
- vertical-align: middle;
|
|
|
|
margin-right: 20px;
|
|
margin-right: 20px;
|
|
- &::before {
|
|
|
|
- content: "";
|
|
|
|
- display: inline-block;
|
|
|
|
- vertical-align: middle;
|
|
|
|
- width: 8px;
|
|
|
|
- height: 8px;
|
|
|
|
- border: 2px solid #fe5863;
|
|
|
|
- margin-right: 6px;
|
|
|
|
- margin-top: -3px;
|
|
|
|
- border-radius: 50%;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- > span {
|
|
|
|
- color: #626a82;
|
|
|
|
-
|
|
|
|
- &:last-child {
|
|
|
|
- color: #202b4b;
|
|
|
|
- font-weight: 600;
|
|
|
|
- margin-left: 8px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|