简单的视频通讯

pages/im/friends/group/index.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <u-button @click="toIndex">会首页</u-button>
+    </div>
+</template>
+
+<script>
+    export default {
+        methods: {
+            toIndex() {
+                uni.switchTab({
+                    url: '/pages/im/index'
+                })
+            }
+        }
+    }
+</script>
+
+<style>
+</style>

pages/im/friends/info.vue

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

pages/im/group/index.vue

@@ -1,19 +1,10 @@
 <template>
-    <div>
+    <view class="">
-        <u-button @click="toIndex">会首页</u-button>
+        
-    </div>
+    </view>
 </template>
 
 <script>
-    export default {
-        methods: {
-            toIndex() {
-                uni.switchTab({
-                    url: '/pages/im/index'
-                })
-            }
-        }
-    }
 </script>
 
 <style>

pages/im/private/call.nvue

@@ -0,0 +1,219 @@
+<template>
+    <view class="call-page">
+        <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>
+        </view>
+
+        <view class="status" v-if="!connected">
+            <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>
+            </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>
+    </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: '',
+                mediaType: 0, // 0 语音  1 视频
+                users: [],
+                userInfo: {},
+                isOut: false,
+                connected: false,
+                micStatus: false,
+                speStatus: false,
+                remoteRinging: false,
+                innerAudioContext: null
+            }
+        },
+        onLoad(e) {
+            this.targetId = e.targetId || 10051
+            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', () => {
+                this.remoteRinging = true
+            })
+            uni.$on('onRemoteUserJoined', () => {
+                this.remoteRinging = false
+            })
+        },
+        beforeDestroy() {
+            uni.$off('onCallConnected')
+            uni.$off('onCallDisconnected')
+            uni.$off('onRemoteUserRinging')
+            uni.$off('onRemoteUserJoined')
+        },
+        computed: {
+            windowWidth() {
+                return uni.getSystemInfoSync().windowWidth
+            },
+            windowHeight() {
+                return uni.getSystemInfoSync().windowHeight
+            }
+        },
+        methods: {
+            changeMicrophone() {
+                CallLib.enableMicrophone(this.micStatus)
+                this.micStatus = !this.micStatus
+            },
+            changeSpeaker() {
+                CallLib.enableSpeaker(this.speStatus)
+                this.speStatus = !this.speStatus
+            },
+            accept() {
+                CallLib.accept()
+                // 视频通话，才开摄像头
+                if (this.mediaType == 1) {
+                    const session = CallLib.getCurrentCallSession()
+                    this.users = session.users
+                    setTimeout(() => {
+                        CallLib.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0,
+                            false)
+                        CallLib.setVideoView(session.mine.userId, this.$refs.smallVideoView.ref, 0,
+                            true)
+                    }, 200)
+                }
+            },
+            hangup() {
+                CallLib.hangup()
+                this.stopRing()
+
+                setTimeout(() => {
+                    this.downRing()
+                    uni.navigateBack()
+                    // uni.redirectTo({
+                    //     url: '/pages/im/private/index?targetId=' + this.targetId + '&conversationType=1'
+                    // })
+                }, 500);
+            },
+            toHome() {
+                uni.switchTab({
+                    url: '/pages/im/index'
+                })
+            },
+            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()
+                })
+            },
+            stopRing() {
+                this.innerAudioContext.stop()
+            },
+            downRing() {
+                const innerAudioContext = uni.createInnerAudioContext()
+                innerAudioContext.autoplay = true
+                innerAudioContext.src = '/static/im/sounds/call-down.mp3'
+                innerAudioContext.onEnded(() => {
+                    innerAudioContext.destroy()
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .call-page {
+        flex: 1;
+        flex-direction: column;
+        position: relative;
+        background: #666;
+    }
+
+    .bigVideoView {
+        background: #000;
+    }
+
+    .smallVideoView {
+        position: absolute;
+        right: 100rpx;
+        top: 100rpx;
+        width: 180rpx;
+        height: 320rpx;
+    }
+
+    .buttons {
+        position: fixed;
+        bottom: 100rpx;
+        width: 750rpx;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+    }
+
+    .btn {
+        background: #34CE98;
+        width: 132rpx;
+        height: 132rpx;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .btn .white {
+        color: #FFFFFF;
+        font-size: 32rpx;
+    }
+
+    .btn.hangup {
+        background: #dd524d;
+    }
+
+    .call-user {
+        flex: 1;
+        position: fixed;
+        width: 750rpx;
+        top: 200rpx;
+        left: 0;
+        display: flex;
+        align-items: center;
+    }
+
+    .nickname {
+        margin: 30rpx;
+        font-size: 40rpx;
+    }
+</style>

pages/im/private/call.vue

@@ -1,182 +0,0 @@
-<template>
-    <view>
-        <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>
-
-            <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: '',
-                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()
-                // 视频通话，才开摄像头
-                if (this.mediaType == 1) {
-                    const currentCallSession = CallLib.getCurrentCallSession()
-                    this.users = currentCallSession.users
-                    setTimeout(() => {
-                        CallLib.setVideoView(currentCallSession.mine.userId, 'bigVideoView', 0, true)
-                    }, 500);
-                }
-            },
-            hangup() {
-                CallLib.hangup()
-
-                setTimeout(() => {
-                    uni.redirectTo({
-                        url: '/pages/im/private/index?targetId=' + this.targetId + '&conversationType=1'
-                    })
-                }, 200);
-            },
-            toHome() {
-                uni.switchTab({
-                    url: '/pages/im/index'
-                })
-            }
-        }
-    }
-</script>
-
-<style lang="scss" scoped>
-    .video {
-        width: 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>

pages/im/private/index.vue

@@ -10,16 +10,19 @@
                         <view class="chat-msg-text">{{ item.content.content }}</view>
                         <!-- 语音消息 -->
                         <view class="chat-msg-audio" @click="onPlayMsg()">
-                            <image v-if="item.messageDirection == 0" src="@/static/icon/audio_ green.png" mode="widthFix"></image>
+                            <image v-if="item.messageDirection == 0" src="@/static/icon/audio_ green.png"
+                                mode="widthFix"></image>
                             10"
-                            <image v-if="item.messageDirection == 1" src="@/static/icon/audio_white.png" mode="widthFix"></image>
+                            <image v-if="item.messageDirection == 1" src="@/static/icon/audio_white.png"
+                                mode="widthFix"></image>
                         </view>
                         <!-- 预留一些图片，语音表情包等位置 -->
                     </view>
                     <view class="chat-status" :class="{'hide': item.sentStatus == 50}"
                         v-if="item.messageDirection == 1">{{targetId}}{{ item.sentStatus == 50 ? '已读': '未读'}}</view>
                     <view class="chat-avatar" @click="showFriend(targetId, item.messageDirection)">
-                        <u-avatar v-if="item.messageDirection == 2" shape="square" bg-color="#ffffff" :src="userInfo.portraitUrl"></u-avatar>
+                        <u-avatar v-if="item.messageDirection == 2" shape="square" bg-color="#ffffff"
+                            :src="userInfo.portraitUrl"></u-avatar>
                         <u-avatar v-else shape="square" bg-color="#ffffff" :src="$store.getters.sender.portraitUrl" />
                     </view>
                 </view>
@@ -35,10 +38,12 @@
                 <image src="@/static/icon/msg-icon.png" v-if="importTabs === 1" mode="widthFix"></image>
             </view>
             <block v-if="importTabs === 0">
-                <button type="default" class="chat-mp3" hover-class="chat-hover" @touchstart="startAudio" @touchend="chendAudio">按住 说话</button>
+                <button type="default" class="chat-mp3" hover-class="chat-hover" @touchstart="startAudio"
+                    @touchend="chendAudio">按住 说话</button>
             </block>
             <block v-if="importTabs === 1">
-                <input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send" cursor-spacing="10" />
+                <input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send"
+                    cursor-spacing="10" />
             </block>
             <button class="chat-push" :disabled="disabled" size="mini" @click="send">发送</button>
         </view>
@@ -104,9 +109,10 @@
             this.getMessageList()
 
             // 监听消息回执
-            RongIMLib.addReadReceiptReceivedListener((result) => {
+            RongIMLib.addReadReceiptReceivedListener(({
-                const res = result.data.message
+                data
-                if (res.targetId == this.targetId) {
+            }) => {
+                if (data.targetId == this.targetId) {
                     this.getMessageList()
                 }
             })
@@ -256,7 +262,9 @@
             showFriend(targetId, type) {
                 this.$Router.push({
                     name: type === 1 ? 'imFriendsMine' : 'imFriendsInfo',
-                    params: {targetId}
+                    params: {
+                        targetId
+                    }
                 })
             },
             scrollBottom() {
@@ -303,10 +311,12 @@
             flex-direction: column;
             align-items: center;
             justify-content: center;
+
             image {
                 width: 88rpx;
                 height: 88rpx;
             }
+
             .text {
                 font-size: $title-size-m;
             }
@@ -341,6 +351,7 @@
 
                     .chat-msg {
                         overflow: hidden;
+
                         .chat-msg-text {
                             display: inline-block;
                             padding: ($padding - 10) $padding;
@@ -348,9 +359,11 @@
                             box-sizing: border-box;
                             font-size: $title-size-lg;
                         }
+
                         .chat-msg-audio {
                             @extend .chat-msg-text;
                             width: 50%;
+
                             image {
                                 width: 38rpx;
                                 height: 38rpx;
@@ -381,6 +394,7 @@
                         .chat-avatar {
                             left: $margin;
                         }
+
                         .chat-msg {
                             .chat-msg-text {
                                 background-color: white;
@@ -396,6 +410,7 @@
 
                         .chat-msg {
                             text-align: right;
+
                             .chat-msg-text {
                                 border-radius: $radius*2 0 $radius*2 $radius*2;
                                 background: $main-color;
@@ -417,11 +432,13 @@
             background: white;
             box-sizing: border-box;
             z-index: 99;
+
             .msg-type {
                 position: absolute;
                 top: 20rpx;
                 left: $padding;
                 line-height: 80rpx;
+
                 image {
                     width: 64rpx;
                     height: 64rpx;
@@ -429,6 +446,7 @@
                     margin-bottom: 10rpx;
                 }
             }
+
             .chat-input {
                 background: $window-color;
                 height: 80rpx;
@@ -446,6 +464,7 @@
                 font-weight: bold;
                 color: #333;
                 font-size: $title-size-m;
+
                 &::after {
                     display: none;
                 }

router/index.js

@@ -1,6 +1,18 @@
-import { RouterMount, createRouter } from 'uni-simple-router';
+import {
+    RouterMount,
+    createRouter
+} from 'uni-simple-router';
 import store from '@/store/index'
 
+// #ifdef APP-NVUE
+// CALL 页面，必须是nvue，但是NVUE 不支持webpack的 ROUTES 注入
+// https://github.com/SilurianYang/uni-read-pages/issues/20
+const ROUTES = [{
+    'path': '/pages/im/private/call',
+    'name': 'imPrivateCall'
+}]
+// #endif
+
 const router = createRouter({
     platform: process.env.VUE_APP_PLATFORM,
     routes: [...ROUTES]

utils/im/index.js

@@ -115,6 +115,25 @@ const addListeners = () => {
             }
         })
     })
+    
+    CallLib.onCallConnected((res) => {
+        uni.$emit('onCallConnected');
+    })
+    CallLib.onCallOutgoing((res) => {
+        uni.$emit('onCallOutgoing');
+    })
+    CallLib.onRemoteUserRinging((res) => {
+        uni.$emit('onRemoteUserRinging');
+    })
+    CallLib.onRemoteUserJoined((res) => {
+        uni.$emit('onRemoteUserJoined');
+    })
+    CallLib.onCallDisconnected((res) => {
+        uni.$emit('onCallDisconnected');
+    })
+    CallLib.onRemoteUserLeft((res) => {
+        uni.$emit('onCallDisconnected');
+    })
 }
 
 // 维护消息列表
@@ -152,7 +171,7 @@ const triTone = () => {
     if (tipState == false) {
         const innerAudioContext = uni.createInnerAudioContext()
         innerAudioContext.autoplay = true
-        innerAudioContext.src = '/static/tri-tone.mp3'
+        innerAudioContext.src = '/utils/im/sounds/new-msg.mp3'
         innerAudioContext.onPlay(() => {
             tipState = true
         })