修改了bug

yz3456

2024-07-29 fae5df1d3f1ae875ac546cacfb4744b2e8230ca2

 ruoyi-ui/src/components/comp-room.vue

@@ -6,14 +6,14 @@
<template>
  <div class="rtc-container">
    <!-- 进房操作区域 -->
    <p v-if="isHostMode" class="label">{{ $t('Operation') }}</p>
    <p v-if="isHostMode" class="label">{{ $t('会议操作') }}</p>
    <div class="control-container">
      <div class="rtc-control-container">
        <el-button
<!--        <el-button
          class="button"
          type="primary"
          size="small" :disabled="isJoining || isJoined" @click="handleJoinRoom">{{ $t('Join Room') }}</el-button>
        <el-button
          size="small" :disabled="isJoining || isJoined" @click="handleJoinRoom">{{ $t('加入房间') }}</el-button> -->
<!--        <el-button
          v-if="isHostMode"
          class="button"
          type="primary"
@@ -21,21 +21,24 @@
        <el-button
          v-if="isHostMode"
          class="button"
          type="primary" size="small" @click="handleUnpublish">{{ $t('Unpublish') }}</el-button>
        <el-button
          type="primary" size="small" @click="handleUnpublish">{{ $t('Unpublish') }}</el-button> -->
<!--        <el-button
          class="button"
          type="primary" size="small" @click="handleLeave">{{ $t('Leave Room') }}</el-button>
          type="primary" size="small" @click="handleLeave">{{ $t('离开房间') }}</el-button> -->
      </div>
      <div v-if="isHostMode" class="screen-share-control-container">
        <el-button
          class="button"
          type="primary"
          size="small"
          :disabled="isShareJoined && isSharePublished"
          @click="handleStartScreenShare">{{ $t('Start Screen Share') }}</el-button>
          :disabled="(isShareJoined && isSharePublished) || disable"
          @click="handleStartScreenShare">{{ $t('共享屏幕') }}</el-button>
        <el-button
          class="button"
          type="primary" size="small" @click="handleStopScreenShare">{{ $t('Stop Screen Share') }}</el-button>
          type="primary" size="small" @click="handleStopScreenShare" :disabled='disable'>{{ $t('结束屏幕共享') }}</el-button>
          <el-button
            class="button"
            type="primary" size="small" @click="handleLeave" :disabled='disable'>{{ $t('离开房间') }}</el-button>
      </div>
    </div>

@@ -63,19 +66,22 @@

    <div class="info-container" :class="$isMobile && 'info-container-mobile'">
      <!-- Log 展示区域 -->
      <div v-if="isHostMode" class="log-container" ref="logContainer">
        <p class="log-label">Log:</p>
        <div v-for="(item, index) in logList" :key="index">
          <span class="log-state" v-if="item.type === 'success'">🟩 </span>
          <span class="log-state" v-if="item.type === 'failed'">🟥 </span>
          <span>{{ item.log }}</span>
        </div>
   <div v-if="isHostMode" class="log-container" ref="logContainer">
        <!-- <p class="log-label">Log:</p> -->
        <!-- <div v-for="(item, index) in logList" :key="index"> -->
          <!-- <span class="log-state" v-if="item.type === 'success'">🟩 </span> -->
          <!-- <span class="log-state" v-if="item.type === 'failed'">🟥 </span> -->
          <!-- <span>{{ item.log }}</span> -->
        <!-- </div> -->
      </div>

      <!-- 本地流区域 -->
      <div v-if="localStream" class="local-stream-container">
        <!-- <div style="background-color: red; width: 20px;height: 20px">123123</div> -->
        <!-- 本地流播放区域 -->
        <div id="localStream" class="local-stream-content"></div>
        <div id="localStream" class="local-stream-content" ref="myDiv">
          <!-- <div v-if="bj" style="background-color: red; width: 50%;height: 50%">123123</div> -->
        </div>
        <!-- 本地流操作栏 -->
        <div v-if="isPlayingLocalStream" class="local-stream-control">
          <div class="video-control control">
@@ -100,6 +106,7 @@

    <!-- 远端流区域 -->
    <div class="remote-container">
      <!-- <div style="background-color: red; width: 20px;height: 20px">456456</div> -->
      <div
        v-for="(item) in remoteStreamList"
        :key="item.getUserId()"
@@ -130,10 +137,16 @@
  },
  data() {
    return {
      disable:false,
      logList: [],
      inviteLink: '',
      showCopiedTip: false,
    };
  },
  created() {
  },
  mounted(){
    this.handleJoinRoom();
  },
  computed: {
    isHostMode() {
@@ -161,7 +174,7 @@
      }
      const { sdkAppId, secretKey, roomId } = this;
      const inviteUserId = `user_${parseInt(Math.random() * 100000000, 10)}`;
     alert(123)
     // alert(123)
      const userSigGenerator = new LibGenerateTestUserSig(sdkAppId, secretKey, 604800);
      const inviteUserSig = userSigGenerator.genTestUserSig(inviteUserId);
      this.inviteLink = encodeURI(`${location.origin}${location.pathname}#/invite?sdkAppId=${sdkAppId}&userSig=${inviteUserSig}&roomId=${roomId}&userId=${inviteUserId}`);
@@ -185,7 +198,7 @@
          alert(this.$t('Please enter userId and roomId'));
          return;
        }
      alert(129)
      // alert(129)
        const userSigGenerator = new LibGenerateTestUserSig(this.sdkAppId, this.secretKey, 604800);
        this.userSig = userSigGenerator.genTestUserSig(this.userId);
      } else {
@@ -216,6 +229,7 @@
    // 点击【Leave Room】按钮
    async handleLeave() {
      await this.leave();
      this.disable = true
    },

    // 点击【开始屏幕分享】按钮
@@ -239,6 +253,7 @@

    // 显示成功的 Log
    addSuccessLog(log) {
      // alert('加入成功')
      if (!this.isHostMode) {
        return;
      }
@@ -252,6 +267,7 @@

    // 显示失败的 Log
    addFailedLog(log) {
      // alert('加入失败')
      if (!this.isHostMode) {
        return;
      }
@@ -320,28 +336,28 @@
  }

  .info-container {
    width: 100%;
    width: 0%;
    display: flex;
    justify-content: space-between;
    .log-container {
      flex-grow: 1;
      border: 1px solid #dddddd;
      height: 360px;
      padding: 10px;
      margin-right: 16px;
      overflow-y: scroll;
      .log-label {
        margin: 0 0 6px;
        font-weight: bold;
      }
      .log-state {
        display: inline-block;
        margin-right: 6px;
      }
      > div {
        font-size: 12px;
      }
    }
    // .log-container {
    //   flex-grow: 1;
    //   border: 1px solid #dddddd;
    //   height: 360px;
    //   padding: 10px;
    //   margin-right: 16px;
    //   overflow-y: scroll;
    //   .log-label {
    //     margin: 0 0 6px;
    //     font-weight: bold;
    //   }
    //   .log-state {
    //     display: inline-block;
    //     margin-right: 6px;
    //   }
    //   > div {
    //     font-size: 12px;
    //   }
    // }
    .local-stream-container {
      width: 480px;
      height: 360px;