From 7b22a877944f1219d406105139ecf318584dbb6d Mon Sep 17 00:00:00 2001
From: yz3456 <2753272399@qq.com>
Date: 星期五, 28 六月 2024 16:22:14 +0800
Subject: [PATCH] 完善了直播模块
---
ruoyi-ui/src/components/comp-room.vue | 84 ++++++++++++++++------------
ruoyi-ui/src/views/system/user/profile/index.vue | 2
ruoyi-ui/src/views/meeting/Home.vue | 53 +++++++++++++----
3 files changed, 89 insertions(+), 50 deletions(-)
diff --git a/ruoyi-ui/src/components/comp-room.vue b/ruoyi-ui/src/components/comp-room.vue
index 5eb10d2..c33b14e 100644
--- a/ruoyi-ui/src/components/comp-room.vue
+++ b/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 @@
// 鐐瑰嚮銆怢eave 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;
diff --git a/ruoyi-ui/src/views/meeting/Home.vue b/ruoyi-ui/src/views/meeting/Home.vue
index 467ac69..6ed5520 100644
--- a/ruoyi-ui/src/views/meeting/Home.vue
+++ b/ruoyi-ui/src/views/meeting/Home.vue
@@ -12,25 +12,25 @@
<!-- quick demo 浣跨敤鎸囧紩 -->
<!-- <comp-guidance></comp-guidance> -->
<!-- sdkAppId銆乻ecretKey銆乽serId銆乺oomId 鍙傛暟杈撳叆鍖哄煙 -->
- <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;
},
diff --git a/ruoyi-ui/src/views/system/user/profile/index.vue b/ruoyi-ui/src/views/system/user/profile/index.vue
index 1cdec42..524d3db 100644
--- a/ruoyi-ui/src/views/system/user/profile/index.vue
+++ b/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)
--
Gitblit v1.9.1