TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

聊天窗口

Browse Source
This commit is contained in:
唐明明
2022-01-27 13:49:27 +08:00
parent 92b2ee5747 1caaab3492
commit 318f43560e
9 changed files with 282 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

6
pages.json
View File

@@ -573,6 +573,12 @@
"navigationBarBackgroundColor": "#34CE98",
"navigationBarTextStyle": "white"
}
},{
"path" : "pages/im/chat/chat",
"style": {
"navigationBarTitleText": "chat",
"enablePullDownRefresh": false
}
}
],
"tabBar": {

19
pages/im/chat/chat.nvue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<view>
聊天窗口
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
</style>

10
pages/im/friends/info.vue
View File

@@ -206,6 +206,16 @@
},
singleCall(e) {
CallLib.startSingleCall(this.targetId, e.type, '');
uni.redirectTo({
url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' +
e.mediaType,
success: (err) => {
console.log('跳转视频通话成功');
},
fail: (err) => {
console.log('跳转视频页失败', err);
}
})
},
}
};

2
pages/im/index.vue
View File

@@ -57,6 +57,8 @@
</view>
</view>
</view>
<!-- navNvue -->
<navigator url="./chat/chat">进入NVUE</navigator>
</block>
</view>
<!-- 未登录 -->

142
pages/im/private/call.vue
View File

@@ -3,44 +3,122 @@
<view class="video">
<RongCloud-Call-RCUniCallView style="width: 100%;height: 100%" ref="bigVideoView">
</RongCloud-Call-RCUniCallView>
<view class="call-user">
<u-avatar :src="userInfo.portraitUrl" size="150" bg-color="#fff"></u-avatar>
<view class="nickname">{{userInfo.name}}</view>
<view v-if="remoteRinging" class="mediaType">
等待对方接听
</view>
<view v-if="connected" class="mediaType">
已接通
</view>
<view v-else class="mediaType">
{{ mediaType == 0 ? '邀请您语音通话' : '邀请您视频通话' }}
</view>
</view>
<button type="default" @click="accept">接听</button>
<button type="default" @click="hangup">挂断</button>
<button type="default" @click="toHome">回主页</button>
<view class="buttons">
<view class="btn" v-if="connected" @click="changeMicrophone">麦克风</view>
<view class="btn hangup" @click="hangup">挂断</view>
<view class="btn" v-if="!connected" @click="accept">接听</view>
<view class="btn" v-if="connected" @click="changeSpeaker">扬声器</view>
</view>
</view>
</view>
</template>
<script>
import {
getFriendInfo
} from '@/apis/interfaces/im.js'
import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
export default {
data() {
return {
targetId: '',
users: []
mediaType: 0, // 0 语音 1 视频
users: [],
userInfo: {},
isOut: false,
connected: false,
micStatus: false,
speStatus: false,
remoteRinging: false
}
},
onLoad(e) {
this.targetId = e.targetId
this.mediaType = e.mediaType
getFriendInfo(this.targetId).then(res => {
this.userInfo = res
})
// 监听通话链接状态
CallLib.onCallConnected((res) => {
this.connected = true
console.log("通话接通时，当前 call 的详细信息", res)
})
// 通过这个，来判断是主叫还是被叫
CallLib.onCallOutgoing((res) => {
this.isOut = true
console.log("主叫端拨出电话后，当前 call 的详细信息", res)
})
// 主叫监听对方振铃
CallLib.onRemoteUserRinging((res) => {
this.remoteRinging = true
console.log("主叫端拨出电话，被叫端收到请求，发出振铃响应时触发，对端Id为=>", res.data.userId)
})
CallLib.onRemoteUserJoined((res) => {
this.remoteRinging = false
console.log("主叫端拨出电话，被叫端收到请求后，加入通话，被叫端Id为=>", res.data.userId);
})
CallLib.onCallDisconnected((res) => {
console.log("挂断成功, 挂断原因=>", res.data.reason)
this.hangup()
})
CallLib.onRemoteUserLeft((res) => {
console.log("远端用户挂断，远端Id为=>", res.data.reason)
this.hangup()
})
},
onUnload() {
CallLib.removeCallOutgoingListener()
CallLib.removeCallConnectedListener()
CallLib.removeRemoteUserJoinedListener()
CallLib.removeCallDisconnectedListener()
CallLib.removeRemoteUserLeftListener()
CallLib.removeRemoteUserRingingListener()
},
methods: {
changeMicrophone() {
CallLib.enableMicrophone(this.micStatus)
this.micStatus = !this.micStatus
},
changeSpeaker() {
CallLib.enableSpeaker(this.speStatus)
this.speStatus = !this.speStatus
},
accept() {
CallLib.accept()
CallLib.enableCamera(true, 0)
// 视频通话，才开摄像头
if (this.mediaType == 1) {
const currentCallSession = CallLib.getCurrentCallSession()
console.log(currentCallSession);
this.users = currentCallSession.users
setTimeout(() => {
CallLib.setVideoView(currentCallSession.mine.userId, 'bigVideoView', 0, true)
}, 500);
}
},
hangup() {
CallLib.hangup()
setTimeout(() => {
uni.navigateBack()
uni.redirectTo({
url: '/pages/im/private/index?targetId=' + this.targetId + '&conversationType=1'
})
}, 200);
},
toHome() {
@@ -55,6 +133,50 @@
<style lang="scss" scoped>
.video {
width: 100vw;
height: 100vw;
height: 100vh;
position: relative;
background: $text-gray;
.call-user {
position: fixed;
text-align: center;
width: 100%;
top: 200rpx;
left: 0;
display: flex;
align-items: center;
flex-direction: column;
.nickname {
margin: $margin;
font-size: 40rpx;
}
.mediaType {
color: $text-gray-m;
}
}
.buttons {
position: fixed;
bottom: 100rpx;
width: 100%;
display: flex;
justify-content: space-around;
.btn {
background: $main-color;
width: 132rpx;
height: 132rpx;
line-height: 132rpx;
border-radius: 50%;
color: white;
text-align: center;
&.hangup {
background: $uni-color-error;
}
}
}
}
</style>

18
utils/im/index.js
View File

@@ -105,7 +105,8 @@ const addListeners = () => {
console.log("Engine:OnCallReceived=>" + "监听通话呼入, 目标id=>", res.data.targetId);
console.log('RES', res);
uni.navigateTo({
url: '/pages/im/private/call?targetId=' + res.data.targetId,
url: '/pages/im/private/call?targetId=' + res.data.targetId + '&mediaType=' +
res.data.mediaType,
success: (err) => {
console.log('跳转视频通话成功');
},
@@ -114,21 +115,6 @@ const addListeners = () => {
}
})
})
CallLib.onCallOutgoing((res) => {
console.log("主叫端拨出电话后，通过回调 onCallOutgoing，通知当前 call 的详细信息", res)
})
CallLib.onCallConnected((res) => {
console.log("Engine:OnCallConnected=>" + "通话接通时，通过回调 onCallConnected 通知当前 call 的详细信息", res)
});
CallLib.onRemoteUserJoined((res) => {
console.log("Engine:OnRemoteUserJoined=>" + "主叫端拨出电话，被叫端收到请求后，加入通话，被叫端Id为=>", res.data.userId);
})
CallLib.onCallDisconnected((res) => {
console.log("Engine:OnCallDisconnected=>" + "挂断成功, 挂断原因=>", res.data.reason)
})
CallLib.onRemoteUserLeft((res) => {
console.log("Engine:OnRemoteUserLeft=>" + "远端用户挂断，远端Id为=>", res.data.reason)
})
}
// 维护消息列表

51
utils/im/视频呼入.json Normal file
View File

@@ -0,0 +1,51 @@
{
"type": "Engine:OnCallReceived",
"module": "RongCloud-Call-RCUniCall",
"data": {
"endTime": 0,
"users": [{
"userId": "10051",
"enableCamera": false,
"mediaId": "420111350",
"mediaType": 1,
"userType": 0,
"enableMicrophone": false
}, {
"userId": "10047",
"enableCamera": false,
"mediaType": 1,
"userType": 0,
"enableMicrophone": false
}],
"inviter": {
"userId": "10051",
"enableCamera": false,
"mediaId": "420111350",
"mediaType": 1,
"userType": 0,
"enableMicrophone": false
},
"caller": {
"userId": "10051",
"enableCamera": false,
"mediaId": "420111350",
"mediaType": 1,
"userType": 0,
"enableMicrophone": false
},
"connectedTime": 0,
"extra": "",
"startTime": 0,
"mediaType": 1,
"callId": "c28cb9d8-6581-474c-bfa5-9872a4824b65",
"targetId": "10051",
"callType": 0,
"mine": {
"userId": "10047",
"enableCamera": false,
"mediaType": 1,
"userType": 0,
"enableMicrophone": false
}
}
}

51
utils/im/语音呼入.json Normal file
View File

@@ -0,0 +1,51 @@
{
"type": "Engine:OnCallReceived",
"module": "RongCloud-Call-RCUniCall",
"data": {
"endTime": 0,
"users": [{
"userId": "10051",
"enableCamera": false,
"mediaId": "420068630",
"mediaType": 0,
"userType": 0,
"enableMicrophone": false
}, {
"userId": "10047",
"enableCamera": true,
"mediaType": 0,
"userType": 0,
"enableMicrophone": false
}],
"inviter": {
"userId": "10051",
"enableCamera": false,
"mediaId": "420068630",
"mediaType": 0,
"userType": 0,
"enableMicrophone": false
},
"caller": {
"userId": "10051",
"enableCamera": false,
"mediaId": "420068630",
"mediaType": 0,
"userType": 0,
"enableMicrophone": false
},
"connectedTime": 0,
"extra": "",
"startTime": 0,
"mediaType": 0,
"callId": "1a1462b8-b63b-40a9-bf95-963e810ac49a",
"targetId": "10051",
"callType": 0,
"mine": {
"userId": "10047",
"enableCamera": true,
"mediaType": 0,
"userType": 0,
"enableMicrophone": false
}
}
}