完善了直播模块

yz3456

2024-06-28 7b22a877944f1219d406105139ecf318584dbb6d

完善了直播模块

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

@@ -9,11 +9,11 @@
    <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('加入房间') }}</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('离开房间') }}</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"
          :disabled="(isShareJoined && isSharePublished) || disable"
          @click="handleStartScreenShare">{{ $t('共享屏幕') }}</el-button>
        <el-button
          class="button"
          type="primary" size="small" @click="handleStopScreenShare">{{ $t('结束屏幕共享') }}</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,13 +66,13 @@

    <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>

      <!-- 本地流区域 -->
@@ -130,10 +133,16 @@
  },
  data() {
    return {
      disable:false,
      logList: [],
      inviteLink: '',
      showCopiedTip: false,
    };
  },
  created() {
  },
  mounted(){
    this.handleJoinRoom();
  },
  computed: {
    isHostMode() {
@@ -161,7 +170,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 +194,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 +225,7 @@
    // 点击【Leave Room】按钮
    async handleLeave() {
      await this.leave();
      this.disable = true
    },

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

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

    // 显示失败的 Log
    addFailedLog(log) {
      // alert('加入失败')
      if (!this.isHostMode) {
        return;
      }
@@ -323,25 +335,25 @@
    width: 100%;
    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;

 ruoyi-ui/src/views/meeting/Home.vue

@@ -12,25 +12,25 @@
      <!-- quick demo 使用指引 -->
     <!-- <comp-guidance></comp-guidance> -->
      <!-- sdkAppId、secretKey、userId、roomId 参数输入区域 -->
     <p class="label">{{ $t('基本信息') }}</p>
      <div class="param-container" :class="$isMobile && 'param-container-mobile'">
        <comp-info-input
     <!-- <p class="label">{{ $t('基本信息') }}</p> -->
     <div class="param-container" :class="$isMobile && 'param-container-mobile'">
<!--        <comp-info-input
          label="sdkAppId" type="number" @change="handleValueChange($event, 'sdkAppId')"></comp-info-input>
        <comp-info-input
          label="secretKey" @change="handleValueChange($event, 'secretKey')"></comp-info-input>
        <comp-info-input
          label="用户名" @change="handleValueChange($event, 'userId')"></comp-info-input>
        <comp-info-input
          label="房间号" type="number" @change="handleValueChange($event, 'roomId')"></comp-info-input>
          label="secretKey" @change="handleValueChange($event, 'secretKey')"></comp-info-input> -->
<!--        <comp-info-input
          label="用户名" @change="handleValueChange($event, 'userId')"></comp-info-input> -->
<!--        <comp-info-input
          label="房间号" type="number" @change="handleValueChange($event, 'roomId')"></comp-info-input> -->
      </div>
     <div class='alert'>
<!--     <div class='alert'>
        <el-alert
          type="error"
          :closable="false"
        >
          <span>{{ $t("Alert")}} <a target="_blank" :href="$t('Url')">{{ $t("Click")}}</a></span>
        </el-alert>
      </div>
      </div> -->
     <!-- 设备选择区域 -->
      <p class="label">{{ $t('会议设置') }}</p>
      <div class="param-container" :class="$isMobile && 'param-container-mobile'">
@@ -40,13 +40,16 @@
          deviceType="microphone" @change="handleValueChange($event, 'microphoneId')"></comp-device-select>
      </div>
      <!-- rtc 房间 -->
      <div v-if="showComponent" v-loading="loading">
     <comp-room
        ref="child"
        :sdkAppId="Number(sdkAppId)"
        :secretKey="secretKey"
        :userId="userId"
        :roomId="Number(roomId)"
        :cameraId="cameraId"
        :microphoneId="microphoneId"></comp-room>
        </div>
   </div>
  </div>
</template>
@@ -57,8 +60,11 @@
import compInfoInput from '@/components/comp-info-input.vue';
import compDeviceSelect from '@/components/comp-device-select.vue';
import compRoom from '@/components/comp-room.vue';
// const compRoom = () => import('@/components/comp-room.vue');
// import { clearUrlParam } from '@/utils/utils';

import { getIndividualList } from "@/api/self";
import { Loading } from 'element-ui'
export default {
  name: '6666',
  components: {
@@ -70,15 +76,36 @@
  },
  data() {
    return {
      sdkAppId: 0,
      secretKey: '',
      user:{},
      showComponent: false,
      loading: true,
      // 会议基本信息
      sdkAppId: 1600032250,
      secretKey: 'abedcf588654e18888eff65dfdfde240a882c611710c6ed10e1044fb44818a89',
      userId: '',
      roomId: 0,
      roomId: 123,
      cameraId: '',
      microphoneId: '',
    };
  },
  created() {
    this.getUser();

  },
  methods: {
    // 获取用户名
    getUser(id) {
      getIndividualList().then(response => {
        this.user = response.data;
        this.userId = this.user.nickName
        // alert(this.userId)
      });
      setTimeout(() => {
        this.loading = false;
        this.showComponent = true;
      }, 3000);

    },
    handleValueChange(value, key) {
      this[key] = value;
    },

 ruoyi-ui/src/views/system/user/profile/index.vue

@@ -407,7 +407,7 @@
     //  });
      getIndividualList().then(response => {
        this.user = response.data;
    //    console.log(this.user)
        // console.log(this.user,'useruseruser')
       // alert(890)
        this.fid = response.data.familyId
    //    alert(this.fid)