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

test

Browse Source
This commit is contained in:
Jason.Chen
2022-01-28 09:39:36 +08:00
parent 35bd9bf283
commit db6c3e7ea2
5 changed files with 122 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

3
pages/im/index.vue
View File

@@ -205,6 +205,9 @@
// 进入聊天的详情页面，清理未读消息数量
toDetail(item) {
this.hidePop()
// uni.navigateTo({
// url: '/pages/im/private/call?targetId=' + item.targetId + '&mediaType=1'
// })
uni.navigateTo({
url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
.conversationType

149
pages/im/private/call.nvue
View File

@@ -8,20 +8,42 @@
</RongCloud-Call-RCUniCallView>
</view>
<view class="status" v-if="!connected">
<view class="status" v-if="!connected || mediaType == 0">
<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">已接通 {{ connected }}</view>
<view v-else class="mediaType">{{ mediaType == 0 ? '邀请您语音通话' : '邀请您视频通话' }}</view>
<u-avatar :src="userInfo.portraitUrl" shape="square" size="96" bg-color="#fff"></u-avatar>
<view><text class="nickname">{{userInfo.name}}</text></view>
<view v-if="remoteRinging"><text class="mediaType">等待对方接听</text></view>
<view v-if="connected"><text class="mediaType">已接通</text></view>
<view v-else><text class="mediaType">{{ mediaType == 0 ? '邀请您语音通话' : '邀请您视频通话' }}</text></view>
</view>
</view>
<view class="buttons">
<view class="btn" v-if="connected" @click="changeMicrophone"><text class="white">麦克风</text></view>
<view class="btn hangup" @click="hangup"><text class="white">挂断</text></view>
<view class="btn" v-if="!connected" @click="accept"><text class="white">接听</text></view>
<view class="btn" v-if="connected" @click="changeSpeaker"><text class="white">扬声器</text></view>
<view class="btn" v-if="connected" @click="changeMicrophone">
<view class="icon">
<u-icon name="mic" color="#ffffff" size="30" />
<u-icon name="mic-off" color="#ffffff" size="30" />
</view>
<text class="text">麦克风</text>
</view>
<view class="btn" @click="hangup">
<view class="icon hangup">
<u-icon name="close" color="#ffffff" size="25" />
</view>
<text class="text">挂断</text>
</view>
<view class="btn" v-if="!connected" @click="accept">
<view class="icon">
<u-icon name="checkmark" color="#ffffff" size="30" />
</view>
<text class="text">接听</text>
</view>
<view class="btn" v-if="connected" @click="changeSpeaker">
<view class="icon">
<u-icon name="volume-fill" color="#ffffff" size="27" />
<u-icon name="volume-off-fill" color="#ffffff" size="27" />
</view>
<text class="text">扬声器</text>
</view>
</view>
</view>
</template>
@@ -37,50 +59,32 @@
return {
targetId: '',
mediaType: 0, // 0 语音 1 视频
users: [],
userInfo: {},
isOut: false,
connected: false,
micStatus: false,
speStatus: false,
remoteRinging: false,
innerAudioContext: null
ring: null
}
},
onLoad(e) {
this.targetId = e.targetId || 10051
this.targetId = e.targetId
this.mediaType = e.mediaType
getFriendInfo(this.targetId).then(res => {
this.userInfo = res
})
this.startRing()
// 监听通话链接状态
setTimeout(() => {
CallLib.setVideoView(10047, this.$refs.bigVideoView.ref, 0, false)
}, 200)
uni.$on('onCallConnected', () => {
console.log('OnCallConnected');
this.connected = true
this.stopRing()
})
uni.$on('onCallDisconnected', () => {
this.hangup()
})
uni.$on('onRemoteUserRinging', () => {
uni.$once('onCallConnected', this.onCallConnected)
uni.$once('onCallDisconnected', this.hangup)
uni.$once('onRemoteUserRinging', () => {
this.remoteRinging = true
})
uni.$on('onRemoteUserJoined', () => {
uni.$once('onRemoteUserJoined', () => {
this.remoteRinging = false
})
},
beforeDestroy() {
uni.$off('onCallConnected')
uni.$off('onCallDisconnected')
uni.$off('onRemoteUserRinging')
uni.$off('onRemoteUserJoined')
},
computed: {
windowWidth() {
return uni.getSystemInfoSync().windowWidth
@@ -100,10 +104,15 @@
},
accept() {
CallLib.accept()
},
onCallConnected() {
// 关掉铃声
this.stopRing()
// 设置链接状态
this.connected = true
// 视频通话，才开摄像头
if (this.mediaType == 1) {
const session = CallLib.getCurrentCallSession()
this.users = session.users
setTimeout(() => {
CallLib.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0,
false)
@@ -118,11 +127,10 @@
setTimeout(() => {
this.downRing()
uni.navigateBack()
// uni.redirectTo({
// url: '/pages/im/private/index?targetId=' + this.targetId + '&conversationType=1'
// })
}, 500);
uni.switchTab({
url: '/pages/im/index'
})
}, 200);
},
toHome() {
uni.switchTab({
@@ -130,24 +138,24 @@
})
},
startRing() {
const innerAudioContext = uni.createInnerAudioContext()
this.innerAudioContext = innerAudioContext
innerAudioContext.autoplay = true
innerAudioContext.loop = true
innerAudioContext.src = '/static/im/sounds/call-ring.mp3'
innerAudioContext.onEnded(() => {
innerAudioContext.destroy()
const ring = uni.createInnerAudioContext()
this.ring = ring
ring.autoplay = true
ring.loop = true
ring.src = '/static/im/sounds/call-ring.mp3'
ring.onEnded(() => {
ring.destroy()
})
},
stopRing() {
this.innerAudioContext.stop()
this.ring.stop()
},
downRing() {
const innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.autoplay = true
innerAudioContext.src = '/static/im/sounds/call-down.mp3'
innerAudioContext.onEnded(() => {
innerAudioContext.destroy()
const ding = uni.createInnerAudioContext()
ding.autoplay = true
ding.src = '/static/im/sounds/call-down.mp3'
ding.onEnded(() => {
ding.destroy()
})
}
}
@@ -156,17 +164,18 @@
<style scoped>
.call-page {
display: flex;
flex: 1;
flex-direction: column;
position: relative;
background: #666;
}
.bigVideoView {
background: #000;
}
.smallVideoView {
.smallVideoView {
background: blue;
position: absolute;
right: 100rpx;
top: 100rpx;
@@ -184,6 +193,10 @@
}
.btn {
align-items: center;
}
.icon {
background: #34CE98;
width: 132rpx;
height: 132rpx;
@@ -193,27 +206,41 @@
justify-content: center;
}
.btn .white {
.btn .text {
margin-top: 16rpx;
color: #FFFFFF;
font-size: 32rpx;
}
.btn.hangup {
.icon.hangup {
background: #dd524d;
}
.status {
flex: 1;
background: #666;
width: 750rpx;
position: fixed;
bottom: 0;
top: 0;
}
.call-user {
flex: 1;
position: fixed;
width: 750rpx;
top: 200rpx;
left: 0;
display: flex;
align-items: center;
top: 300rpx;
}
.mediaType {
font-size: 32rpx;
color: #aaa;
}
.nickname {
margin: 30rpx;
font-size: 40rpx;
font-size: 44rpx;
color: #ffffff;
}
</style>

5
pages/im/private/index.vue
View File

@@ -130,11 +130,6 @@
computed: {
disabled() {
return this.inputTxt.length == 0
},
friend() {
return function(targetId) {
return this.$store.getters.userInfo(targetId)
}
}
},
onNavigationBarButtonTap(e) {