Browse Source

共享屏幕

gyj 2 years ago
parent
commit
eeb3ae6e1c
4 changed files with 114 additions and 90 deletions
  1. 4
    4
      src/api/home.js
  2. 2
    2
      src/views/components/roomFooter.vue
  3. 107
    83
      src/views/room.vue
  4. 1
    1
      vue.config.js

+ 4
- 4
src/api/home.js View File

32
 }
32
 }
33
 //根据id查询密文信息
33
 //根据id查询密文信息
34
 export function getEncryptInfoByid(caseId) {
34
 export function getEncryptInfoByid(caseId) {
35
-        return axios.get(`${baseUrl}/shortMessage/getMeetingInfo?authId=${caseId}`);
35
+        return axios.get(`tiaojie/shortMessage/getMeetingInfo?authId=${caseId}`);
36
 }
36
 }
37
 // 案件列表
37
 // 案件列表
38
 export function caseApplicationList(param) {
38
 export function caseApplicationList(param) {
39
-    return axios.get(`${baseUrl}/caseApplication/list?caseId=${param}`);
39
+    return axios.get(`tiaojie/caseApplication/list?caseId=${param}`);
40
   }
40
   }
41
 // 签收案件
41
 // 签收案件
42
 export function msCaseSign(data) {
42
 export function msCaseSign(data) {
43
-        return axios.post(`${baseUrl}/mssignSeal/msCaseSign`, data);
43
+        return axios.post(`tiaojie/mssignSeal/msCaseSign`, data);
44
 }
44
 }
45
 //根据案件id获取附件
45
 //根据案件id获取附件
46
 export function fileList(caseAppliId,annexTypeList) {
46
 export function fileList(caseAppliId,annexTypeList) {
47
-    return axios.get(`${baseUrl}/common/fileList?caseAppliId=${caseAppliId}&annexTypeList=${annexTypeList}`);
47
+    return axios.get(`tiaojie/common/fileList?caseAppliId=${caseAppliId}&annexTypeList=${annexTypeList}`);
48
   }
48
   }

+ 2
- 2
src/views/components/roomFooter.vue View File

41
           @click="videoClickOff"
41
           @click="videoClickOff"
42
         />
42
         />
43
       </div>
43
       </div>
44
-      <!-- <div class="sharing">
44
+      <div class="sharing">
45
         <img
45
         <img
46
           class="sharImg"
46
           class="sharImg"
47
           src="@/assets/screenShare_on.png"
47
           src="@/assets/screenShare_on.png"
56
           v-else
56
           v-else
57
           @click="sharClickOff"
57
           @click="sharClickOff"
58
         />
58
         />
59
-      </div> -->
59
+      </div>
60
     </div>
60
     </div>
61
   </div>
61
   </div>
62
 </template>
62
 </template>

+ 107
- 83
src/views/room.vue View File

7
         >
7
         >
8
       </div>
8
       </div>
9
       <div class="content">
9
       <div class="content">
10
-        <div class="screenShare" v-if="screenShareFlag"></div>
10
+        <div
11
+          class="screenShare"
12
+          id="screenShare"
13
+          v-show="screenShareFlag"
14
+        ></div>
11
 
15
 
12
         <div :class="videoList">
16
         <div :class="videoList">
13
           <div :class="videoClass" id="localStream">
17
           <div :class="videoClass" id="localStream">
47
         <div :class="userClassPhone" id="localStream">
51
         <div :class="userClassPhone" id="localStream">
48
           <div class="userNamePhone">{{ userId }}</div>
52
           <div class="userNamePhone">{{ userId }}</div>
49
         </div>
53
         </div>
50
-        <div :class="userClassPhone" v-for="(item, index) in userList" :key="index" :id="item">
54
+        <div
55
+          :class="userClassPhone"
56
+          v-for="(item, index) in userList"
57
+          :key="index"
58
+          :id="item"
59
+        >
51
           <div class="userNamePhone">{{ item }}</div>
60
           <div class="userNamePhone">{{ item }}</div>
52
         </div>
61
         </div>
53
       </div>
62
       </div>
55
     <!-- 语音转文字弹窗 -->
64
     <!-- 语音转文字弹窗 -->
56
     <el-drawer title="会议内容" :visible.sync="textVisible" :modal="false">
65
     <el-drawer title="会议内容" :visible.sync="textVisible" :modal="false">
57
       <div style="margin-left: 20px; margin-bottom: 10px">
66
       <div style="margin-left: 20px; margin-bottom: 10px">
58
-        <div style="
67
+        <div
68
+          style="
59
             width: 100%;
69
             width: 100%;
60
             display: flex;
70
             display: flex;
61
             justify-content: space-around;
71
             justify-content: space-around;
65
           <el-upload
75
           <el-upload
66
             ref="upload"
76
             ref="upload"
67
             :limit="1"
77
             :limit="1"
68
-            action="https://api.xayunmei.com/tiaojieapitest/video/upload"
78
+            :action="UploadUrl()"
69
             :headers="headers"
79
             :headers="headers"
70
             :data="filedata"
80
             :data="filedata"
71
             :on-change="beforeUpload"
81
             :on-change="beforeUpload"
77
               >申请人上传证据</el-button
87
               >申请人上传证据</el-button
78
             >
88
             >
79
           </el-upload>
89
           </el-upload>
90
+          <!-- https://api.xayunmei.com/tiaojieapitest/video/upload -->
80
           <el-upload
91
           <el-upload
81
             v-if="resFlag"
92
             v-if="resFlag"
82
             ref="upload1"
93
             ref="upload1"
83
             :limit="1"
94
             :limit="1"
84
-            action="https://api.xayunmei.com/tiaojieapitest/video/upload"
95
+            :action="UploadUrl()"
85
             :headers="headers1"
96
             :headers="headers1"
86
             :data="filedata1"
97
             :data="filedata1"
87
             :on-change="beforeUpload1"
98
             :on-change="beforeUpload1"
96
             v-if="updataFlag"
107
             v-if="updataFlag"
97
             ref="upload3"
108
             ref="upload3"
98
             :limit="1"
109
             :limit="1"
99
-            action=""
100
-            :http-request="upload3"
110
+            :action="UploadUrl()"
101
             :headers="headers3"
111
             :headers="headers3"
102
             :data="filedata3"
112
             :data="filedata3"
103
             :on-change="beforeUpload3"
113
             :on-change="beforeUpload3"
109
               >上传调解书</el-button
119
               >上传调解书</el-button
110
             >
120
             >
111
           </el-upload>
121
           </el-upload>
112
-          <!-- https://api.xayunmei.com/tiaojieapitest/video/upload -->
113
         </div>
122
         </div>
114
         <div class="list">
123
         <div class="list">
115
           <div class="applicant" v-if="applicantFile.length > 0">
124
           <div class="applicant" v-if="applicantFile.length > 0">
147
           </div>
156
           </div>
148
         </div>
157
         </div>
149
       </div>
158
       </div>
150
-      <quill-editor ref="myQuillEditor" v-model="contentValue" :options="editorOption" @blur="onEditorBlur($event)"
151
-        @focus="onEditorFocus($event)" @ready="onEditorReady($event)"></quill-editor>
152
-      <el-button class="updataBtn" @click="updataClick" type="primary" :disabled="!updataFlag">确认修改内容</el-button>
159
+      <quill-editor
160
+        ref="myQuillEditor"
161
+        v-model="contentValue"
162
+        :options="editorOption"
163
+        @blur="onEditorBlur($event)"
164
+        @focus="onEditorFocus($event)"
165
+        @ready="onEditorReady($event)"
166
+      ></quill-editor>
167
+      <el-button
168
+        class="updataBtn"
169
+        @click="updataClick"
170
+        type="primary"
171
+        :disabled="!updataFlag"
172
+        >确认修改内容</el-button
173
+      >
153
     </el-drawer>
174
     </el-drawer>
154
   </div>
175
   </div>
155
 </template>
176
 </template>
162
   selectById,
183
   selectById,
163
   selectRoleMenuByCaseId,
184
   selectRoleMenuByCaseId,
164
   getMenuPermsByUser,
185
   getMenuPermsByUser,
165
-  videoUpload
186
+  videoUpload,
166
 } from "@/api/room";
187
 } from "@/api/room";
167
 import { getWidth, getHeight, getWidthPhone, getModile } from "@/utils/utils";
188
 import { getWidth, getHeight, getWidthPhone, getModile } from "@/utils/utils";
168
 import roomFooter from "./components/roomFooter.vue";
189
 import roomFooter from "./components/roomFooter.vue";
247
     };
268
     };
248
   },
269
   },
249
   methods: {
270
   methods: {
271
+    UploadUrl() {
272
+      return window.location.origin + "/tiaojie/video/upload";
273
+    },
250
     /**点击开启麦克风图标,关闭麦克风 */
274
     /**点击开启麦克风图标,关闭麦克风 */
251
     micClickOn() {
275
     micClickOn() {
252
       trtc.updateLocalAudio({ mute: true }).then(() => {
276
       trtc.updateLocalAudio({ mute: true }).then(() => {
288
       });
312
       });
289
     },
313
     },
290
     /**共享屏幕 */
314
     /**共享屏幕 */
291
-    sharClickOn() {
292
-      this.sharFlag = false;
293
-      this.videoList = "videoList1";
294
-      this.videoClass = "videoItem2";
295
-      this.screenShareFlag = true;
315
+    async sharClickOn() {
316
+      // this.videoList = "videoList1";
317
+      // this.videoClass = "videoItem2";
318
+      // this.screenShareFlag = true;
319
+      await trtc.startScreenShare().then(() => {
320
+        this.sharFlag = false;
321
+      });
296
     },
322
     },
297
     /**关闭共享屏幕 */
323
     /**关闭共享屏幕 */
298
     sharClickOff() {
324
     sharClickOff() {
299
-      this.sharFlag = true;
300
-      this.videoList = "videoList";
301
-      this.screenShareFlag = false;
302
-      if (this.userList.length > 1) {
303
-        this.videoClass = "videoItem1";
304
-      } else if (this.userList.length < 1) {
305
-        this.videoClass = "videoItem";
306
-      } else if (this.userList.length == 1) {
307
-        this.videoClass = "videoItem3";
308
-      }
325
+      trtc.stopScreenShare().then(() => {
326
+        this.sharFlag = true;
327
+        this.videoList = "videoList";
328
+        this.screenShareFlag = false;
329
+        if (this.userList.length > 1) {
330
+          this.videoClass = "videoItem1";
331
+        } else if (this.userList.length < 1) {
332
+          this.videoClass = "videoItem";
333
+        } else if (this.userList.length == 1) {
334
+          this.videoClass = "videoItem3";
335
+        }
336
+      });
309
     },
337
     },
310
     /**获取当前用户操作权限 */
338
     /**获取当前用户操作权限 */
311
     getMenuPermsByUserFn() {
339
     getMenuPermsByUserFn() {
360
       this.$refs.upload3.clearFiles();
388
       this.$refs.upload3.clearFiles();
361
       this.selectByIdFn(this.caseId);
389
       this.selectByIdFn(this.caseId);
362
     },
390
     },
363
-    upload3(param){
364
-      const formData = new FormData()
365
-			formData.append('file', param.file);
366
-      formData.append('annexType', 7);
367
-      formData.append('officeFlag', 1);
368
-      formData.append('caseId', this.caseId);
369
-      videoUpload(formData).then(res=>{
370
-        console.log('上传图片成功')
371
-      })
372
-			// axios.post(url, formData).then(response => {
373
-			// 	//根据返回值进行判断是否上传成功
374
-			// 	if(response.data.flag){
375
-			// 		//上传成功
376
-			// 		console.log('上传图片成功')
377
-			// 	}else{
378
-			// 		//上传失败
379
-			// 		console.log('图片上传失败')
380
-			// 	}
381
-			// }).catch(response => {
382
-			// 	console.log('异常处理')
383
-			// })
384
-    },
385
     preview(item, flag) {
391
     preview(item, flag) {
386
       if (item.onlyOfficeFileId) {
392
       if (item.onlyOfficeFileId) {
387
         // this.$router.push({
393
         // this.$router.push({
389
         //   query: { id: item.onlyOfficeFileId, flag: flag },
395
         //   query: { id: item.onlyOfficeFileId, flag: flag },
390
         // });
396
         // });
391
         let flag = 1;
397
         let flag = 1;
392
-        if(this.editFlag){
393
-          flag = 1
394
-        }else{
395
-          flag = 0
398
+        if (this.editFlag) {
399
+          flag = 1;
400
+        } else {
401
+          flag = 0;
396
         }
402
         }
403
+        let token = sessionStorage.getItem('token')
397
         window.open(
404
         window.open(
398
-          `http://121.40.189.20:8002/onlyoffice?id=${item.onlyOfficeFileId}&flag=${flag}`,
405
+          `http://121.40.189.20:8002/onlyoffice?id=${item.onlyOfficeFileId}&flag=${flag}&token=${token}`,
399
           "_black"
406
           "_black"
400
         );
407
         );
401
       } else {
408
       } else {
402
-        window.open(
403
-          "http://121.40.189.20:6001" + item.annexPath,
404
-          "_black"
405
-        );
409
+        window.open(window.location.origin + item.annexPath, "_black");
406
       }
410
       }
407
     },
411
     },
408
     // 点击提交修改后的内容
412
     // 点击提交修改后的内容
465
           } else if (item.annexType == 12) {
469
           } else if (item.annexType == 12) {
466
             this.resFile.push(item);
470
             this.resFile.push(item);
467
           } else if (item.annexType == 7) {
471
           } else if (item.annexType == 7) {
468
-            this.mediateFile.push(item)
472
+            this.mediateFile.push(item);
469
           }
473
           }
470
         });
474
         });
471
       });
475
       });
496
       trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, (event) => {
500
       trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, (event) => {
497
         const userId = event.userId;
501
         const userId = event.userId;
498
         const streamType = event.streamType;
502
         const streamType = event.streamType;
499
-        this.userList.push(userId);
503
+        if (streamType == "main") {
504
+          this.userList.push(userId);
505
+          setTimeout(() => {
506
+            trtc.startRemoteVideo({ userId, streamType, view: `${userId}` });
507
+          });
508
+        } else if (streamType == "main") {
509
+          trtc.startRemoteVideo({ userId, streamType, view: "screenShare" });
510
+          this.videoList = "videoList1";
511
+          this.videoClass = "videoItem2";
512
+          this.screenShareFlag = true;
513
+        }
500
         setTimeout(() => {
514
         setTimeout(() => {
501
           let aoido = trtc.getAudioTrack(userId);
515
           let aoido = trtc.getAudioTrack(userId);
502
           this.asrList[this.userList[this.userList.length - 1]] = new ASR({
516
           this.asrList[this.userList[this.userList.length - 1]] = new ASR({
530
                 `<span>${res.result.voice_text_str}</span>`;
544
                 `<span>${res.result.voice_text_str}</span>`;
531
             };
545
             };
532
         }, 2000);
546
         }, 2000);
533
-        setTimeout(() => {
534
-          trtc.startRemoteVideo({ userId, streamType, view: `${userId}` });
535
-        });
536
-
537
         // })
547
         // })
538
       });
548
       });
539
     },
549
     },
540
     // 删除退出会议人员列表
550
     // 删除退出会议人员列表
541
     deletePushVideo() {
551
     deletePushVideo() {
542
       trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, (event) => {
552
       trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, (event) => {
553
+        const streamType = event.streamType;
543
         const userId = event.userId;
554
         const userId = event.userId;
544
-        if (this.hostId == userId) {
545
-          alert("主持人已经解散会议");
546
-          this.$router.push({
547
-            name: "Home",
555
+        if (streamType == "main") {
556
+          if (this.hostId == userId) {
557
+            alert("主持人已经解散会议");
558
+            this.$router.push({
559
+              name: "Home",
560
+            });
561
+            this.userList = [];
562
+            return;
563
+          }
564
+          let deleteIndex = this.userList.indexOf(userId);
565
+          this.userList = this.userList.filter((item) => item !== userId);
566
+          if (deleteIndex !== -1) {
567
+            this.userList.splice(deleteIndex, 1);
568
+          }
569
+          if (this.modileFlag) {
570
+            // this.userHeight = getHeight(this.userList);
571
+          } else {
572
+            this.userClassPhone = getWidthPhone(this.userList);
573
+          }
574
+          Object.keys(this.asrList).forEach((key) => {
575
+            this.asrList[userId].stop();
548
           });
576
           });
549
-          this.userList = [];
550
-          return;
551
-        }
552
-        let deleteIndex = this.userList.indexOf(userId);
553
-        this.userList = this.userList.filter((item) => item !== userId);
554
-        if (deleteIndex !== -1) {
555
-          this.userList.splice(deleteIndex, 1);
556
-        }
557
-        if (this.modileFlag) {
558
-          // this.userHeight = getHeight(this.userList);
559
-        } else {
560
-          this.userClassPhone = getWidthPhone(this.userList);
577
+        } else if (streamType == "sub") {
578
+          this.sharFlag = true;
579
+          this.videoList = "videoList";
580
+          this.screenShareFlag = false;
581
+          if (this.userList.length > 1) {
582
+            this.videoClass = "videoItem1";
583
+          } else if (this.userList.length < 1) {
584
+            this.videoClass = "videoItem";
585
+          } else if (this.userList.length == 1) {
586
+            this.videoClass = "videoItem3";
587
+          }
561
         }
588
         }
562
-        Object.keys(this.asrList).forEach((key) => {
563
-          this.asrList[userId].stop();
564
-        });
565
       });
589
       });
566
     },
590
     },
567
     // 根据caseId查询房间相关信息
591
     // 根据caseId查询房间相关信息

+ 1
- 1
vue.config.js View File

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