音频通话，测试

2022-01-26 17:43:21 +08:00
parent 4d5d595329
commit 07d20fb107
5 changed files with 317 additions and 204 deletions
--- a/manifest.json
+++ b/manifest.json
@@ -21,7 +21,8 @@
            "OAuth" : {},
            "Payment" : {},
            "Share" : {},
-            "SQLite" : {}
+            "SQLite" : {},
+            "VideoPlayer" : {}
        },
        /* 应用发布信息 */
        "distribute" : {
--- a/pages.json
+++ b/pages.json
@@ -393,6 +393,13 @@
                }
            }
        },
+        {
+            "path": "pages/im/private/call",
+            "name": "imPrivateCall",
+            "style": {
+                "navigationStyle": "custom"
+            }
+        },
        {
            "path": "pages/im/private/setting",
            "name": "imPrivateSetting",
--- a/pages/im/friends/info.vue
+++ b/pages/im/friends/info.vue
@@ -2,12 +2,7 @@
    <view class="content">
        <!-- 用户信息 -->
        <view class="info-flex">
-            <u-avatar
-                :src="userInfo.portraitUrl"
-                shape="square"
-                size="50"
-                bg-color="#fff"
-            ></u-avatar>
+            <u-avatar :src="userInfo.portraitUrl" shape="square" size="50" bg-color="#fff"></u-avatar>
            <view class="info-text">
                <view class="nickname">{{userInfo.name}}</view>
                <view class="address" @longpress="copyAddress">地址：{{userInfo.address}}</view>
@@ -25,15 +20,15 @@

        <block v-if="userInfo.is_friend">
            <view class="info-btns">
-                <view class="item" @click="setRemark">
+                <view class="item u-border-bottom" @click="setRemark">
                    <label>设置备注</label>
                    <u-icon name="arrow-right" color="#999" size="16"></u-icon>
                </view>
-                <view class="item" @click="setRemark">
+                <view class="item u-border-bottom" @click="setRemark">
                    <label>设置标签</label>
                    <u-icon name="arrow-right" color="#999" size="16"></u-icon>
                </view>
-                <view class="item">
+                <view class="item u-border-bottom">
                    <label>聊天免打扰</label>
                    <u-switch size="22" v-model="status" activeColor="#34CE98" @change="setStatus"></u-switch>
                </view>
@@ -55,7 +50,7 @@
                    </view>
                    <view class="text">发送消息</view>
                </view>
-                <view class="footer-item" @click="toPrivate">
+                <view class="footer-item" @click="callShow = true">
                    <view class="icon">
                        <u-icon class="icon-u" name="camera-fill" color="#fff" size="26"></u-icon>
                    </view>
@@ -73,6 +68,9 @@
                </view>
            </view>
        </block>
+        <u-action-sheet :actions="callActions" cancelText="取消" @close="callShow = false" @select="singleCall"
+            :show="callShow">
+        </u-action-sheet>
    </view>
 </template>

@@ -82,7 +80,8 @@
        pedingFriend,
        deleteFriend
    } 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 {
        data() {
@@ -92,7 +91,17 @@
                status: false, // 0 是免打扰，1是正常通知
                isTop: false,
                block: false,
-                conversationType: 1
+                conversationType: 1,
+                callActions: [{
+                        type: 0,
+                        name: '语音通话'
+                    },
+                    {
+                        type: 1,
+                        name: '视频通话'
+                    }
+                ],
+                callShow: false
            }
        },
        onLoad(e) {
@@ -137,7 +146,7 @@
            setRemark() {
                uni.showToast({
                    title: '开发中',
-                    icon : 'none'
+                    icon: 'none'
                })
            },
            deleteFriend() {
@@ -179,9 +188,6 @@
                        this.isTop = conversation.isTop
                    })
                })
-            },
-            setBlock() {
-
            },
            // 申请好友
            toBeFriend() {
@@ -197,7 +203,10 @@
                        duration: 2000
                    })
                })
-            }
+            },
+            singleCall(e) {
+                CallLib.startSingleCall(this.targetId, e.type, '');
+            },
        }
    };
 </script>
@@ -211,23 +220,26 @@
    }

    // 用户信息
-    .info-flex{
+    .info-flex {
        padding: $padding;
        margin: 0 $margin;
        display: flex;
        background: white;
        border-radius: $radius;
-        .info-text{
+
+        .info-text {
            width: calc(100% - 50px);
            padding-left: $padding;
            box-sizing: border-box;
-            .nickname{
+
+            .nickname {
                line-height: 30px;
                font-size: $title-size + 6;
                color: $text-color;
                text-align: left;
            }
-            .address{
+
+            .address {
                line-height: 20px;
                font-size: $title-size-sm;
                color: $text-gray;
@@ -238,7 +250,7 @@
    }

    // footer
-    .footer{
+    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
@@ -246,22 +258,26 @@
        padding: $padding*2 $padding;
        display: flex;
        justify-content: space-around;
-        .footer-item{
+
+        .footer-item {
            margin: 0 $margin/2;
            text-align: center;
-            .icon{
+
+            .icon {
                background: $main-color;
                width: 88rpx;
                height: 88rpx;
                line-height: 88rpx;
                display: inline-block;
                border-radius: 50%;
-                .icon-u{
+
+                .icon-u {
                    margin-top: calc((88rpx/2) - 13px);
                    margin-left: calc((88rpx/2) - 13px);
                }
            }
-            .text{
+
+            .text {
                color: $main-color;
                font-size: $title-size-m;
                text-align: center;
@@ -272,25 +288,24 @@

    // btns

-    .info-btns{
+    .info-btns {
        background: white;
        margin: $margin;
        border-radius: $radius;
-        .item{
+
+        .item {
            line-height: 100rpx;
-            border-bottom: solid 1rpx $border-color;
            display: flex;
            align-items: center;
            padding: 0 $padding;
            justify-content: space-between;
            font-size: $title-size-lg;
-            &:last-child{
-                border-bottom: none;
-            }
-            label{
+
+            label {
                width: 200rpx;
            }
-            .text{
+
+            .text {
                width: calc(100% - 200rpx);
                color: $text-gray-m;
                text-align: right;
@@ -298,5 +313,4 @@
            }
        }
    }
-    
 </style>
--- a/pages/im/private/call.vue
+++ b/pages/im/private/call.vue
@@ -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>
--- a/utils/im/index.js
+++ b/utils/im/index.js
@@ -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 {
    getFriends,
@@ -7,6 +8,7 @@ import {

 const initIm = (KEY) => {
    RongIMLib.init(KEY)
+    CallLib.init()
    addListeners()
 }

@@ -98,6 +100,35 @@ const addListeners = () => {
            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)
+    })
 }

 // 维护消息列表