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

语音通话类型展示

Browse Source
This commit is contained in:
Jason.Chen
2022-02-21 12:05:19 +08:00
parent ce954c5dcc
commit f4b06bbf01
7 changed files with 202 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
pages/im/components/messageCell.vue
View File

@@ -28,9 +28,6 @@
}
}
},
mounted() {
console.log(this.item);
},
computed: {
contact() {
return function(targetId) {

4
pages/im/components/messagePreview.vue
View File

@@ -22,10 +22,10 @@
<view class="preview" v-if="msg.objectName=='RC:LBSMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[位置]
</view>
<view class="preview" v-if="msg.objectName=='RC:AudioMsg'">
<view class="preview" v-if="msg.objectName=='RC:InfoNtf' && msg.message=='0'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[语音通话]
</view>
<view class="preview" v-if="msg.objectName=='RC:VideoMsg'">
<view class="preview" v-if="msg.objectName=='RC:InfoNtf' && msg.message=='1'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[视频通话]
</view>
<view class="preview" v-if="msg.objectName=='RC:GrpNtf'">

76
pages/im/components/showCall.vue Normal file
View File

@@ -0,0 +1,76 @@
<template>
<view class="msg--text">
<text class="name" v-if="!guest && name">{{ name }}</text>
<view>
<text class="im--text" :class="guest ? 'right': 'left'" v-if="msg.message == '1'">语音通话</text>
<text class="im--text" :class="guest ? 'right': 'left'" v-else>视频通话</text>
</view>
</view>
</template>
<!-- msg
{
"message": "1",
"objectName": "RC:InfoNtf",
"userInfo": {
"userId": "10051",
"name": "Jason.电信",
"extra": "",
"portraitUrl": "http://storage.zh.shangkelian.cn/uploads/2022/02/16/29b13f5301694721ad7acd8b8b67bbd9.jpg"
}
}
-->
<script>
export default {
name: 'showText',
props: {
msg: {
type: Object,
default: () => {
return {}
}
},
name: {
type: String,
default: ''
},
guest: {
type: Boolean,
default: true
}
},
mounted() {
console.log(this.msg);
}
}
</script>
<style scoped lang="scss">
.msg--text {
.name {
font-size: 26rpx;
color: $text-gray-m;
display: inline-block;
}
.im--text {
max-width: 508rpx;
padding: 20rpx;
line-height: 46rpx;
font-size: 32rpx;
color: $text-color;
display: inline-block;
word-break: break-all;
&.left {
border-radius: 0 20rpx 20rpx 20rpx;
background: white;
}
&.right {
border-radius: 20rpx 0 20rpx 20rpx;
background: $main-color;
color: white;
}
}
}
</style>

3
pages/im/friends/index.vue
View File

@@ -37,7 +37,8 @@
getFriendsLetter
} from '@/apis/interfaces/im';
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import im from '@/utils/im/index.js'
export default {
data() {
return {

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

@@ -1,27 +1,30 @@
<template>
<view class="call">
<view class="video">
<RongCloud-Call-RCUniCallView ref="bigVideoView" :style="{width:windowWidth+'px',height:windowHeight+'px'}"
class="bigVideoView">
</RongCloud-Call-RCUniCallView>
<RongCloud-Call-RCUniCallView ref="smallVideoView" class="smallVideoView">
<RongCloud-Call-RCUniCallView ref="bigVideoView" :style="bigVideoStyle" class="bigVideoView">
</RongCloud-Call-RCUniCallView>
<movable-area class="movableArea" :style="movableAreaStyle">
<movable-view class="movableView" direction="all" :x="50" :y="50" v-if="mediaType == 1 && connected">
<RongCloud-Call-RCUniCallView ref="smallVideoView" class="smallVideoView" @click="changeMine">
</RongCloud-Call-RCUniCallView>
</movable-view>
</movable-area>
</view>
<view class="status" v-if="!connected || mediaType == 0">
<view class="status" v-if="!connected">
<view class="remote">
<u-avatar :src="contact(targetId).portraitUrl" shape="square" size="96" bgColor="#fff" />
<u-avatar :src="contact(targetId).portraitUrl" shape="square" :size="avatarSize" bgColor="#fff" />
<view><text class="nickname">{{ contact(targetId).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">
<view class="icon">
<u-icon name="mic" color="#ffffff" size="30" />
<u-icon name="mic-off" color="#ffffff" size="30" />
<u-icon name="mic-off" color="#ffffff" size="30" v-if="micOff" />
<u-icon name="mic" color="#ffffff" size="30" v-else />
</view>
<text class="text">麦克风</text>
</view>
@@ -39,8 +42,8 @@
</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" />
<u-icon name="volume-off-fill" color="#ffffff" size="27" v-if="volumeOff" />
<u-icon name="volume-fill" color="#ffffff" size="27" v-else />
</view>
<text class="text">扬声器</text>
</view>
@@ -51,22 +54,30 @@
<script>
import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
import * as IMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import utils from '@/utils/index.js'
export default {
data() {
return {
targetId: '',
mediaType: 0, // 0 语音 1 视频
isOut: false,
connected: false,
micStatus: false,
speStatus: false,
remoteRinging: false,
ring: null,
isCall: false
isCall: false,
avatarSize: 96,
bigVideoStyle: {},
movableAreaStyle: {},
// 关闭麦克风
micOff: false,
// 关闭扬声器
volumeOff: false
}
},
onLoad(e) {
this.avatarSize = utils.rpx2px(200)
this.targetId = e.targetId
this.mediaType = e.mediaType
this.isCall = Boolean(e.isCall)
@@ -74,10 +85,10 @@
if (this.isCall) {
CallLib.startSingleCall(this.targetId, this.mediaType, '');
if (this.mediaType == 1) {
const session = CallLib.getCurrentCallSession()
this.$nextTick(() => {
CallLib.setVideoView(session.mine.userId, this.$refs.bigVideoView.ref, 0, false)
})
const session = CallLib.getCurrentCallSession()
setTimeout(() => {
CallLib.setVideoView(session.mine.userId, this.$refs.bigVideoView.ref, 0, false)
}, 200)
}
}
// 响铃
@@ -91,6 +102,15 @@
uni.$once('onRemoteUserJoined', () => {
this.remoteRinging = false
})
this.bigVideoStyle = {
width: this.windowWidth + 'px',
height: this.windowHeight + 'px',
// backgroundImage: `url("${this.contact(this.targetId).portraitUrl}")`
}
this.movableAreaStyle = {
width: this.windowWidth + 'px',
height: this.windowHeight + 'px',
}
},
beforeDestroy() {
@@ -109,11 +129,40 @@
}
},
methods: {
afterHangup() {
const conversationType = IMLib.ConversationType.PRIVATE // 会话类型
const targetId = this.targetId
const sentStatus = 30
const messageContent = {
objectName: 'RC:InfoNtf',
userInfo: this.$store.getters.sender,
message: String(this.mediaType),
extra: '这里传接通和时长信息',
}
const sentTime = 0 // 消息的发送时间
IMLib.insertOutgoingMessage(conversationType, targetId, sentStatus, messageContent, sentTime,
({
code,
message
}) => {
console.log(code);
// 插入消息成功
if (code === 0) {
console.log(message)
}
}
)
uni.$emit('onReceiveMessage', {
targetId: this.targetId
})
},
changeMicrophone() {
this.micOff = !this.micOff
CallLib.enableMicrophone(this.micStatus)
this.micStatus = !this.micStatus
},
changeSpeaker() {
this.volumeOff = !this.volumeOff
CallLib.enableSpeaker(this.speStatus)
this.speStatus = !this.speStatus
},
@@ -134,7 +183,25 @@
}, 200)
}
},
// 切换主屏显示人
changeMine() {
if (this.isCall) {
const session = CallLib.getCurrentCallSession()
setTimeout(() => {
CallLib.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0, false)
CallLib.setVideoView(session.mine.userId, this.$refs.smallVideoView.ref, 0, true)
}, 200)
} else {
const session = CallLib.getCurrentCallSession()
setTimeout(() => {
CallLib.setVideoView(session.targetId, this.$refs.smallVideoView.ref, 0, true)
CallLib.setVideoView(session.mine.userId, this.$refs.bigVideoView.ref, 0, false)
}, 200)
}
this.isCall = !this.isCall
},
hangup() {
this.afterHangup()
CallLib.hangup()
this.stopRing()
@@ -181,23 +248,33 @@
position: relative;
.video {
.bigVideoView {
background: #000;
.movableArea {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
.movableView {
width: 180rpx;
height: 320rpx;
position: relative;
.smallVideoView {
width: 180rpx;
height: 320rpx;
background-color: #666;
}
}
}
.smallVideoView {
background: blue;
position: absolute;
right: 100rpx;
top: 100rpx;
width: 180rpx;
height: 320rpx;
.bigVideoView {
background-color: #666;
}
}
.status {
flex: 1;
background: #666;
width: 750rpx;
position: fixed;
bottom: 0;
@@ -236,10 +313,6 @@
.btn {
align-items: center;
&.hangup {
background-color: $text-price;
}
.icon {
background: $main-color;
width: 132rpx;
@@ -248,6 +321,10 @@
display: flex;
align-items: center;
justify-content: center;
&.hangup {
background-color: $text-price;
}
}
.text {

15
pages/im/private/chat.vue
View File

@@ -17,6 +17,8 @@
:msg="item.content" />
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content" />
<show-call v-if="item.objectName === 'RC:InfoNtf'" :guest="item.messageDirection == 1"
:msg="item.content" />
<view class="state" v-if="item.messageDirection == 1">
<text
:class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
@@ -34,13 +36,15 @@
import showVoice from '../components/showVoice'
import showImage from '../components/showImage'
import showText from '../components/showText'
import showCall from '../components/showCall'
import sentMessageBar from '../components/sentMessageBar'
export default {
components: {
sentMessageBar,
showVoice,
showImage,
showText
showText,
showCall
},
data() {
return {
@@ -119,7 +123,7 @@
this.conversationType,
this.targetId,
0,
20,
120,
true,
(messages) => {
this.messages = messages
@@ -147,7 +151,7 @@
}
}
}
</script>
</script>
<style scoped lang="scss">
/* 窗口 */
@@ -189,18 +193,23 @@
&.right {
flex-direction: row-reverse;
.state {
text-align: right;
}
}
.msg {
margin: 0 20rpx;
.state {
padding-top: 10rpx;
.state-text {
font-size: $title-size-m - 2;
color: rgba($color: $main-color, $alpha: 0.3)
}
.state-text-active {
font-size: $title-size-m - 2;
color: #cecece;

3
utils/im/message.js
View File

@@ -16,7 +16,8 @@ const getMessageList = (conversationType, targetId, timeStamp, count, isForward,
'RC:SightMsg',
'RC:ReferenceMsg',
'RC:CombineMsg',
'RC:GrpNtf'
'RC:GrpNtf',
'RC:InfoNtf'
]
RongIMLib.getHistoryMessagesByTimestamp(