ZhHealth/pages/im/private/call.vue

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