ZhHealth/pages/im/private/call.nvue

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