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-01-26 17:43:21 +08:00
parent 4d5d595329
commit 07d20fb107
5 changed files with 317 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
manifest.json
View File

@@ -21,7 +21,8 @@
"OAuth" : {}, "OAuth" : {},
"Payment" : {}, "Payment" : {},
"Share" : {}, "Share" : {},
"SQLite" : {} "SQLite" : {},
"VideoPlayer" : {}
}, },
/* 应用发布信息 */ /* 应用发布信息 */
"distribute" : { "distribute" : {

7
pages.json
View File

@@ -393,6 +393,13 @@
} }
} }
}, },
{
"path": "pages/im/private/call",
"name": "imPrivateCall",
"style": {
"navigationStyle": "custom"
}
},
{ {
"path": "pages/im/private/setting", "path": "pages/im/private/setting",
"name": "imPrivateSetting", "name": "imPrivateSetting",

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

@@ -1,78 +1,76 @@
<template> <template>
<view class="content"> <view class="content">
<!-- 用户信息 --> <!-- 用户信息 -->
<view class="info-flex"> <view class="info-flex">
<u-avatar <u-avatar :src="userInfo.portraitUrl" shape="square" size="50" bg-color="#fff"></u-avatar>
:src="userInfo.portraitUrl" <view class="info-text">
shape="square" <view class="nickname">{{userInfo.name}}</view>
size="50" <view class="address" @longpress="copyAddress">地址：{{userInfo.address}}</view>
bg-color="#fff" </view>
></u-avatar> </view>
<view class="info-text"> <!-- 用户资料 -->
<view class="nickname">{{userInfo.name}}</view> <view class="info-btns">
<view class="address" @longpress="copyAddress">地址：{{userInfo.address}}</view> <view class="item">
</view> <label>性别</label>
</view> <view class="text" v-if="userInfo.gender === 0">保密</view>
<!-- 用户资料 --> <view class="text" v-if="userInfo.gender === 1">男</view>
<view class="info-btns"> <view class="text" v-if="userInfo.gender === 2">女</view>
<view class="item"> </view>
<label>性别</label> </view>
<view class="text" v-if="userInfo.gender === 0">保密</view>
<view class="text" v-if="userInfo.gender === 1">男</view> <block v-if="userInfo.is_friend">
<view class="text" v-if="userInfo.gender === 2">女</view> <view class="info-btns">
</view> <view class="item u-border-bottom" @click="setRemark">
</view> <label>设置备注</label>
<u-icon name="arrow-right" color="#999" size="16"></u-icon>
<block v-if="userInfo.is_friend"> </view>
<view class="info-btns"> <view class="item u-border-bottom" @click="setRemark">
<view class="item" @click="setRemark"> <label>设置标签</label>
<label>设置备注</label> <u-icon name="arrow-right" color="#999" size="16"></u-icon>
<u-icon name="arrow-right" color="#999" size="16"></u-icon> </view>
</view> <view class="item u-border-bottom">
<view class="item" @click="setRemark"> <label>聊天免打扰</label>
<label>设置标签</label> <u-switch size="22" v-model="status" activeColor="#34CE98" @change="setStatus"></u-switch>
<u-icon name="arrow-right" color="#999" size="16"></u-icon> </view>
</view> <view class="item">
<view class="item"> <label>聊天置顶</label>
<label>聊天免打扰</label> <u-switch size="22" v-model="isTop" activeColor="#34CE98" @change="setTop"></u-switch>
<u-switch size="22" v-model="status" activeColor="#34CE98" @change="setStatus"></u-switch> </view>
</view> </view>
<view class="item"> <view class="footer">
<label>聊天置顶</label> <view class="footer-item" @click="deleteFriend">
<u-switch size="22" v-model="isTop" activeColor="#34CE98" @change="setTop"></u-switch> <view class="icon">
</view> <u-icon class="icon-u" name="close-circle-fill" color="#fff" size="26"></u-icon>
</view> </view>
<view class="footer"> <view class="text">删除好友</view>
<view class="footer-item" @click="deleteFriend"> </view>
<view class="icon"> <view class="footer-item" @click="toPrivate">
<u-icon class="icon-u" name="close-circle-fill" color="#fff" size="26"></u-icon> <view class="icon">
</view> <u-icon class="icon-u" name="chat-fill" color="#fff" size="26"></u-icon>
<view class="text">删除好友</view> </view>
</view> <view class="text">发送消息</view>
<view class="footer-item" @click="toPrivate"> </view>
<view class="icon"> <view class="footer-item" @click="callShow = true">
<u-icon class="icon-u" name="chat-fill" color="#fff" size="26"></u-icon> <view class="icon">
</view> <u-icon class="icon-u" name="camera-fill" color="#fff" size="26"></u-icon>
<view class="text">发送消息</view> </view>
</view> <view class="text">视频通话</view>
<view class="footer-item" @click="toPrivate"> </view>
<view class="icon">
<u-icon class="icon-u" name="camera-fill" color="#fff" size="26"></u-icon>
</view>
<view class="text">视频通话</view>
</view>
</view> </view>
</block> </block>
<block v-else> <block v-else>
<view class="footer"> <view class="footer">
<view class="footer-item" @click="toBeFriend"> <view class="footer-item" @click="toBeFriend">
<view class="icon"> <view class="icon">
<u-icon class="icon-u" name="plus-people-fill" color="#fff" size="26"></u-icon> <u-icon class="icon-u" name="plus-people-fill" color="#fff" size="26"></u-icon>
</view> </view>
<view class="text">申请好友</view> <view class="text">申请好友</view>
</view> </view>
</view> </view>
</block> </block>
<u-action-sheet :actions="callActions" cancelText="取消" @close="callShow = false" @select="singleCall"
:show="callShow">
</u-action-sheet>
</view> </view>
</template> </template>
@@ -82,7 +80,8 @@
pedingFriend, pedingFriend,
deleteFriend deleteFriend
} from '@/apis/interfaces/im.js' } from '@/apis/interfaces/im.js'
import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index" import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
export default { export default {
data() { data() {
@@ -92,12 +91,22 @@
status: false, // 0 是免打扰，1是正常通知 status: false, // 0 是免打扰，1是正常通知
isTop: false, isTop: false,
block: false, block: false,
conversationType: 1 conversationType: 1,
callActions: [{
type: 0,
name: '语音通话'
},
{
type: 1,
name: '视频通话'
}
],
callShow: false
} }
}, },
onLoad(e) { onLoad(e) {
this.targetId = e.targetId this.targetId = e.targetId
getFriendInfo(e.targetId).then(res => { getFriendInfo(e.targetId).then(res => {
this.userInfo = res this.userInfo = res
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: res.name title: res.name
@@ -135,9 +144,9 @@
}) })
}, },
setRemark() { setRemark() {
uni.showToast({ uni.showToast({
title: '开发中', title: '开发中',
icon : 'none' icon: 'none'
}) })
}, },
deleteFriend() { deleteFriend() {
@@ -152,11 +161,11 @@
RongIMLib.removeConversation(1, this.targetId) RongIMLib.removeConversation(1, this.targetId)
uni.showToast({ uni.showToast({
icon: 'none', icon: 'none',
title: '好友删除成功', title: '好友删除成功',
success() { success() {
uni.switchTab({ uni.switchTab({
url: '/pages/im/index' url: '/pages/im/index'
}) })
} }
}) })
}) })
@@ -179,9 +188,6 @@
this.isTop = conversation.isTop this.isTop = conversation.isTop
}) })
}) })
},
setBlock() {
}, },
// 申请好友 // 申请好友
toBeFriend() { toBeFriend() {
@@ -197,7 +203,10 @@
duration: 2000 duration: 2000
}) })
}) })
} },
singleCall(e) {
CallLib.startSingleCall(this.targetId, e.type, '');
},
} }
}; };
</script> </script>
@@ -205,98 +214,103 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.content { .content {
min-height: 100vh; min-height: 100vh;
background: $window-color; background: $window-color;
padding-top: $padding; padding-top: $padding;
box-sizing: border-box; box-sizing: border-box;
} }
// 用户信息 // 用户信息
.info-flex{ .info-flex {
padding: $padding; padding: $padding;
margin: 0 $margin; margin: 0 $margin;
display: flex; display: flex;
background: white; background: white;
border-radius: $radius; border-radius: $radius;
.info-text{
width: calc(100% - 50px); .info-text {
padding-left: $padding; width: calc(100% - 50px);
box-sizing: border-box; padding-left: $padding;
.nickname{ box-sizing: border-box;
line-height: 30px;
font-size: $title-size + 6; .nickname {
color: $text-color; line-height: 30px;
text-align: left; font-size: $title-size + 6;
} color: $text-color;
.address{ text-align: left;
line-height: 20px; }
font-size: $title-size-sm;
color: $text-gray; .address {
text-align: left; line-height: 20px;
@extend .nowrap; font-size: $title-size-sm;
} color: $text-gray;
} text-align: left;
} @extend .nowrap;
}
// footer }
.footer{ }
position: fixed;
bottom: 0; // footer
left: 0; .footer {
right: 0; position: fixed;
padding: $padding*2 $padding; bottom: 0;
display: flex; left: 0;
justify-content: space-around; right: 0;
.footer-item{ padding: $padding*2 $padding;
margin: 0 $margin/2; display: flex;
text-align: center; justify-content: space-around;
.icon{
background: $main-color; .footer-item {
width: 88rpx; margin: 0 $margin/2;
height: 88rpx; text-align: center;
line-height: 88rpx;
display: inline-block; .icon {
border-radius: 50%; background: $main-color;
.icon-u{ width: 88rpx;
margin-top: calc((88rpx/2) - 13px); height: 88rpx;
margin-left: calc((88rpx/2) - 13px); line-height: 88rpx;
} display: inline-block;
} border-radius: 50%;
.text{
color: $main-color; .icon-u {
font-size: $title-size-m; margin-top: calc((88rpx/2) - 13px);
text-align: center; margin-left: calc((88rpx/2) - 13px);
padding-top: 10rpx; }
} }
}
} .text {
color: $main-color;
// btns font-size: $title-size-m;
text-align: center;
.info-btns{ padding-top: 10rpx;
background: white; }
margin: $margin; }
border-radius: $radius; }
.item{
line-height: 100rpx; // btns
border-bottom: solid 1rpx $border-color;
display: flex; .info-btns {
align-items: center; background: white;
padding: 0 $padding; margin: $margin;
justify-content: space-between; border-radius: $radius;
font-size: $title-size-lg;
&:last-child{ .item {
border-bottom: none; line-height: 100rpx;
} display: flex;
label{ align-items: center;
width: 200rpx; padding: 0 $padding;
} justify-content: space-between;
.text{ font-size: $title-size-lg;
width: calc(100% - 200rpx);
color: $text-gray-m; label {
text-align: right; width: 200rpx;
@extend .nowrap; }
}
} .text {
} width: calc(100% - 200rpx);
color: $text-gray-m;
text-align: right;
@extend .nowrap;
}
}
}
</style> </style>

60
pages/im/private/call.vue Normal file
View File

@@ -0,0 +1,60 @@
<template>
<view>
<view class="video">
<RongCloud-Call-RCUniCallView style="width: 100%;height: 100%" ref="bigVideoView">
</RongCloud-Call-RCUniCallView>
</view>
<button type="default" @click="accept">接听</button>
<button type="default" @click="hangup">挂断</button>
<button type="default" @click="toHome">回主页</button>
</view>
</template>
<script>
import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
export default {
data() {
return {
targetId: '',
users: []
}
},
onLoad(e) {
this.targetId = e.targetId
},
methods: {
accept() {
CallLib.accept()
CallLib.enableCamera(true, 0)
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()
}, 200);
},
toHome() {
uni.switchTab({
url: '/pages/im/index'
})
}
}
}
</script>
<style lang="scss" scoped>
.video {
width: 100vw;
height: 100vw;
}
</style>

85
utils/im/index.js
View File

@@ -1,4 +1,5 @@
import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index" import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
import store from '@/store/index.js' import store from '@/store/index.js'
import { import {
getFriends, getFriends,
@@ -7,6 +8,7 @@ import {
const initIm = (KEY) => { const initIm = (KEY) => {
RongIMLib.init(KEY) RongIMLib.init(KEY)
CallLib.init()
addListeners() addListeners()
} }
@@ -38,8 +40,8 @@ const setNotifyBadge = () => {
*/ */
const connect = (token, userInfo, callback) => { const connect = (token, userInfo, callback) => {
RongIMLib.connect(token, res => { RongIMLib.connect(token, res => {
console.log('连接结果', res); console.log('连接结果', res);
callback(res) callback(res)
}) })
@@ -58,23 +60,23 @@ const connect = (token, userInfo, callback) => {
const disconnect = () => { const disconnect = () => {
RongIMLib.disconnect() RongIMLib.disconnect()
} }
// 允许通知的消息类型，触发更新消息列表操作 // 允许通知的消息类型，触发更新消息列表操作
const notifyMsgTypes = [ const notifyMsgTypes = [
'RC:TxtMsg', 'RC:TxtMsg',
'RC:VcMsg', 'RC:VcMsg',
'RC:HQVCMsg', 'RC:HQVCMsg',
'RC:ImgMsg', 'RC:ImgMsg',
'RC:GIFMsg', 'RC:GIFMsg',
'RC:ImgTextMsg', 'RC:ImgTextMsg',
'RC:FileMsg', 'RC:FileMsg',
'RC:LBSMsg', 'RC:LBSMsg',
'RC:SightMsg', 'RC:SightMsg',
'RC:ReferenceMsg', 'RC:ReferenceMsg',
'RC:CombineMsg', 'RC:CombineMsg',
] ]
function inArray(search, array) { function inArray(search, array) {
for (var i in array) { for (var i in array) {
if (array[i] == search) { if (array[i] == search) {
@@ -82,22 +84,51 @@ function inArray(search, array) {
} }
} }
return false; return false;
} }
const addListeners = () => { const addListeners = () => {
// 添加连接状态监听函数 // 添加连接状态监听函数
RongIMLib.addConnectionStatusListener((res) => { RongIMLib.addConnectionStatusListener((res) => {
console.log('连接状态监', res.data.status); console.log('连接状态监', res.data.status);
store.dispatch('updateConnectionStatus', res.data.status) store.dispatch('updateConnectionStatus', res.data.status)
}) })
// 添加消息监听函数 // 添加消息监听函数
RongIMLib.addReceiveMessageListener((res) => { RongIMLib.addReceiveMessageListener((res) => {
console.log('收到消息', res.data.message); console.log('收到消息', res.data.message);
const message = res.data.message const message = res.data.message
if (inArray(message.objectName, notifyMsgTypes)) { if (inArray(message.objectName, notifyMsgTypes)) {
newMessage(message) newMessage(message)
} }
}) })
// 监听通话呼入
CallLib.onCallReceived((res) => {
console.log("Engine:OnCallReceived=>" + "监听通话呼入, 目标id=>", res.data.targetId);
console.log('RES', res);
uni.navigateTo({
url: '/pages/im/private/call?targetId=' + res.data.targetId,
success: (err) => {
console.log('跳转视频通话成功');
},
fail: (err) => {
console.log('跳转视频页失败', err);
}
})
})
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)
})
} }
// 维护消息列表 // 维护消息列表
@@ -194,6 +225,6 @@ export default {
connect, connect,
sendMsg, sendMsg,
setNotifyBadge, setNotifyBadge,
syncFriends, syncFriends,
syncUserInfo syncUserInfo
} }