mdm-client 1.0.0

package/src/components/LivePointMeeting/LivePointMeeting.vue

@@ -0,0 +1,1134 @@
+<template>
+  <div ref="rootElm" class="point-meeting" id="point-meeting" :style="{ resize: 'both' }">
+    <div class="point-meeting-top" v-drag="'point-meeting'">
+      <div class="top-group">
+        <div class="duration-icon"></div>
+        <span>{{ meetingDuration }}</span>
+      </div>
+      <div class="top-group">
+        <div class="full-screen-btn" @click="switchComponentFullScreen"></div>
+      </div>
+    </div>
+    <div class="point-meeting-wrapper">
+      <div
+        id="point-meeting-contain"
+        :class="[
+          'meeting-contain',
+          meetingType === 'video' || meetingType === 'miniLink'
+            ? 'meeting-contain-video'
+            : 'meeting-contain-audio',
+        ]"
+        @mousemove="setPageFooterVisible(4)"
+      >
+        <div v-if="isWaiting" class="waiting-mask-video">呼叫中...</div>
+      </div>
+    </div>
+    <div :class="['point-meeting-foot', { 'point-meeting-foot-show': isFootShow }]">
+      <div
+        class="point-meeting-foot-btn mic-on"
+        v-if="isMicroEnabled"
+        @click="changeLocalMicrophoneStatus"
+      >
+        <div class="icon"></div>
+        <div class="title">麦克风</div>
+      </div>
+      <div class="point-meeting-foot-btn mic-off" v-else @click="changeLocalMicrophoneStatus">
+        <div class="icon"></div>
+        <div class="title">麦克风</div>
+      </div>
+      <template v-if="meetingType !== 'voice'">
+        <div
+          class="point-meeting-foot-btn cam-on"
+          v-if="isCameraEnabled"
+          @click="changeLocalCameraStatus"
+        >
+          <div class="icon"></div>
+          <div class="title">摄像头</div>
+        </div>
+        <div class="point-meeting-foot-btn cam-off" v-else @click="changeLocalCameraStatus">
+          <div class="icon"></div>
+          <div class="title">摄像头</div>
+        </div>
+      </template>
+      <div class="point-meeting-foot-btn speaker-on" v-if="isSpeakerEnabled" @click="setToDeafness">
+        <div class="icon"></div>
+        <div class="title">扬声器</div>
+      </div>
+      <div class="point-meeting-foot-btn speaker-off" v-else @click="cancelDeafness">
+        <div class="icon"></div>
+        <div class="title">扬声器</div>
+      </div>
+      <template v-if="meetingType !== 'voice'">
+        <div class="point-meeting-foot-btn screen-share" @click="changeScreenShareStatus">
+          <div class="icon"></div>
+          <div class="title">{{ isScreenShareEnabled ? "结束共享" : "共享屏幕" }}</div>
+        </div>
+        <div class="point-meeting-foot-btn preview" @click="changePreviewStatus">
+          <div class="icon"></div>
+          <div class="title">{{ isPreviewOpen ? "关闭预览" : "开启预览" }}</div>
+        </div>
+      </template>
+      <div class="point-meeting-foot-btn cancel" @click="leaveRoom">
+        <div class="icon"></div>
+        <div class="title">结束通话</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { calculateTime, ShowMessage } from "../../utils/index.js";
+
+export default {
+  name: "LivePointMeeting",
+  props: {
+    joinType: {
+      type: String,
+      default: "join", // "join" | "launch"
+    },
+    meetingNum: {
+      type: String,
+      default: "",
+    },
+    meetingType: {
+      type: String,
+      default: "video", // "video" | "voice" | "miniLink"
+    },
+    invitePhone: {
+      type: String,
+      default: "",
+    },
+    inviteName: {
+      type: String,
+      default: "",
+    },
+    inviteType: {
+      type: [Number, String],
+      default: 0,
+    },
+    inviteWays: {
+      type: String,
+      default: "phoneCall",
+    },
+    inviteUserData: {
+      type: Object,
+      default: () => ({}),
+    },
+    isInMeeting: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      durationInterval: null,
+      footVisibleInterval: null,
+      liveClient: null,
+      showMessage: null,
+      localIdentity: "",
+      localName: "",
+      tempMeetingNum: "",
+      roomMetadata: null,
+      componentEventList: [],
+      trackList: [],
+      participants: [],
+      isMicroEnabled: false,
+      isCameraEnabled: false,
+      isSpeakerEnabled: false,
+      isScreenShareEnabled: false,
+      isPreviewOpen: true,
+      isWaiting: false,
+      duration: 0,
+      isDurationCalc: true,
+      isFootShow: false,
+      footVisibleDuration: 3,
+      isRoomConnectedHandled: false
+    }
+  },
+  computed: {
+    participantNum() {
+      return this.participants.length;
+    },
+    meetingDuration() {
+      return calculateTime(this.duration);
+    }
+  },
+  watch: {
+    footVisibleDuration(newVal) {
+      if (newVal <= 0) {
+        this.isFootShow = false;
+        if (this.footVisibleInterval) {
+          clearInterval(this.footVisibleInterval);
+        }
+      }
+    }
+  },
+  methods: {
+    async createRoom() {
+      if (!this.liveClient) {
+        return;
+      }
+      await this.liveClient.createRoom(this.meetingType === "voice" ? 2 : 1);
+    },
+    async joinRoom() {
+      if (!this.liveClient) {
+        return;
+      }
+      const param = {
+        echoCancellation: true,
+        noiseSuppression: true,
+        roomNum: this.joinType === "launch" ? this.tempMeetingNum : this.meetingNum,
+      };
+      try {
+        await this.liveClient.joinRoom(param);
+      } catch (e) {
+        this.showMessage.message("error", "加入会议失败");
+      }
+    },
+    // 添加事件到事件监听数组
+    addEventToList(eventName) {
+      if (this.componentEventList.indexOf(eventName) < 0) {
+        this.componentEventList.push(eventName);
+      }
+    },
+    // 解除已绑定的事件
+    dispatchLiveClientEvent() {
+      if (this.liveClient) {
+        if (this.componentEventList.length > 0) {
+          this.componentEventList.forEach((eventName) => {
+            this.liveClient.off(eventName);
+          });
+        }
+      }
+    },
+    // 清除所有音视频轨道
+    clearAllTrack() {
+      if (this.trackList.length > 0) {
+        this.trackList.forEach((track) => {
+          track?.detach();
+          track?.stop();
+        });
+      }
+      this.trackList = [];
+    },
+    // 清除组件定时器
+    clearAllInterval() {
+      if (this.durationInterval) {
+        clearInterval(this.durationInterval);
+        this.durationInterval = null;
+      }
+    },
+    // 切换本地用户摄像头
+    async changeLocalCameraStatus() {
+      await this.liveClient.changeCameraStatus();
+    },
+    // 切换本地用户麦克风
+    async changeLocalMicrophoneStatus() {
+      await this.liveClient.changeMicrophoneStatus();
+    },
+    // 开启/关闭屏幕共享
+    async changeScreenShareStatus() {
+      await this.liveClient.changeScreenShareStatus();
+    },
+    // 本地与会者置聋
+    async setToDeafness() {
+      await this.liveClient.setParticipantDeafness(this.localIdentity);
+    },
+    // 本地与会者取消置聋
+    async cancelDeafness() {
+      await this.liveClient.cancelParticipantDeafness(this.localIdentity);
+    },
+    // 设置底部工具条显示
+    setPageFooterVisible(time) {
+      this.footVisibleDuration = time;
+      this.isFootShow = true;
+      if (this.footVisibleInterval) {
+        clearInterval(this.footVisibleInterval);
+      }
+      this.footVisibleInterval = setInterval(() => {
+        if (this.footVisibleDuration > 0) {
+          this.footVisibleDuration--;
+        }
+      }, 1000);
+    },
+    // 切换是否预览
+    changePreviewStatus() {
+      if (!this.isInMeeting) {
+        return;
+      }
+      const layoutBlurElm = document.querySelector("#point-meeting-contain .layout-blur");
+      const layoutNormalElm = document.querySelector("#point-meeting-contain .layout-normal");
+      if (this.isPreviewOpen) {
+        if (layoutBlurElm.hasChildNodes) {
+          const child = layoutBlurElm.firstElementChild;
+          if (child.id === `participant-${this.localIdentity}`) {
+            // 小画面是自己，直接关闭
+            layoutBlurElm.style.visibility = "hidden";
+            this.isPreviewOpen = false;
+          } else {
+            if (layoutNormalElm.hasChildNodes) {
+              const normalChild = layoutNormalElm.firstElementChild;
+              layoutBlurElm.appendChild(normalChild);
+              layoutNormalElm.appendChild(child);
+              layoutBlurElm.style.visibility = "hidden";
+              this.isPreviewOpen = false;
+            } else {
+              layoutNormalElm.appendChild(child);
+              layoutBlurElm.style.visibility = "hidden";
+              this.isPreviewOpen = false;
+            }
+          }
+        }
+      } else {
+        if (this.isScreenShareEnabled) {
+          this.showMessage.message("error", "当前正在共享屏幕，无法开启预览");
+          return;
+        } else {
+          layoutBlurElm.style.visibility = "visible";
+          this.isPreviewOpen = true;
+        }
+      }
+    },
+    // 初始化点对点会议事件
+    initClientEvent() {
+      if (!this.liveClient) {
+        this.showMessage.message("error", "liveClient未能成功初始化");
+        return;
+      }
+      // 监听sdk错误抛出
+      this.liveClient.on("errorAlert", (e) => {
+        this.addEventToList("errorAlert");
+        if(e.severity == 'high' || e.severity == 'critical') {
+          if(e?.context?.originalMessage == "could not establish pc connection") {
+            this.showMessage.message("error", "无法建立连接，请检查udp端口是否启用");
+          } else {
+            this.showMessage.message("error", e.message);
+          }
+        }
+      });
+      // 会议房间成功创建
+      this.liveClient.on("roomCreatedSuccess", async (e) => {
+        this.addEventToList("roomCreatedSuccess");
+        this.showMessage.message("success", "会议房间创建成功");
+        this.tempMeetingNum = e;
+        await this.joinRoom();
+      });
+      // 加入会议失败
+      this.liveClient.on("joinRoomError", (e) => {
+        this.addEventToList("joinRoomError");
+        this.handleJoinRoomError(e);
+      });
+      this.liveClient.on("roomMetadataChanged", (e) => {
+        const metadata = JSON.parse(e);
+        this.roomMetadataChange(metadata);
+      });
+      // 会议链接成功
+      this.liveClient.on("roomConnected", (e) => {
+        this.addEventToList("roomConnected");
+        if (this.liveClient?.room) {
+          const metadata = JSON.parse(this.liveClient.room.metadata);
+          // 初始化部分会议信息
+          this.initRoomMetadata(metadata);
+          this.$emit("meetingStarted");
+          this.handleRoomConnected(e);
+          this.handleDeviceInvite(e);
+          if(this.joinType === "launch") {
+            this.isWaiting = true;
+          }
+          this.initRoomDuration(metadata);
+        }
+      });
+      // 本地轨道发布
+      this.liveClient.on("localTrackPublished", (e) => {
+        this.addEventToList("localTrackPublished");
+        console.log("本地轨道发布", e);
+      });
+      // 远程轨道订阅
+      this.liveClient.on("trackSubscribed", (e) => {
+        this.addEventToList("trackSubscribed");
+        console.log("远程轨道订阅", e);
+      });
+      // 摄像头状态切换
+      this.liveClient.on("localCameraChange", (e) => {
+        this.addEventToList("localCameraChange");
+        this.isCameraEnabled = e;
+        if (this.isCameraEnabled) {
+          this.showMessage.message("success", "摄像头已开启");
+        } else {
+          this.showMessage.message("success", "摄像头已关闭");
+        }
+      });
+      // 麦克风状态切换
+      this.liveClient.on("localMicrophoneChange", (e) => {
+        this.addEventToList("localMicrophoneChange");
+        this.isMicroEnabled = e;
+        if (this.isMicroEnabled) {
+          this.showMessage.message("success", "麦克风已开启");
+        } else {
+          this.showMessage.message("success", "麦克风已关闭");
+        }
+      });
+      // 屏幕共享状态切换
+      this.liveClient.on("localScreenShareChange", (e) => {
+        this.addEventToList("localScreenShareChange");
+        this.isScreenShareEnabled = e;
+        if (this.isScreenShareEnabled) {
+          this.showMessage.message("success", "屏幕共享已开启");
+        } else {
+          this.showMessage.message("success", "屏幕共享已关闭");
+        }
+      });
+      // 监听videoCallRender事件 视频通话
+      this.liveClient.on("videoCallRender", (e) => {
+        this.addEventToList("videoCallRender");
+        this.renderVideoItem(e);
+      });
+      // 监听audioCallRender事件 语音通话
+      this.liveClient.on("audioCallRender", (e) => {
+        this.addEventToList("audioCallRender");
+        this.renderAudioItem(e);
+      });
+      // 监听发出的邀请被拒绝
+      this.liveClient.on("receiveInviteRefuse", (e) => {
+        this.addEventToList("receiveInviteRefuse");
+        this.showMessage.message("warning", "您的会议邀请被对方拒绝");
+        if(this.joinType === "launch") {
+          this.isWaiting = false;
+        }
+      });
+      // 监听用户与房间断开链接事件
+      this.liveClient.on("roomDisconnected", async () => {
+        this.addEventToList("roomDisconnected");
+        this.showMessage.message("info", "房间链接已断开");
+        this.clearMeetingStatus();
+        // 调用删除房间接口
+        if (this.joinType === "launch") {
+          try {
+            await this.liveClient.deleteRoom(this.tempMeetingNum)
+          } catch (e) {
+            console.error(e);
+          } finally {
+            this.clearAllInterval();
+            this.closeMeetingDialog();
+          }
+        } else {
+          this.clearAllInterval();
+          this.closeMeetingDialog();
+        }
+      });
+    },
+    // 处理加入会议报错
+    handleJoinRoomError(e) {
+      console.error("加入会议失败", e);
+      this.showMessage.message("error", "加入会议失败");
+      this.clearMeetingStatus();
+    },
+    // 初始化会议信息
+    initRoomMetadata(metadata) {
+      this.roomMetadataChange(metadata);
+    },
+    // 会议信息变更
+    roomMetadataChange(metadata) {
+      console.log("roomMetadataChange", metadata);
+      this.roomMetadata = metadata;
+      this.initRoomDuration(metadata);
+    },
+    // 初始化会议时长
+    initRoomDuration(metadata) {
+      if (this.isDurationCalc) {
+        if (this.durationInterval) {
+          clearInterval(this.durationInterval);
+          this.durationInterval = null;
+        }
+        this.durationInterval = setInterval(() => {
+          if (new Date(metadata.roomStartTime).getTime() > 0) {
+            this.duration = Math.floor(
+              (Date.now() - new Date(metadata.roomStartTime).getTime()) / 1000
+            );
+            this.isDurationCalc = false;
+          } else {
+            this.duration++;
+          }
+        }, 1000);
+      }
+    },
+    // 房间连接成功处理函数
+    handleRoomConnected(e) {
+      if (this.joinType === "launch") {
+        if (this.inviteWays === "phoneCall") {
+          if (this.meetingType === "miniLink") {
+            this.liveClient
+              .inviteParticipant(
+                this.tempMeetingNum,
+                [
+                  {
+                    identity: this.invitePhone,
+                    userName: this.inviteName || this.invitePhone,
+                    phone: this.invitePhone,
+                  },
+                ],
+                this.meetingType === "voice",
+                3
+              )
+              .then((res) => {
+                if (res.code === 200) {
+                  this.showMessage.message("success", "成功发送邀请");
+                } else {
+                  this.showMessage.message("error", res?.msg || "邀请发送失败");
+                  this.isWaiting = false;
+                }
+              })
+              .catch((err) => {
+                console.error("邀请发送失败:", err);
+                this.showMessage.message("error", err?.message || "邀请发送失败");
+                this.isWaiting = false;
+              });
+          }
+        } else if (this.inviteWays === "identity") {
+          this.sendInviteMessage();
+        }
+      }
+    },
+    // volte邀请特殊处理
+    handleDeviceInvite(e) {
+      if (this.joinType === "launch") {
+        if (this.inviteWays === "phoneCall") {
+          if (this.meetingType === "video" || this.meetingType === "voice") {
+            this.liveClient
+              .makeCall(this.inviteName || this.invitePhone, this.invitePhone, Number(this.inviteType))
+              .then(() => {
+                this.showMessage.message("success", "外呼邀请发送成功");
+              })
+              .catch((err) => {
+                this.isWaiting = false;
+                this.showMessage.message("error", "外呼邀请发送失败");
+              });
+          }
+        }
+      }
+    },
+    // 发送邀请信息
+    sendInviteMessage() {
+      console.log("sendInviteMessage", this.inviteUserData);
+
+      if (!this.inviteUserData?.identity) {
+        this.showMessage.message("error", "缺少被邀请人identity");
+        return;
+      }
+      if (this.inviteUserData?.identity === this.localIdentity) {
+        this.showMessage.message("error", "不能邀请自己");
+        return;
+      }
+      this.liveClient
+        .inviteParticipant(
+          this.tempMeetingNum,
+          [
+            {
+              identity: this.inviteUserData?.identity,
+              userName: this.inviteUserData?.userName || this.inviteUserData?.phone,
+              phone: this.inviteUserData?.phone,
+            },
+          ],
+          this.meetingType === "voice",
+          this.meetingType === "miniLink" ? 3 : 0
+        )
+        .then((res) => {
+          if (res.code === 200) {
+            this.showMessage.message("success", "成功发送邀请");
+          } else {
+            this.showMessage.message("error", res?.msg || "邀请发送失败");
+            this.isWaiting = false;
+          }
+        })
+        .catch((err) => {
+          console.error("邀请发送失败:", err);
+          this.showMessage.message("error", err?.message || "邀请发送失败");
+          this.isWaiting = false;
+        });
+    },
+    closeMeetingDialog() {
+      this.$emit("meetingDialogClose");
+    },
+    async leaveRoom() {
+      if (this.liveClient) {
+        await this.liveClient.leaveRoom();
+      }
+      // 重置房间连接处理标志
+      this.isRoomConnectedHandled = false;
+    },
+    // 切换组件全屏状态
+    async switchComponentFullScreen(e) {
+      if (
+        document.fullscreenElement ||
+        document.msFullscreenElement ||
+        document.mozFullScreenElement ||
+        document.webkitFullscreenElement
+          ? true
+          : false
+      ) {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.webkitCancelFullScreen) {
+          document.webkitCancelFullScreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        }
+      } else {
+        await this.$nextTick();
+        if (this.$refs.rootElm.requestFullscreen) {
+          this.$refs.rootElm.requestFullscreen();
+        }
+      }
+    },
+    // 判断与会者是否被邀请
+    judgeParticipantIsInvited(identity) {
+      const reg = /^(sip_)+?/;
+      const reg1 = /^(sip_0)+?/;
+      if (reg1.test(identity)) {
+        return identity === "sip_0" + this.invitePhone;
+      } else if (reg.test(identity)) {
+        return identity === "sip_" + this.invitePhone;
+      } else {
+        return identity === this.invitePhone;
+      }
+    },
+    // 判断会议中是否有其他人正在共享
+    judgeParticipantScreenShare() {
+      if (this.participantNum <= 0) {
+        return false;
+      }
+      const index = this.participants.findIndex((item) => {
+        return item.identity !== this.localIdentity && item.isScreenShareEnabled;
+      });
+      if (index > -1) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    addToParticipantList(userItem) {
+      if (this.participantNum <= 0) {
+        this.participants.push(userItem);
+      } else {
+        const index = this.participants.findIndex((item) => {
+          return item.identity === userItem.identity;
+        });
+        if (index !== -1) {
+          // 更新数组中与会者
+          this.participants.splice(index, 1, userItem);
+        } else {
+          this.participants.push(userItem);
+        }
+      }
+    },
+    removeFromParticipantList(userItem) {
+      if (this.participantNum <= 0) {
+        return;
+      } else {
+        const index = this.participants.findIndex((item) => {
+          return item.identity === userItem.identity;
+        });
+        if (index !== -1) {
+          // 更新数组中与会者
+          this.participants.splice(index, 1);
+        }
+      }
+    },
+    renderVideoItem(videoItem) {
+      console.log("视频通话渲染" + videoItem.identity + ":", videoItem);
+      if (videoItem.isLocal) {
+        const metadata = videoItem.metadata;
+        this.isCameraEnabled = videoItem.isCameraEnabled;
+        this.isMicroEnabled = videoItem.isMicrophoneEnabled;
+        this.isScreenShareEnabled = videoItem.isScreenShareEnabled;
+        this.isSpeakerEnabled = !metadata.isDeafness;
+        this.localIdentity = videoItem.identity;
+        this.localName = videoItem.name;
+      }
+      const container = document.getElementById("point-meeting-contain");
+      let videoDiv = document.getElementById(`participant-${videoItem.identity}`);
+      let layoutBlurElm = document.querySelector("#point-meeting-contain .layout-blur");
+      let layoutNormalElm = document.querySelector("#point-meeting-contain .layout-normal");
+      if (!layoutBlurElm) {
+        layoutBlurElm = document.createElement("div");
+        layoutBlurElm.className = "layout-blur";
+        container.appendChild(layoutBlurElm);
+      }
+      if (!layoutNormalElm) {
+        layoutNormalElm = document.createElement("div");
+        layoutNormalElm.className = "layout-normal";
+        container.insertBefore(layoutNormalElm, container.firstElementChild ?? null);
+      }
+      if (!container) {
+        this.showMessage.message("error", "会议容器不存在");
+        return;
+      }
+      if (!videoDiv && !videoItem.remove) {
+        videoDiv = document.createElement("div");
+        videoDiv.id = `participant-${videoItem.identity}`;
+        videoDiv.className = videoItem.isLocal ? "participant local" : "participant";
+        videoDiv.innerHTML = `
+                <video id="video-${
+                  videoItem.identity
+                }" class="p-video" autoplay webkit-playsinline playsinline x5-video-player-type="h5"></video>
+                <div id="describe-${videoItem.identity}" class="describe">
+                  <div id="microphone-${videoItem.identity}" class="microphone"></div>
+                  <div id="${videoItem.identity}" class="identity">${
+            videoItem.isLocal ? videoItem.name + "(我)" : videoItem.name
+          }</div>
+                </div>
+                `;
+        if (videoItem.isScreenShareEnabled || videoItem.isCameraEnabled) {
+        } else {
+          videoDiv.innerHTML = `
+                <video id="video-${videoItem.identity}" class="p-video" autoplay webkit-playsinline playsinline x5-video-player-type="h5"></video>
+                <div id="board-${videoItem.identity}" class="board">
+                  <div class="board-icon"></div>
+                  <div class="board-title">
+                    <div id="microphone-${videoItem.identity}" class="microphone"></div>
+                    <span class="board-title-text">${videoItem.name}</span>
+                  </div>
+                </div>
+              `;
+        }
+        if (videoItem.isLocal) {
+          if (layoutBlurElm.hasChildNodes) {
+            let child = null;
+            while ((child = layoutBlurElm.firstElementChild)) {
+              layoutNormalElm.insertBefore(child, layoutNormalElm.firstElementChild ?? null);
+            }
+          }
+          layoutBlurElm.appendChild(videoDiv);
+        } else {
+          if (this.participantNum >= 2) {
+            return;
+          } else {
+            if (layoutNormalElm.hasChildNodes) {
+              let child = null;
+              while ((child = layoutNormalElm.firstElementChild)) {
+                layoutBlurElm.appendChild(child);
+              }
+            }
+            layoutNormalElm.appendChild(videoDiv);
+          }
+        }
+        this.addToParticipantList(videoItem);
+      }
+      // 与会者状态变更
+      // 视频元素
+      let videoElm = document.getElementById(`video-${videoItem.identity}`);
+      // 当与会者断开会议链接即remove为true
+      if (videoItem.remove) {
+        if (videoElm) {
+          videoElm.srcObject = null;
+          videoElm.src = "";
+          videoElm.remove();
+        }
+        if (videoDiv) {
+          videoDiv.remove();
+        }
+        this.removeFromParticipantList(videoItem);
+
+        // 音视频轨道与video元素解绑
+        if (videoItem.videoTrack) {
+          videoItem.videoTrack.detach();
+        }
+        if (videoItem.audioTrack) {
+          videoItem.audioTrack.detach();
+        }
+        return;
+      }
+      if (this.joinType === "launch" && !videoItem.isLocal) {
+        if (this.meetingType === "miniLink") {
+          if (!videoItem.isLocal) {
+            this.isWaiting = false;
+          }
+        } else {
+          // if (this.judgeParticipantIsInvited(videoItem.identity) && videoItem?.audioTrack) {
+          //   this.isWaiting = false;
+          // }
+          if (!videoItem.isLocal && videoItem?.audioTrack) {
+            this.isWaiting = false;
+          }
+        }
+      }
+      // 底部描述元素
+      let describeElm = document.getElementById(`describe-${videoItem.identity}`);
+      // 摄像头关闭后展板元素
+      let boardElm = document.getElementById(`board-${videoItem.identity}`);
+      // 底部麦克风图标元素
+      let microElm = document.getElementById(`microphone-${videoItem.identity}`);
+      // 声明麦克风按钮点击事件回调
+      const unableMicrophone = () => {
+        this.liveClient.changeParticipantMicrophoneStatus(videoItem.identity, true);
+      };
+      const enableMicrophone = () => {
+        this.liveClient.changeParticipantMicrophoneStatus(videoItem.identity, false);
+      };
+      // 设置指定元素为焦点
+      const setBlurVideoLeft = () => {
+        if (!this.isPreviewOpen) {
+          return;
+        }
+        let layoutBlurElm = document.querySelector("#point-meeting-contain .layout-blur");
+        let layoutNormalElm = document.querySelector("#point-meeting-contain .layout-normal");
+        let localChild = layoutBlurElm.firstElementChild;
+        let currentEle = document.getElementById(`participant-${videoItem.identity}`);
+        if (localChild) {
+          if (localChild.id === `participant-${this.localIdentity}`) {
+            return;
+          } else {
+            layoutNormalElm.insertBefore(localChild, layoutNormalElm.firstChild ?? null);
+            if (currentEle) {
+              layoutBlurElm.appendChild(currentEle);
+            }
+          }
+        } else {
+          layoutBlurElm.appendChild(currentEle);
+        }
+      };
+      // 为与会者元素绑定事件
+      if (videoDiv) {
+        videoDiv.onclick = setBlurVideoLeft;
+      }
+      if (videoItem.isScreenShareEnabled || videoItem.isCameraEnabled) {
+        if (boardElm) {
+          videoDiv.removeChild(boardElm);
+          boardElm = null;
+        }
+        if (!describeElm) {
+          describeElm = document.createElement("div");
+          describeElm.className = "describe";
+          describeElm.id = `describe-${videoItem.identity}`;
+          describeElm.innerHTML = `
+            <div id="microphone-${videoItem.identity}" class="microphone"></div>
+            <div id="${videoItem.identity}" class="identity">${
+            videoItem.isLocal ? videoItem.name + "(我)" : videoItem.name
+          }</div>
+          `;
+          videoDiv.appendChild(describeElm);
+        }
+      } else {
+        if (describeElm) {
+          videoDiv.removeChild(describeElm);
+          describeElm = null;
+        }
+        if (!boardElm) {
+          boardElm = document.createElement("div");
+          boardElm.className = "board";
+          boardElm.id = `board-${videoItem.identity}`;
+          boardElm.innerHTML = `
+                <div class="board-icon"></div>
+                <div class="board-title">
+                  <span class="board-title-text">${videoItem.name}</span>
+                  <div id="microphone-${videoItem.identity}" class="microphone"></div>
+                </div>
+              `;
+          if (boardElm) {
+            videoDiv.appendChild(boardElm);
+          }
+        }
+      }
+      // 更新麦克风元素
+      microElm = document.getElementById(`microphone-${videoItem.identity}`);
+      // 为麦克风元素绑定事件
+      if (microElm && videoItem.isMicrophoneEnabled) {
+        microElm.className = "microphone microphone-active";
+        microElm.onclick = unableMicrophone;
+      } else if (microElm && !videoItem.isMicrophoneEnabled) {
+        microElm.className = "microphone microphone-inactive";
+        microElm.onclick = enableMicrophone;
+      }
+      // 音视频轨道绑定到video元素
+      if (videoItem.videoTrack) {
+        videoItem.videoTrack.attach(videoElm);
+      }
+      if (!videoItem.isLocal) {
+        if (videoItem.audioTrack) {
+          videoItem.audioTrack.attach(videoElm);
+        }
+      }
+      this.addToParticipantList(videoItem);
+    },
+    renderAudioItem(audioItem) {
+      console.log("语音通话渲染" + audioItem.identity + ":", audioItem);
+      if (audioItem.isLocal) {
+        const metadata = audioItem.metadata;
+        this.isMicroEnabled = audioItem.isMicrophoneEnabled;
+        this.isSpeakerEnabled = !metadata.isDeafness;
+        this.localIdentity = audioItem.identity;
+        this.localName = audioItem.name;
+      }
+      if (!audioItem.isLocal) {
+        const container = document.getElementById("point-meeting-contain");
+        let audioDiv = document.getElementById(`participant-${audioItem.identity}`);
+        if (!container) {
+          this.showMessage.message("error", "会议容器不存在");
+          return;
+        }
+        if (!audioDiv && !audioItem.remove) {
+          audioDiv = document.createElement("div");
+          audioDiv.id = `participant-${audioItem.identity}`;
+          audioDiv.className = audioItem.isLocal ? "participant local" : "participant";
+          audioDiv.innerHTML = `
+              <audio id="audio-${audioItem.identity}" class="p-audio" autoplay></audio>
+              <div class="participant-icon"></div>
+              <div class="participant-title">
+                <div id="microphone-${audioItem.identity}" class="microphone"></div>
+                <span class="participant-title-text">${audioItem.name}</span>
+              </div>
+            `;
+          if (audioItem.isLocal) {
+            container.insertBefore(audioDiv, container.firstChild ?? null);
+          } else {
+            container.appendChild(audioDiv);
+          }
+          this.addToParticipantList(audioItem);
+        }
+        let audioElm = document.getElementById(`audio=${audioItem.identity}`);
+        if (audioItem.remove) {
+          if (audioElm) {
+            audioElm.srcObject = null;
+            audioElm.src = "";
+            audioElm.remove();
+          }
+          if (audioDiv) {
+            audioDiv.remove();
+          }
+          this.removeFromParticipantList(audioItem);
+          if (audioItem.audioTrack) {
+            audioItem.audioTrack.detach();
+          }
+        }
+        if (this.joinType === "launch") {
+          if (audioItem?.audioTrack) {
+            this.isWaiting = false;
+          }
+        }
+        // 底部麦克风图标元素
+        let microElm = document.getElementById(`microphone-${audioItem.identity}`);
+        // 声明麦克风按钮点击事件回调
+        const unableMicrophone = () => {
+          this.liveClient.changeParticipantMicrophoneStatus(audioItem.identity, true);
+        };
+        const enableMicrophone = () => {
+          this.liveClient.changeParticipantMicrophoneStatus(audioItem.identity, false);
+        };
+        if (microElm && audioItem.isMicrophoneEnabled) {
+          microElm.className = "microphone microphone-active";
+          microElm.onclick = unableMicrophone;
+        } else if (microElm && !audioItem.isMicrophoneEnabled) {
+          microElm.className = "microphone microphone-inactive";
+          microElm.onclick = enableMicrophone;
+        }
+        if (audioItem.audioTrack) {
+          audioItem.audioTrack.attach(audioElm);
+        }
+      }
+      this.addToParticipantList(audioItem);
+    },
+    clearMeetingStatus() {
+      this.$emit("meetingEnded");
+    }
+  },
+  mounted() {
+    this.liveClient = window["liveClient"];
+    this.showMessage = new ShowMessage();
+    this.initClientEvent();
+    if (this.joinType === "launch") {
+      // 发起会议
+      if (this.meetingType === "video" || this.meetingType === "miniLink") {
+        this.liveClient.roomMode = "auto";
+      } else if (this.meetingType === "voice") {
+        this.liveClient.roomMode = "audio";
+      } else {
+        void 0;
+      }
+      this.createRoom();
+    } else {
+      // 加入会议
+      if (this.meetingType === "video" || this.meetingType === "miniLink") {
+        this.liveClient.roomMode = "auto";
+      } else if (this.meetingType === "voice") {
+        this.liveClient.roomMode = "audio";
+      } else {
+        void 0;
+      }
+      this.joinRoom();
+    }
+    this.setPageFooterVisible(4);
+  },
+  beforeDestroy() {
+    if (this.isInMeeting) {
+      this.leaveRoom();
+    }
+    this.dispatchLiveClientEvent();
+    // 重置房间连接处理标志
+    this.isRoomConnectedHandled = false;
+    this.clearMeetingStatus();
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.point-meeting {
+  width: 710px;
+  height: 440px;
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  z-index: 2000;
+  background: var(--dialog-bg);
+  font-weight: 400;
+  font-size: 16px;
+  color: var(--theme-font-color);
+  overflow: hidden;
+  transform: translate(0, 0);
+  border: 1px solid var(--dialog-border-color);
+  border-radius: 10px;
+  box-shadow: 0px 0px 10px 0px var(--dialog-shadow-color);
+
+  &-top {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    height: 40px;
+    justify-content: space-between;
+    padding: 0 20px;
+    border-bottom: 1px solid var(--dialog-border-color);
+    .top-group {
+      display: flex;
+      align-items: center;
+
+      .duration-icon {
+        width: 15px;
+        height: 15px;
+        background: var(--call-duration-icon) no-repeat center / 100% 100%;
+        margin-right: 4px;
+      }
+
+      span {
+        white-space: nowrap;
+      }
+
+      .full-screen-btn {
+        cursor: pointer;
+        width: 16px;
+        height: 16px;
+        background: var(--call-fullscreen-icon) no-repeat center / 100% 100%;
+      }
+
+      .close-btn {
+        cursor: pointer;
+        width: 20px;
+        height: 20px;
+        background: var(--close-icon) no-repeat center / 100% 100%;
+      }
+    }
+  }
+
+  &-wrapper {
+    width: 100%;
+    height: calc(100% - 40px);
+  }
+
+  &-foot {
+    position: absolute;
+    bottom: -52px;
+    left: 0;
+    width: 100%;
+    height: 52px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    background: var(--call-foot-bg);
+    z-index: 200;
+    transition: bottom 0.2s;
+
+    &-show {
+      bottom: 0px;
+    }
+
+    &-btn {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      cursor: pointer;
+
+      .icon {
+        width: 20px;
+        height: 20px;
+        margin-bottom: 4px;
+      }
+
+      .title {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        white-space: nowrap;
+      }
+    }
+
+    .mic-on {
+      .icon {
+        background: var(--common-mic-on) no-repeat center / 100% 100%;
+      }
+    }
+
+    .mic-off {
+      .icon {
+        background: var(--common-mic-off) no-repeat center / 100% 100%;
+      }
+    }
+
+    .cam-on {
+      .icon {
+        background: var(--common-cam-on) no-repeat center / 100% 100%;
+      }
+    }
+
+    .cam-off {
+      .icon {
+        background: var(--common-cam-off) no-repeat center / 100% 100%;
+      }
+    }
+
+    .speaker-on {
+      .icon {
+        background: var(--common-speaker-on) no-repeat center / 100% 100%;
+      }
+    }
+
+    .speaker-off {
+      .icon {
+        background: var(--common-speaker-off) no-repeat center / 100% 100%;
+      }
+    }
+
+    .screen-share {
+      .icon {
+        background: var(--common-share-icon) no-repeat center / 100% 100%;
+      }
+    }
+
+    .preview {
+      .icon {
+        background: var(--common-preview-meet-icon) no-repeat center / 100% 100%;
+      }
+    }
+
+    .cancel {
+      .icon {
+        width: 22px;
+        height: 22px;
+        background: var(--common-cancel-icon) no-repeat center / 100% 100%;
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+@import "./style/index.scss";
+</style>