麦克风，摄像头，屏幕共享页面

src/components/homeh5.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="homepage">
-    <div class="title">仲裁会议室</div>
+    <div class="title">会议室</div>
     <div id="video"></div>
     <div class="enterRoom">
       <el-form :model="enterRoomFrom" ref="enterRoomFrom">

src/components/homepc.vue

@@ -2,7 +2,7 @@
   <div class="homepage">
     <div id="video"></div>
     <div class="enterRoom">
-      <div class="title">仲裁会议室</div>
+      <div class="title">会议室</div>
       <div class="enterForm">
         <el-form :model="enterRoomFrom" ref="enterRoomFrom">
           <el-form-item>

src/views/components/roomFooter.vue

@@ -1,110 +1,176 @@
 <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>
+      <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>
+      </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">
         </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">
+        </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">
+        </div>
+      </div>
     </div>
-</template>
+  </template>
   
-<script>
-import { startVideo, stopVideo, destructionRoom } from '@/api/room.js'
-export default {
+  <script>
+  import { startVideo, stopVideo, destructionRoom } from '@/api/room.js'
+  export default {
     name: 'Footer',
     // props: [
     //     "roomId"
     // ],
     components: {
-
+  
     },
     data() {
-        return {
-            roomId: null,
-            taskId: null,
-            roleFlag: true,
-            caseId:""
-        };
+      return {
+        roomId: null,
+        taskId: null,
+        roleFlag: true,
+        caseId: "",
+        micFlag: true,
+        videoFlag: true,
+        sharFlag: true,
+      };
     },
     methods: {
-        // 解散房间
-        destructionRoomFn(data) {
-            destructionRoom(data).then(res => {
-                console.log(res, "解散房间");
-            })
-        },
-        exitRoom() {
-            if (this.roleFlag) {
-                this.stopVideoFn();
-                this.destructionRoomFn({ roomId: this.roomId })
-                this.$emit('exitRoom');
-            } else {
-                this.$emit('exitRoom');
-            }
-        },
-        async startVideoFn() {
-            await startVideo({
-                caseId: this.caseId,
-                roomId: this.roomId
-            }).then(res => {
-                this.taskId = res.data.taskId
-                console.log(res.data.taskId, "pppppp");
-            })
-        },
-        stopVideoFn() {
-            stopVideo(this.taskId).then(res => {
-                console.log(res, "KKKKKK");
-            })
-        },
+      // 解散房间
+      destructionRoomFn(data) {
+        destructionRoom(data).then(res => {
+          console.log(res, "解散房间");
+        })
+      },
+      /**开启麦克风 */
+      micClickOn() {
+        this.micFlag = false;
+        this.$emit('micClickOn');
+      },
+      /**关闭麦克风 */
+      micClickOff() {
+        this.micFlag = true;
+        this.$emit('micClickOff');
+      },
+      /**开启摄像头 */
+      videoClickOn() {
+        this.videoFlag = false;
+        this.$emit('videoClickOn');
+      },
+      /**关闭摄像头 */
+      videoClickOff() {
+        this.videoFlag = true;
+        this.$emit('videoClickOff');
+      },
+      /**共享屏幕 */
+      sharClickOn(){
+        this.sharFlag = false;
+        this.$emit('sharClickOn');
+      },
+      /**关闭共享屏幕 */
+      sharClickOff(){
+        this.sharFlag = true;
+        this.$emit('sharClickOff');
+      },
+      exitRoom() {
+        if (this.roleFlag) {
+          this.stopVideoFn();
+          this.destructionRoomFn({ roomId: this.roomId })
+          this.$emit('exitRoom');
+        } else {
+          this.$emit('exitRoom');
+        }
+      },
+      async startVideoFn() {
+        await startVideo({
+          caseId: this.caseId,
+          roomId: this.roomId
+        }).then(res => {
+          this.taskId = res.data.taskId
+          console.log(res.data.taskId, "pppppp");
+        })
+      },
+      stopVideoFn() {
+        stopVideo(this.taskId).then(res => {
+          console.log(res, "KKKKKK");
+        })
+      },
     },
     async mounted() {
-        this.roomId = this.$route.query.roomId;
-        this.caseId = this.$route.query.caseId;
-        let roleFlag = this.$route.query.flag;
-        this.roleFlag = roleFlag;
-        if (roleFlag) {
-            await this.startVideoFn();
-        }
-        // setTimeout(() => {
-        //     console.log(this.roomId, "房间号房间哈房间号房间哈房间号");
-        // });
+      this.roomId = this.$route.query.roomId;
+      this.caseId = this.$route.query.caseId;
+      let roleFlag = this.$route.query.flag;
+      this.roleFlag = roleFlag;
+      if (roleFlag) {
+        await this.startVideoFn();
+      }
+      // setTimeout(() => {
+      //     console.log(this.roomId, "房间号房间哈房间号房间哈房间号");
+      // });
     },
-};
-</script>
+  };
+  </script>
   
-<style scoped>
-.roomFooter {
+  <style scoped>
+  .roomFooter {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: row-reverse;
-}
-
-.mic,
-.video,
-.record,
-.outRoom {
+  }
+  
+  .mic,
+  .video,
+  .sharing,
+  .outRoom {
     cursor: pointer;
     width: 10%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-}
-
-.iconImg {
+  }
+  
+  .operation {
+    width: 90%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+  
+  .iconImg {
     width: 30%;
     height: 60%;
-}
-
-.title {
+  }
+  
+  .title {
     color: aliceblue;
-}
-
-.empty {
+  }
+  
+  .empty {
     width: 60%;
     height: 100%;
-}
-</style>
+  }
   
+  .mic,
+  .video,
+  .sharing {
+    width: 60px;
+    height: 60px;
+    margin-left: 20px;
+  }
   
-  
+  .micImg,
+  .videoImg,
+  .sharImg {
+    width: 40px;
+    height: 40px;
+  }
+  </style>

src/views/room.vue

@@ -11,7 +11,7 @@
                 :id="item">
                 <div class="userName">{{ item }}</div>
             </div>
-            <div class="footer" v-show="showFlag">
+            <div class="footer">
                 <roomFooter @exitRoom="exitRoom" :roomId="roomId"></roomFooter>
             </div>
         </div>