共享屏幕

src/api/home.js

 }
 //根据id查询密文信息
 export function getEncryptInfoByid(caseId) {
-        return axios.get(`${baseUrl}/shortMessage/getMeetingInfo?authId=${caseId}`);
+        return axios.get(`tiaojie/shortMessage/getMeetingInfo?authId=${caseId}`);
 }
 // 案件列表
 export function caseApplicationList(param) {
-    return axios.get(`${baseUrl}/caseApplication/list?caseId=${param}`);
+    return axios.get(`tiaojie/caseApplication/list?caseId=${param}`);
   }
 // 签收案件
 export function msCaseSign(data) {
-        return axios.post(`${baseUrl}/mssignSeal/msCaseSign`, data);
+        return axios.post(`tiaojie/mssignSeal/msCaseSign`, data);
 }
 //根据案件id获取附件
 export function fileList(caseAppliId,annexTypeList) {
-    return axios.get(`${baseUrl}/common/fileList?caseAppliId=${caseAppliId}&annexTypeList=${annexTypeList}`);
+    return axios.get(`tiaojie/common/fileList?caseAppliId=${caseAppliId}&annexTypeList=${annexTypeList}`);
   }

src/views/components/roomFooter.vue

           @click="videoClickOff"
         />
       </div>
-      <!-- <div class="sharing">
+      <div class="sharing">
         <img
           class="sharImg"
           src="@/assets/screenShare_on.png"
           v-else
           @click="sharClickOff"
         />
-      </div> -->
+      </div>
     </div>
   </div>
 </template>

src/views/room.vue

         >
       </div>
       <div class="content">
-        <div class="screenShare" v-if="screenShareFlag"></div>
+        <div
+          class="screenShare"
+          id="screenShare"
+          v-show="screenShareFlag"
+        ></div>
 
         <div :class="videoList">
           <div :class="videoClass" id="localStream">
         <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>
     <!-- 语音转文字弹窗 -->
     <el-drawer title="会议内容" :visible.sync="textVisible" :modal="false">
       <div style="margin-left: 20px; margin-bottom: 10px">
-        <div style="
+        <div
+          style="
             width: 100%;
             display: flex;
             justify-content: space-around;
           <el-upload
             ref="upload"
             :limit="1"
-            action="https://api.xayunmei.com/tiaojieapitest/video/upload"
+            :action="UploadUrl()"
             :headers="headers"
             :data="filedata"
             :on-change="beforeUpload"
               >申请人上传证据</el-button
             >
           </el-upload>
+          <!-- https://api.xayunmei.com/tiaojieapitest/video/upload -->
           <el-upload
             v-if="resFlag"
             ref="upload1"
             :limit="1"
-            action="https://api.xayunmei.com/tiaojieapitest/video/upload"
+            :action="UploadUrl()"
             :headers="headers1"
             :data="filedata1"
             :on-change="beforeUpload1"
             v-if="updataFlag"
             ref="upload3"
             :limit="1"
-            action=""
-            :http-request="upload3"
+            :action="UploadUrl()"
             :headers="headers3"
             :data="filedata3"
             :on-change="beforeUpload3"
               >上传调解书</el-button
             >
           </el-upload>
-          <!-- https://api.xayunmei.com/tiaojieapitest/video/upload -->
         </div>
         <div class="list">
           <div class="applicant" v-if="applicantFile.length > 0">
           </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>
   </div>
 </template>
   selectById,
   selectRoleMenuByCaseId,
   getMenuPermsByUser,
-  videoUpload
+  videoUpload,
 } from "@/api/room";
 import { getWidth, getHeight, getWidthPhone, getModile } from "@/utils/utils";
 import roomFooter from "./components/roomFooter.vue";
     };
   },
   methods: {
+    UploadUrl() {
+      return window.location.origin + "/tiaojie/video/upload";
+    },
     /**点击开启麦克风图标，关闭麦克风 */
     micClickOn() {
       trtc.updateLocalAudio({ mute: true }).then(() => {
       });
     },
     /**共享屏幕 */
-    sharClickOn() {
-      this.sharFlag = false;
-      this.videoList = "videoList1";
-      this.videoClass = "videoItem2";
-      this.screenShareFlag = true;
+    async sharClickOn() {
+      // this.videoList = "videoList1";
+      // this.videoClass = "videoItem2";
+      // this.screenShareFlag = true;
+      await trtc.startScreenShare().then(() => {
+        this.sharFlag = false;
+      });
     },
     /**关闭共享屏幕 */
     sharClickOff() {
-      this.sharFlag = true;
-      this.videoList = "videoList";
-      this.screenShareFlag = false;
-      if (this.userList.length > 1) {
-        this.videoClass = "videoItem1";
-      } else if (this.userList.length < 1) {
-        this.videoClass = "videoItem";
-      } else if (this.userList.length == 1) {
-        this.videoClass = "videoItem3";
-      }
+      trtc.stopScreenShare().then(() => {
+        this.sharFlag = true;
+        this.videoList = "videoList";
+        this.screenShareFlag = false;
+        if (this.userList.length > 1) {
+          this.videoClass = "videoItem1";
+        } else if (this.userList.length < 1) {
+          this.videoClass = "videoItem";
+        } else if (this.userList.length == 1) {
+          this.videoClass = "videoItem3";
+        }
+      });
     },
     /**获取当前用户操作权限 */
     getMenuPermsByUserFn() {
       this.$refs.upload3.clearFiles();
       this.selectByIdFn(this.caseId);
     },
-    upload3(param){
-      const formData = new FormData()
-			formData.append('file', param.file);
-      formData.append('annexType', 7);
-      formData.append('officeFlag', 1);
-      formData.append('caseId', this.caseId);
-      videoUpload(formData).then(res=>{
-        console.log('上传图片成功')
-      })
-			// axios.post(url, formData).then(response => {
-			// 	//根据返回值进行判断是否上传成功
-			// 	if(response.data.flag){
-			// 		//上传成功
-			// 		console.log('上传图片成功')
-			// 	}else{
-			// 		//上传失败
-			// 		console.log('图片上传失败')
-			// 	}
-			// }).catch(response => {
-			// 	console.log('异常处理')
-			// })
-    },
     preview(item, flag) {
       if (item.onlyOfficeFileId) {
         // this.$router.push({
         //   query: { id: item.onlyOfficeFileId, flag: flag },
         // });
         let flag = 1;
-        if(this.editFlag){
-          flag = 1
-        }else{
-          flag = 0
+        if (this.editFlag) {
+          flag = 1;
+        } else {
+          flag = 0;
         }
+        let token = sessionStorage.getItem('token')
         window.open(
-          `http://121.40.189.20:8002/onlyoffice?id=${item.onlyOfficeFileId}&flag=${flag}`,
+          `http://121.40.189.20:8002/onlyoffice?id=${item.onlyOfficeFileId}&flag=${flag}&token=${token}`,
           "_black"
         );
       } else {
-        window.open(
-          "http://121.40.189.20:6001" + item.annexPath,
-          "_black"
-        );
+        window.open(window.location.origin + item.annexPath, "_black");
       }
     },
     // 点击提交修改后的内容
           } else if (item.annexType == 12) {
             this.resFile.push(item);
           } else if (item.annexType == 7) {
-            this.mediateFile.push(item)
+            this.mediateFile.push(item);
           }
         });
       });
       trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, (event) => {
         const userId = event.userId;
         const streamType = event.streamType;
-        this.userList.push(userId);
+        if (streamType == "main") {
+          this.userList.push(userId);
+          setTimeout(() => {
+            trtc.startRemoteVideo({ userId, streamType, view: `${userId}` });
+          });
+        } else if (streamType == "main") {
+          trtc.startRemoteVideo({ userId, streamType, view: "screenShare" });
+          this.videoList = "videoList1";
+          this.videoClass = "videoItem2";
+          this.screenShareFlag = true;
+        }
         setTimeout(() => {
           let aoido = trtc.getAudioTrack(userId);
           this.asrList[this.userList[this.userList.length - 1]] = new ASR({
                 `<span>${res.result.voice_text_str}</span>`;
             };
         }, 2000);
-        setTimeout(() => {
-          trtc.startRemoteVideo({ userId, streamType, view: `${userId}` });
-        });
-
         // })
       });
     },
     // 删除退出会议人员列表
     deletePushVideo() {
       trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, (event) => {
+        const streamType = event.streamType;
         const userId = event.userId;
-        if (this.hostId == userId) {
-          alert("主持人已经解散会议");
-          this.$router.push({
-            name: "Home",
+        if (streamType == "main") {
+          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);
+          }
+          Object.keys(this.asrList).forEach((key) => {
+            this.asrList[userId].stop();
           });
-          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);
+        } else if (streamType == "sub") {
+          this.sharFlag = true;
+          this.videoList = "videoList";
+          this.screenShareFlag = false;
+          if (this.userList.length > 1) {
+            this.videoClass = "videoItem1";
+          } else if (this.userList.length < 1) {
+            this.videoClass = "videoItem";
+          } else if (this.userList.length == 1) {
+            this.videoClass = "videoItem3";
+          }
         }
-        Object.keys(this.asrList).forEach((key) => {
-          this.asrList[userId].stop();
-        });
       });
     },
     // 根据caseId查询房间相关信息

vue.config.js

         changeOrigin: true, // 是否改变Origin头信息
         secure : false,
         pathRewrite: {
-          '^/api': '' // 将/api前缀重写为空字符串
+          '^/tiaojie': '' // 将/api前缀重写为空字符串
         },
       },
       '/zhongcai': {