Browse Source

feat: 多人音视频功能

master
xsx 2 years ago
parent
commit
9adc57750e
  1. 89
      im-uniapp/components/group-rtc-join/group-rtc-join.vue
  2. 2
      im-uniapp/store/chatStore.js
  3. 32
      im-uniapp/store/configStore.js

89
im-uniapp/components/group-rtc-join/group-rtc-join.vue

@ -0,0 +1,89 @@
<template>
<uni-popup ref="popup" type="center">
<uni-popup-dialog mode="base" message="成功消息" :duration="2000" title="是否加入通话?" confirmText="加入"
@confirm="onOk">
<div class="group-rtc-join">
<div class="host-info">
<div>发起人</div>
<head-image :name="rtcInfo.host.nickName" :url="rtcInfo.host.headImage" :size="80"></head-image>
</div>
<div class="user-info">
<div>{{rtcInfo.userInfos.length+'人正在通话中'}}</div>
<scroll-view scroll-x="true" scroll-left="120">
<view class="user-list">
<view v-for="user in rtcInfo.userInfos" class="user-item">
<head-image :name="user.nickName" :url="user.headImage" :size="80"></head-image>
</view>
</view>
</scroll-view>
</div>
</div>
</uni-popup-dialog>
</uni-popup>
</template>
<script>
export default {
data() {
return {
rtcInfo: {}
}
},
props: {
groupId: {
type: Number
}
},
methods: {
open(rtcInfo) {
this.rtcInfo = rtcInfo;
this.$refs.popup.open();
},
onOk() {
let users = this.rtcInfo.userInfos;
let mine = this.$store.state.userStore.userInfo;
//
if(!users.find((user)=>user.id==mine.id)){
users.push({
id: mine.id,
nickName: mine.nickName,
headImage: mine.headImageThumb,
isCamera: false,
isMicroPhone: true
})
}
const userInfos = encodeURIComponent(JSON.stringify(users));
uni.navigateTo({
url: `/pages/chat/chat-group-video?groupId=${this.groupId}&isHost=false
&inviterId=${mine.id}&userInfos=${userInfos}`
})
}
}
}
</script>
<style lang="scss" scoped>
.group-rtc-join {
width: 100%;
.host-info {
font-size: 16px;
padding: 10px;
}
.user-info {
font-size: 16px;
padding: 10px;
}
.user-list {
display: flex;
align-items: center;
height: 90rpx;
.user-item {
padding: 3rpx;
}
}
}
</style>

2
im-uniapp/store/chatStore.js

@ -51,7 +51,6 @@ export default {
}
})
})
console.log(cacheChats.length)
},
openChat(state, chatInfo) {
let chats = this.getters.findChats();
@ -295,7 +294,6 @@ export default {
});
// 将消息一次性装载回来
state.chats = cacheChats;
console.log(cacheChats.length)
this.commit("saveToStorage");
},
saveToStorage(state) {

32
im-uniapp/store/configStore.js

@ -0,0 +1,32 @@
import http from '../common/request'
export default {
state: {
webrtc: {}
},
mutations: {
setConfig(state, config) {
state.webrtc = config.webrtc;
},
clear(state){
state.webrtc = {};
}
},
actions:{
loadConfig(context){
return new Promise((resolve, reject) => {
http({
url: '/system/config',
method: 'GET'
}).then((config) => {
console.log("系统配置",config)
context.commit("setConfig",config);
resolve();
}).catch((res)=>{
reject(res);
});
})
}
}
}
Loading…
Cancel
Save