'视频会议点击关闭摄像头解散房间bug'

src/views/components/roomFooter.vue

@@ -1,75 +1,35 @@
 <template>
   <div class="roomFooter">
     <div class="outRoom">
-      <el-button type="danger" @click="exitRoom" v-if="!roleFlag"
-        >退出房间</el-button
-      >
-      <el-button type="danger" @click="exitRoom" v-if="roleFlag"
-        >解散房间</el-button
-      >
+      <el-button type="danger" @click="exitRoom" v-if="!roleFlag">退出房间</el-button>
+      <el-button type="danger" @click="exitRoom" v-if="roleFlag">解散房间</el-button>
     </div>
     <div class="operation">
       <div class="mic">
-        <img
-          class="micImg"
-          src="@/assets/mic_on.png"
-          alt=""
-          v-if="micFlag"
-          @click="micClickOn"
-        />
-        <img
-          class="micImg"
-          src="@/assets/mic_off.png"
-          alt=""
-          v-else
-          @click="micClickOff"
-        />
+        <img class="micImg" src="@/assets/mic_on.png" alt="" v-if="micFlag" @click="micClickOn" />
+        <img class="micImg" src="@/assets/mic_off.png" alt="" v-else @click="micClickOff" />
       </div>
       <div class="video">
-        <img
-          class="videoImg"
-          src="@/assets/video_on.png"
-          alt=""
-          v-if="videoFlag"
-          @click="videoClickOn"
-        />
-        <img
-          class="videoImg"
-          src="@/assets/video_off.png"
-          alt=""
-          v-else
-          @click="videoClickOff"
-        />
+        <img class="videoImg" src="@/assets/video_on.png" alt="" v-if="videoFlag" @click="videoClickOn" />
+        <img class="videoImg" src="@/assets/video_off.png" alt="" v-else @click="videoClickOff" />
       </div>
       <div class="sharing">
-        <img
-          class="sharImg"
-          src="@/assets/screenShare_on.png"
-          alt=""
-          v-if="sharFlag"
-          @click="sharClickOn"
-        />
-        <img
-          class="sharImg"
-          src="@/assets/screenShare_off.png"
-          alt=""
-          v-else
-          @click="sharClickOff"
-        />
-        
+        <img class="sharImg" src="@/assets/screenShare_on.png" alt="" v-if="sharFlag" @click="sharClickOn" />
+        <img class="sharImg" src="@/assets/screenShare_off.png" alt="" v-else @click="sharClickOff" />
+
       </div>
       <div class="mediationPop">
-         <el-button type="warning" @click="mediationPop">调解</el-button>
+        <el-button type="warning" @click="mediationPop">调解</el-button>
       </div>
     </div>
   </div>
 </template>
-  
-  <script>
+
+<script>
 import { startVideo, stopVideo, destructionRoom } from "@/api/room.js";
 export default {
   name: "Footer",
-  props: ["micFlag","videoFlag","sharFlag"],
+  props: ["micFlag", "videoFlag", "sharFlag"],
   components: {},
   data() {
     return {
@@ -112,7 +72,7 @@ export default {
       this.$emit("sharClickOff");
     },
     // 弹出调解内容
-    mediationPop(){
+    mediationPop() {
       this.$emit("mediationPop");
     },
     exitRoom() {
@@ -153,8 +113,8 @@ export default {
   },
 };
 </script>
-  
-  <style scoped>
+
+<style scoped>
 .roomFooter {
   width: 100%;
   height: 100%;
@@ -202,9 +162,11 @@ export default {
   height: 60px;
   margin-left: 20px;
 }
-.mediationPop{
+
+.mediationPop {
   margin-left: 20px;
 }
+
 .micImg,
 .videoImg,
 .sharImg {

src/views/onlyOffice.vue

@@ -35,7 +35,6 @@ export default {
             }
             axios.get(`http://121.40.189.20:9090/onlyOfficeConfig/${edit}/${id}/${this.userId}/desktop/true`).then(res => {
                 this.config = res.data;
-                debugger
                 var docEditor = new DocsAPI.DocEditor("placeholder", this.config);
             })
         },

src/views/room.vue

@@ -2,46 +2,25 @@
   <div class="page">
     <div class="roompage" @mouseover="mouseHover" v-if="modileFlag">
       <div class="txtContent">
-        <el-tag type="danger" @click="txtContent" v-if="modileFlag"
-          >会议内容</el-tag
-        >
+        <el-tag type="danger" @click="txtContent" v-if="modileFlag">会议内容</el-tag>
       </div>
       <div class="content">
-        <div
-          class="screenShare"
-          id="screenShare"
-          v-show="screenShareFlag"
-        ></div>
+        <div class="screenShare" id="screenShare" v-show="screenShareFlag"></div>
 
         <div :class="videoList">
           <div :class="videoClass" id="localStream">
             <div class="userName">{{ userId }}</div>
           </div>
-          <div
-            :class="videoClass"
-            v-for="(item, index) in userList"
-            :key="index"
-            :id="item"
-          >
+          <div :class="videoClass" v-for="(item, index) in userList" :key="index" :id="item">
             <div class="userName">{{ item }}</div>
           </div>
         </div>
       </div>
       <div class="footerList">
-        <roomFooter
-          @exitRoom="exitRoom"
-          @micClickOn="micClickOn"
-          @micClickOff="micClickOff"
-          @videoClickOn="videoClickOn"
-          @videoClickOff="videoClickOff"
-          @sharClickOn="sharClickOn"
-          @sharClickOff="sharClickOff"
-          @mediationPop="mediationPop"
-          :roomId="roomId"
-          :micFlag="micFlag"
-          :videoFlag="videoFlag"
-          :sharFlag="sharFlag"
-        ></roomFooter>
+        <roomFooter @exitRoom="exitRoom" @micClickOn="micClickOn" @micClickOff="micClickOff"
+          @videoClickOn="videoClickOn" @videoClickOff="videoClickOff" @sharClickOn="sharClickOn"
+          @sharClickOff="sharClickOff" @mediationPop="mediationPop" :roomId="roomId" :micFlag="micFlag"
+          :videoFlag="videoFlag" :sharFlag="sharFlag"></roomFooter>
       </div>
     </div>
     <div class="roomPhone" v-if="!modileFlag">
@@ -52,12 +31,7 @@
         <div :class="userClassPhone" id="localStream">
           <div class="userNamePhone">{{ userId }}</div>
         </div>
-        <div
-          :class="userClassPhone"
-          v-for="(item, index) in userList"
-          :key="index"
-          :id="item"
-        >
+        <div :class="userClassPhone" v-for="(item, index) in userList" :key="index" :id="item">
           <div class="userNamePhone">{{ item }}</div>
         </div>
       </div>
@@ -156,111 +130,52 @@
           </div>
         </div>
       </div> -->
-      <quill-editor
-        ref="myQuillEditor"
-        v-model="contentValue"
-        :options="editorOption"
-        @blur="onEditorBlur($event)"
-        @focus="onEditorFocus($event)"
-        @ready="onEditorReady($event)"
-      ></quill-editor>
-      <el-button
-        class="updataBtn"
-        @click="updataClick"
-        type="primary"
-        :disabled="!updataFlag"
-        >确认修改内容</el-button
-      >
+      <quill-editor ref="myQuillEditor" v-model="contentValue" :options="editorOption" @blur="onEditorBlur($event)"
+        @focus="onEditorFocus($event)" @ready="onEditorReady($event)"></quill-editor>
+      <el-button class="updataBtn" @click="updataClick" type="primary" :disabled="!updataFlag">确认修改内容</el-button>
     </el-drawer>
     <!-- 调解 -->
     <el-drawer :visible.sync="drawerMediatio" direction="ltr" title="调解内容">
-      <div
-        style="
+      <div style="
           width: 100%;
           display: flex;
           justify-content: space-around;
           margin-bottom: 10px;
           margin-top: 20px;
-        "
-      >
-        <el-upload
-          ref="upload"
-          :limit="1"
-          :action="UploadUrl()"
-          :headers="headers"
-          :data="filedata"
-          :on-change="beforeUpload"
-          :on-success="handlSuccess"
-          :file-list="fileList"
-          v-if="appFlag"
-        >
-          <el-button slot="trigger" size="small" type="primary"
-            >申请人上传证据</el-button
-          >
+        ">
+        <el-upload ref="upload" :limit="1" :action="UploadUrl()" :headers="headers" :data="filedata"
+          :on-change="beforeUpload" :on-success="handlSuccess" :file-list="fileList" v-if="appFlag">
+          <el-button slot="trigger" size="small" type="primary">申请人上传证据</el-button>
         </el-upload>
-        <el-upload
-          ref="upload1"
-          :limit="1"
-          :action="UploadUrl()"
-          :headers="headers1"
-          :data="filedata1"
-          :on-change="beforeUpload1"
-          :on-success="handlSuccess1"
-          :file-list="fileList1"
-          v-if="resFlag"
-        >
-          <el-button slot="trigger" size="small" type="primary"
-            >被申请人上传证据</el-button
-          >
+        <el-upload ref="upload1" :limit="1" :action="UploadUrl()" :headers="headers1" :data="filedata1"
+          :on-change="beforeUpload1" :on-success="handlSuccess1" :file-list="fileList1" v-if="resFlag">
+          <el-button slot="trigger" size="small" type="primary">被申请人上传证据</el-button>
         </el-upload>
-        <el-upload
-          ref="upload3"
-          :limit="1"
-          :action="UploadUrl()"
-          :headers="headers3"
-          :data="filedata3"
-          :on-change="beforeUpload3"
-          :on-success="handlSuccess3"
-          :file-list="fileList3"
-          accept=".doc,.docx"
-          v-if="updataFlag"
-        >
-          <el-button slot="trigger" size="small" type="primary"
-            >上传调解书</el-button
-          >
+        <el-upload ref="upload3" :limit="1" :action="UploadUrl()" :headers="headers3" :data="filedata3"
+          :on-change="beforeUpload3" :on-success="handlSuccess3" :file-list="fileList3" accept=".doc,.docx"
+          v-if="updataFlag">
+          <el-button slot="trigger" size="small" type="primary">上传调解书</el-button>
         </el-upload>
       </div>
       <div class="list">
         <div class="applicant" v-if="applicantFile.length > 0">
           <div>申请人证据</div>
-          <div
-            style="color: #104fad; cursor: pointer"
-            v-for="(item, index) in applicantFile"
-            :key="index"
-            @click="preview(item, 0)"
-          >
+          <div style="color: #104fad; cursor: pointer" v-for="(item, index) in applicantFile" :key="index"
+            @click="preview(item, 0)">
             {{ item.annexName }}
           </div>
         </div>
         <div class="res" v-if="resFile.length > 0">
           <div>被申请人证据</div>
-          <div
-            style="color: #104fad; cursor: pointer"
-            v-for="(item, index) in resFile"
-            :key="index"
-            @click="preview(item, 0)"
-          >
+          <div style="color: #104fad; cursor: pointer" v-for="(item, index) in resFile" :key="index"
+            @click="preview(item, 0)">
             {{ item.annexName }}
           </div>
         </div>
         <div class="mediate" v-if="mediateFile.length > 0">
           <div>调解书</div>
-          <div
-            style="color: #104fad; cursor: pointer"
-            v-for="(item, index) in mediateFile"
-            :key="index"
-            @click="preview(item, 1)"
-          >
+          <div style="color: #104fad; cursor: pointer" v-for="(item, index) in mediateFile" :key="index"
+            @click="preview(item, 1)">
             {{ item.annexName }}
           </div>
         </div>
@@ -296,7 +211,7 @@
 </template>
 
 <script>
-import { getUsersig, reserveConferenceList,confirmMeetingResult } from "@/api/home";
+import { getUsersig, reserveConferenceList, confirmMeetingResult } from "@/api/home";
 import {
   secretaryRoleByUserId,
   htmlToPDF,
@@ -352,11 +267,11 @@ export default {
       applicantFile: [],
       resFile: [],
       mediateFile: [],
-      formData:{
-        mediaResult:1,
-        sealFlag:1
+      formData: {
+        mediaResult: 1,
+        sealFlag: 1
       },
-      caseFlowId:null,
+      caseFlowId: null,
       headers: {
         // Authorization: "Bearer " + token,
         Authorization: "",
@@ -532,7 +447,9 @@ export default {
         }
         let token = sessionStorage.getItem("token");
         window.open(
-          `http://121.40.189.20:8002/onlyoffice?id=${item.onlyOfficeFileId}&flag=${flag}&token=${token}`,
+          // `http://121.40.189.20:8002/onlyoffice?id=${item.onlyOfficeFileId}&flag=${flag}&token=${token}`,
+          // "_black"
+          `http://localhost:81/onlyoffice?id=${item.onlyOfficeFileId}&flag=${flag}&token=${token}`,
           "_black"
         );
       } else {
@@ -619,8 +536,10 @@ export default {
       });
       this.localStreamAsr.stop();
       await trtc.exitRoom();
-      await trtc.updateLocalVideo({ publish: false });
-      await trtc.updateLocalAudio({ publish: false });
+      // await trtc.updateLocalVideo({ publish: false });
+      // await trtc.updateLocalAudio({ publish: false });
+      await trtc.stopLocalVideo();
+      await trtc.stopLocalAudio();
       await trtc.destroy();
       this.$router.push({
         name: "Home",
@@ -683,30 +602,41 @@ export default {
         // })
       });
     },
+    /**主持人解散房间监听事件 */
+    exitRoomAll() {
+      trtc.on(TRTC.EVENT.KICKED_OUT, event => {
+        console.log(event.reason);
+        alert("主持人已经解散会议");
+        this.$router.push({
+          name: "Home",
+        });
+        this.userList = [];
+      });
+    },
     // 删除退出会议人员列表
     deletePushVideo() {
       trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, (event) => {
         const streamType = event.streamType;
         const userId = event.userId;
         if (streamType == "main") {
-          if (this.hostId == userId) {
-            alert("主持人已经解散会议");
-            this.$router.push({
-              name: "Home",
-            });
-            this.userList = [];
-            return;
-          }
+          // if (this.hostId == userId) {
+          //   alert("主持人已经解散会议");
+          //   this.$router.push({
+          //     name: "Home",
+          //   });
+          //   this.userList = [];
+          //   return;
+          // }
           let deleteIndex = this.userList.indexOf(userId);
           this.userList = this.userList.filter((item) => item !== userId);
           if (deleteIndex !== -1) {
             this.userList.splice(deleteIndex, 1);
           }
-          if (this.modileFlag) {
-            // this.userHeight = getHeight(this.userList);
-          } else {
-            this.userClassPhone = getWidthPhone(this.userList);
-          }
+          // if (this.modileFlag) {
+          //   // this.userHeight = getHeight(this.userList);
+          // } else {
+          //   this.userClassPhone = getWidthPhone(this.userList);
+          // }
           Object.keys(this.asrList).forEach((key) => {
             this.asrList[userId].stop();
           });
@@ -748,25 +678,25 @@ export default {
         }
       });
     },
-        // 调解
+    // 调解
     mediationPop() {
       this.drawerMediatio = true;
       this.selectByIdFn(this.caseId);
-       setInterval(() => {
+      setInterval(() => {
         this.selectByIdFn(this.caseId);
       }, 8000);
       this.selectRoleMenuByCaseIdFn(this.caseId);
       this.getMenuPermsByUserFn();
     },
     // 确定会议结果
-    determineMeeting(){
+    determineMeeting() {
       let valueMeeting = {
-        id:this.caseId,
+        id: this.caseId,
         mediaResult: this.formData.mediaResult,
-        sealFlag:this.formData.sealFlag,
-        caseFlowId:this.caseFlowId
+        sealFlag: this.formData.sealFlag,
+        caseFlowId: this.caseFlowId
       }
-      confirmMeetingResult(valueMeeting).then(res=>{
+      confirmMeetingResult(valueMeeting).then(res => {
         if (res.code == 200) {
           this.$message({
             message: "确定成功",
@@ -833,6 +763,7 @@ export default {
     });
     this.getPushVideo();
     this.deletePushVideo();
+    this.exitRoomAll();
     try {
       await trtc.enterRoom({
         roomId: Number(roomId),
@@ -898,11 +829,13 @@ export default {
   width: 100%;
   height: 100vh;
 }
+
 .content {
   width: 100%;
   height: 90%;
   display: flex;
 }
+
 .videoList {
   width: 100%;
   height: 100%;
@@ -914,6 +847,7 @@ export default {
   margin-bottom: 20px;
   position: relative;
 }
+
 .videoList1 {
   width: 20%;
   height: 100%;
@@ -925,6 +859,7 @@ export default {
   margin-bottom: 20px;
   position: relative;
 }
+
 .txtContent {
   width: 100px;
   height: 50px;
@@ -941,18 +876,21 @@ export default {
   background: red;
   border-radius: 20px;
 }
+
 .videoItem1 {
   width: 32%;
   height: 32%;
   background: red;
   border-radius: 20px;
 }
+
 .videoItem3 {
   width: 48%;
   height: 100%;
   background: red;
   border-radius: 20px;
 }
+
 .videoItem2 {
   width: 90%;
   height: 25%;
@@ -970,11 +908,13 @@ export default {
   bottom: 0;
   z-index: 10;
 }
+
 .screenShare {
   width: 80%;
   height: 100%;
   background: yellow;
 }
+
 .userName {
   border-radius: 10px;
   width: 90px;
@@ -988,11 +928,13 @@ export default {
   z-index: 9;
   color: #ffffff;
 }
+
 .footerList {
   width: 100%;
   height: 10%;
   background: green;
 }
+
 .userNamePhone {
   border-radius: 10px;
   min-width: 20%;