mdm-client 1.0.0

package/src/components/MeetingReadyDialog/MeetingReadyDialog.vue

@@ -0,0 +1,583 @@
+<template>
+  <div class="dialog">
+    <div class="dialog-head">
+      <div class="close-icon" @click="handleClose"></div>
+    </div>
+    <div class="input-wrapper">
+      <el-input
+        v-if="dialogType === 'launch'"
+        class="search-input"
+        v-model="roomName"
+        placeholder="请输入会议名称"
+        @input="handleInputRoomName"
+        @focus="handleInputFocus"
+        @blur="handleInputBlur"
+      ></el-input>
+      <el-input v-else class="search-input" v-model="roomNum" placeholder="请输入会议ID"></el-input>
+    </div>
+    <div class="dialog-contain">
+      <div class="video-contain">
+        <div class="avatar"></div>
+        <video id="video-ele" class="video-ele" muted autoplay v-show="cameraStatus"></video>
+      </div>
+      <div class="tool-bar">
+        <div class="tool-bar-group">
+          <div class="imgsf">
+            <div
+              :class="['img-icon', microphoneStatus ? 'img-icon-mic-on' : 'img-icon-mic-off']"
+              @click="changeLocalMicroStatus"
+            ></div>
+            <div class="imgsf-group" @click="toggleAudioSelect">
+              <div class="imgsf-group-text">麦克风</div>
+              <div class="imgsf-group-icon"></div>
+            </div>
+            <SelectDialog
+              v-if="audioSelectShow"
+              dialogType="audio"
+              :audioDevices="audioDevices"
+              :outputDevices="outputDevices"
+              :activeDevice="activeDevice"
+              @close="handleAudioSelectClose"
+              @chooseAudioInputDevice="handleAudioInputDeviceChoice"
+            >
+            </SelectDialog>
+          </div>
+          <div class="imgsf">
+            <div
+              :class="['img-icon', cameraStatus ? 'img-icon-cam-on' : 'img-icon-cam-off']"
+              @click="changeLocalCameraStatus"
+            ></div>
+            <div class="imgsf-group" @click="toggleVideoSelect">
+              <div class="imgsf-group-text">摄像头</div>
+              <div class="imgsf-group-icon"></div>
+            </div>
+            <SelectDialog
+              v-if="videoSelectShow"
+              dialogType="video"
+              :videoDevices="videoDevices"
+              :activeDevice="activeDevice"
+              @close="handleVideoSelectClose"
+              @chooseVideoDevice="handleVideoDeviceChoice"
+            >
+            </SelectDialog>
+          </div>
+          <div class="imgsf">
+            <div
+              :class="['img-icon', outputStatus ? 'img-icon-output-on' : 'img-icon-output-off']"
+              @click="changeLocalOutputStatus"
+            ></div>
+            <div class="imgsf-group" @click="toggleOutputSelect">
+              <div class="imgsf-group-text">扬声器</div>
+              <div class="imgsf-group-icon"></div>
+            </div>
+            <SelectDialog
+              v-if="outputSelectShow"
+              dialogType="output"
+              :outputDevices="outputDevices"
+              :activeDevice="activeDevice"
+              @close="handleOutputSelectClose"
+              @chooseAudioOutputDevice="handleAudioOutputDeviceChoice"
+            >
+            </SelectDialog>
+          </div>
+        </div>
+        <div class="tool-bar-btn" v-if="dialogType === 'launch'" @click="launch">发起会议</div>
+        <div class="tool-bar-btn" v-else @click="join">加入会议</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ShowMessage } from "@/utils/index";
+import LiveClient from "@/utils/livekit/live-client-esm";
+import SelectDialog from "../other/selectDialog.vue";
+
+export default {
+  name: "MeetingReadyDialog",
+  components: {
+    SelectDialog,
+  },
+  props: {
+    dialogType: {
+      type: String,
+      default: "launch",
+    },
+    tempRoomNum: {
+      type: String,
+      default: "",
+    },
+    tempRoomName: {
+      type: String,
+      default: "测试会议",
+    },
+  },
+  data() {
+    return {
+      roomName: "",
+      roomNum: "",
+      cameraStatus: true,
+      microphoneStatus: true,
+      outputStatus: true,
+      curFacingMode: "user",
+      audioSelectShow: false,
+      videoSelectShow: false,
+      outputSelectShow: false,
+      allTracks: [],
+      audioDevices: [],
+      outputDevices: [],
+      videoDevices: [],
+      activeDevice: {
+        audioInputDevice: "",
+        audioOutputDevice: "",
+        videoDevice: "",
+      },
+      showMessage: null,
+    };
+  },
+  computed: {
+    showMessageInstance() {
+      if (!this.showMessage) {
+        this.showMessage = new ShowMessage();
+      }
+      return this.showMessage;
+    },
+  },
+  watch: {
+    cameraStatus: {
+      handler: async function (newVal) {
+        let constrict = null;
+        if (newVal) {
+          constrict = {
+            audio: this.activeDevice?.audioInputDevice
+              ? { deviceId: this.activeDevice.audioInputDevice }
+              : true,
+            video: this.activeDevice?.videoDevice
+              ? { deviceId: this.activeDevice.videoDevice }
+              : { facingMode: this.curFacingMode },
+          };
+        } else {
+          constrict = {
+            audio: this.activeDevice?.audioInputDevice
+              ? { deviceId: this.activeDevice.audioInputDevice }
+              : true,
+            video: false,
+          };
+        }
+        await this.getDefaultDeviceStream(constrict);
+      },
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  beforeDestroy() {
+    this.streamPause();
+  },
+  methods: {
+    async init() {
+      await this.getDeviceList();
+      await this.initVideoStream();
+
+      if (this.dialogType === "join") {
+        this.roomNum = this.tempRoomNum;
+      } else {
+        this.roomName = this.tempRoomName;
+      }
+    },
+
+    handleClose() {
+      this.$emit("close");
+    },
+
+    launch() {
+      if (this.roomName === "") {
+        this.showMessageInstance.message("error", "会议名称不能为空");
+        return;
+      } else if (this.roomName.length > 20) {
+        this.showMessageInstance.message("error", "会议名称不能超过20个字符");
+        return;
+      }
+      this.$emit("launchMeeting", {
+        roomName: this.roomName,
+        cameraStatus: this.cameraStatus,
+        microphoneStatus: this.microphoneStatus,
+        outputStatus: this.outputStatus,
+        audioInputDevice: this.activeDevice.audioInputDevice,
+        audioOutputDevice: this.activeDevice.audioOutputDevice,
+        videoDevice: this.activeDevice.videoDevice,
+      });
+      this.$emit("close");
+    },
+
+    join() {
+      if (this.roomNum === "") {
+        this.showMessageInstance.message("error", "会议ID不能为空");
+        return;
+      }
+      this.$emit("joinMeeting", {
+        roomNum: this.roomNum,
+        cameraStatus: this.cameraStatus,
+        microphoneStatus: this.microphoneStatus,
+        outputStatus: this.outputStatus,
+        audioInputDevice: this.activeDevice.audioInputDevice,
+        audioOutputDevice: this.activeDevice.audioOutputDevice,
+        videoDevice: this.activeDevice.videoDevice,
+      });
+      this.$emit("close");
+    },
+
+    async getDeviceList() {
+      try {
+        const { audioDevices, videoDevices, outputDevices } = await LiveClient.getDeviceList();
+        this.audioDevices = audioDevices.map((item) => {
+          return {
+            label: item.label,
+            value: item.deviceId,
+          };
+        });
+        this.videoDevices = videoDevices.map((item) => {
+          return {
+            label: item.label,
+            value: item.deviceId,
+          };
+        });
+        this.outputDevices = outputDevices.map((item) => {
+          return {
+            label: item.label,
+            value: item.deviceId,
+          };
+        });
+      } catch (err) {
+        console.error(err);
+        this.showMessageInstance.message("error", "获取设备列表失败");
+      }
+    },
+
+    changeLocalMicroStatus() {
+      this.microphoneStatus = !this.microphoneStatus;
+    },
+
+    changeLocalCameraStatus() {
+      this.cameraStatus = !this.cameraStatus;
+    },
+
+    changeLocalOutputStatus() {
+      this.outputStatus = !this.outputStatus;
+    },
+
+    toggleAudioSelect() {
+      this.audioSelectShow = !this.audioSelectShow;
+    },
+
+    toggleVideoSelect() {
+      this.videoSelectShow = !this.videoSelectShow;
+    },
+
+    toggleOutputSelect() {
+      this.outputSelectShow = !this.outputSelectShow;
+    },
+
+    handleAudioSelectClose() {
+      this.audioSelectShow = false;
+    },
+
+    handleVideoSelectClose() {
+      this.videoSelectShow = false;
+    },
+
+    handleOutputSelectClose() {
+      this.outputSelectShow = false;
+    },
+
+    clearAllTrack() {
+      if (this.allTracks.length > 0) {
+        this.allTracks.forEach((track) => {
+          track.stop();
+        });
+      }
+    },
+
+    getActiveDeviceId(stream) {
+      let videoTracks = stream?.getVideoTracks();
+      let audioTracks = stream?.getAudioTracks();
+      if (videoTracks && videoTracks.length > 0) {
+        let capability = videoTracks[0].getCapabilities();
+        this.activeDevice.videoDevice = capability.deviceId;
+        this.curFacingMode = capability.facingMode[0];
+      }
+      if (audioTracks && audioTracks.length > 0) {
+        let capability = audioTracks[0].getCapabilities();
+        this.activeDevice.audioInputDevice = capability.deviceId;
+      }
+    },
+
+    async getDefaultDeviceStream(constrict) {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia(constrict);
+        let videoEle = document.querySelector("#video-ele");
+        this.clearAllTrack();
+        if (videoEle) {
+          this.allTracks = stream.getTracks();
+          this.getActiveDeviceId(stream);
+          videoEle.srcObject = stream;
+          videoEle.onloadedmetadata = function (e) {
+            videoEle.play();
+          };
+        }
+      } catch (err) {
+        throw new Error(err);
+      }
+    },
+
+    streamPause() {
+      let videoEle = document.querySelector("#video-ele");
+      if (videoEle) {
+        videoEle.pause();
+        videoEle.srcObject = null;
+        videoEle.src = "";
+      }
+      this.clearAllTrack();
+    },
+
+    async initVideoStream() {
+      this.curFacingMode = "user";
+      const constrict = {
+        audio: this.microphoneStatus,
+        video: this.cameraStatus
+          ? {
+              facingMode: this.curFacingMode,
+            }
+          : this.cameraStatus,
+      };
+      await this.getDefaultDeviceStream(constrict);
+    },
+
+    async handleAudioInputDeviceChoice(e) {
+      if (e && e !== this.activeDevice?.audioInputDevice) {
+        const constrict = {
+          audio: this.microphoneStatus ? { deviceId: e } : false,
+          video: this.cameraStatus
+            ? this.activeDevice?.videoDevice
+              ? { deviceId: this.activeDevice.videoDevice }
+              : { facingMode: this.curFacingMode }
+            : this.cameraStatus,
+        };
+        await this.getDefaultDeviceStream(constrict);
+      }
+    },
+
+    handleAudioOutputDeviceChoice(e) {
+      if (e && e !== this.activeDevice.audioOutputDevice) {
+        this.activeDevice.audioOutputDevice = e;
+      }
+    },
+
+    async handleVideoDeviceChoice(e) {
+      if (e && e !== this.activeDevice.videoDevice) {
+        const constrict = {
+          audio: this.microphoneStatus
+            ? this.activeDevice?.audioInputDevice
+              ? { deviceId: this.activeDevice.audioInputDevice }
+              : this.microphoneStatus
+            : this.microphoneStatus,
+          video: this.cameraStatus ? { deviceId: e } : this.cameraStatus,
+        };
+        await this.getDefaultDeviceStream(constrict);
+      }
+    },
+
+    handleInputRoomName(e) {
+      if (e.length <= 0) {
+        this.roomName = this.tempRoomName;
+      }
+    },
+
+    handleInputFocus() {
+      if (this.roomName === this.tempRoomName) {
+        this.roomName = "";
+      }
+    },
+
+    handleInputBlur() {
+      if (this.roomName === "") {
+        this.roomName = this.tempRoomName;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/mixin.scss";
+.dialog {
+  width: 864px;
+  height: fit-content;
+  position: fixed;
+  z-index: 2000;
+  inset: 0;
+  margin: auto;
+  transform: translate(0, 0);
+  background: var(--dialog-bg);
+  box-shadow: 0px 0px 10px 0px var(--dialog-shadow-color);
+  border-radius: 10px;
+  border: 1px solid var(--dialog-border-color);
+  padding: 20px;
+
+  &-head {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-bottom: 4px;
+
+    .close-icon {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      background: var(--close-icon) no-repeat center / 100% 100%;
+    }
+  }
+  .input-wrapper {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 28px;
+    :deep(.el-input) {
+      width: 400px;
+      font-size: 20px;
+      line-height: 32px;
+      border-bottom: 1px solid var(--input-border-color);
+      .el-input__inner {
+        color: var(--theme-font-color);
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+        background-color: transparent;
+        box-shadow: none;
+        border: none;
+        &::placeholder {
+          color: var(--input-placeholder-color);
+        }
+      }
+    }
+  }
+  &-contain {
+    width: 100%;
+
+    .video-contain {
+      width: 100%;
+      height: 452px;
+      border-radius: 10px;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 20px;
+      padding: 0 12px;
+      background: var(--meeting-board-bg) no-repeat center / 100% 100%;
+
+      .avatar {
+        width: 100px;
+        height: 100px;
+        border-radius: 50%;
+        background: url("@/assets/image/common/default_avatar.png") no-repeat center / 100% 100%;
+      }
+
+      .video-ele {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 10px;
+        left: 0;
+        top: 0;
+        object-fit: cover;
+      }
+    }
+
+    .tool-bar {
+      width: 100%;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      &-group {
+        display: flex;
+        align-items: center;
+
+        .imgsf {
+          margin-right: 12px;
+          height: 36px;
+          padding: 0 12px;
+          background: var(--ready-dialog-select-bg);
+          border-radius: 6px;
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+          position: relative;
+
+          .img-icon {
+            width: 20px;
+            height: 20px;
+            margin-right: 6px;
+
+            &-mic-on {
+              background: var(--ready-mic-on-icon) no-repeat center / 100% 100%;
+            }
+
+            &-mic-off {
+              background: url("@/assets/image/common/mic_off_small.png") no-repeat center / 100%
+                100%;
+            }
+
+            &-cam-on {
+              background: var(--ready-cam-on-icon) no-repeat center / 100% 100%;
+            }
+
+            &-cam-off {
+              background: url("@/assets/image/common/cam_off_small.png") no-repeat center / 100%
+                100%;
+            }
+            &-output-on {
+              background: var(--ready-output-on-icon) no-repeat center / 100% 100%;
+            }
+
+            &-output-off {
+              background: url("@/assets/image/common/output_off_small.png") no-repeat center / 100%
+                100%;
+            }
+          }
+          &-group {
+            display: flex;
+            align-items: center;
+            flex-wrap: nowrap;
+            font-weight: 400;
+            font-size: 14px;
+            color: var(--theme-font-color);
+            cursor: pointer;
+            &-text {
+              flex-shrink: 0;
+              white-space: nowrap;
+              margin-right: 12px;
+            }
+            &-icon {
+              flex-shrink: 0;
+              width: 8px;
+              height: 4px;
+              background: var(--ready-arrow-icon) no-repeat center / 100% 100%;
+            }
+          }
+        }
+      }
+
+      &-btn {
+        width: 112px;
+        height: 36px;
+        @include button;
+        @include btnPrimary;
+      }
+    }
+  }
+}
+</style>