test

pages/im/friends/info.vue

@@ -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('跳转视频通话成功');
                     },

pages/im/index.vue

@@ -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

pages/im/private/call.nvue

@@ -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>
+                <u-avatar :src="userInfo.portraitUrl" shape="square" size="96" bg-color="#fff"></u-avatar>
-                <view class="nickname">{{userInfo.name}}</view>
+                <view><text class="nickname">{{userInfo.name}}</text></view>
-                <view v-if="remoteRinging" class="mediaType">等待对方接听</view>
+                <view v-if="remoteRinging"><text class="mediaType">等待对方接听</text></view>
-                <view v-if="connected" class="mediaType">已接通 {{ connected }}</view>
+                <view v-if="connected"><text class="mediaType">已接通</text></view>
-                <view v-else class="mediaType">{{ mediaType == 0 ? '邀请您语音通话' : '邀请您视频通话' }}</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" v-if="connected" @click="changeMicrophone">
-            <view class="btn hangup" @click="hangup"><text class="white">挂断</text></view>
+                <view class="icon">
-            <view class="btn" v-if="!connected" @click="accept"><text class="white">接听</text></view>
+                    <u-icon name="mic" color="#ffffff" size="30" />
-            <view class="btn" v-if="connected" @click="changeSpeaker"><text class="white">扬声器</text></view>
+                    <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()
             // 监听通话链接状态
-
+            uni.$once('onCallConnected', this.onCallConnected)
-            setTimeout(() => {
+            uni.$once('onCallDisconnected', this.hangup)
-                CallLib.setVideoView(10047, this.$refs.bigVideoView.ref, 0, false)
+            uni.$once('onRemoteUserRinging', () => {
-            }, 200)
-
-            uni.$on('onCallConnected', () => {
-                console.log('OnCallConnected');
-                this.connected = true
-                this.stopRing()
-            })
-            uni.$on('onCallDisconnected', () => {
-                this.hangup()
-            })
-            uni.$on('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.switchTab({
-                    // uni.redirectTo({
+                        url: '/pages/im/index'
-                    //     url: '/pages/im/private/index?targetId=' + this.targetId + '&conversationType=1'
+                    })
-                    // })
+                }, 200);
-                }, 500);
             },
             toHome() {
                 uni.switchTab({
@@ -130,24 +138,24 @@
                 })
             },
             startRing() {
-                const innerAudioContext = uni.createInnerAudioContext()
+                const ring = uni.createInnerAudioContext()
-                this.innerAudioContext = innerAudioContext
+                this.ring = ring
-                innerAudioContext.autoplay = true
+                ring.autoplay = true
-                innerAudioContext.loop = true
+                ring.loop = true
-                innerAudioContext.src = '/static/im/sounds/call-ring.mp3'
+                ring.src = '/static/im/sounds/call-ring.mp3'
-                innerAudioContext.onEnded(() => {
+                ring.onEnded(() => {
-                    innerAudioContext.destroy()
+                    ring.destroy()
                 })
             },
             stopRing() {
-                this.innerAudioContext.stop()
+                this.ring.stop()
             },
             downRing() {
-                const innerAudioContext = uni.createInnerAudioContext()
+                const ding = uni.createInnerAudioContext()
-                innerAudioContext.autoplay = true
+                ding.autoplay = true
-                innerAudioContext.src = '/static/im/sounds/call-down.mp3'
+                ding.src = '/static/im/sounds/call-down.mp3'
-                innerAudioContext.onEnded(() => {
+                ding.onEnded(() => {
-                    innerAudioContext.destroy()
+                    ding.destroy()
                 })
             }
         }
@@ -156,10 +164,10 @@
 
 <style scoped>
     .call-page {
+        display: flex;
         flex: 1;
         flex-direction: column;
         position: relative;
-        background: #666;
     }
 
     .bigVideoView {
@@ -167,6 +175,7 @@
     }
 
     .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>

pages/im/private/index.vue

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

utils/im/index.js

@@ -101,24 +101,21 @@ const addListeners = () => {
         }
     })
     // 监听通话呼入
-    CallLib.onCallReceived((res) => {
+    CallLib.onCallReceived(({
-        console.log("Engine:OnCallReceived=>" + "监听通话呼入, 目标id=>", res.data.targetId);
+        data
-        console.log('RES', res);
+    }) => {
+        console.log('onCallReceived');
         uni.navigateTo({
-            url: '/pages/im/private/call?targetId=' + res.data.targetId + '&mediaType=' +
+            url: '/pages/im/private/call?targetId=' + data.targetId + '&mediaType=' +
-                res.data.mediaType,
+                data.mediaType
-            success: (err) => {
-                console.log('跳转视频通话成功');
-            },
-            fail: (err) => {
-                console.log('跳转视频页失败', err);
-            }
         })
     })
 
-    CallLib.onCallConnected((res) => {
+    // 通话建立成功
+    CallLib.onCallConnected(() => {
         uni.$emit('onCallConnected');
     })
+
     CallLib.onCallOutgoing((res) => {
         uni.$emit('onCallOutgoing');
     })
@@ -129,10 +126,12 @@ const addListeners = () => {
         uni.$emit('onRemoteUserJoined');
     })
     CallLib.onCallDisconnected((res) => {
+        console.log('断开链接', res);
         uni.$emit('onCallDisconnected');
     })
     CallLib.onRemoteUserLeft((res) => {
-        uni.$emit('onCallDisconnected');
+        console.log('远端离开', res);
+        uni.$emit('onRemoteUserLeft');
     })
 }