Uni-App之实时音视频通话

UNI没有相关api.我们需要引入原生插件TX-TRTCCloud
插件收费10软妹币,可以试用,试用仅支持云打包自定义基座


为要使用的app绑定试用后,在manifest.json中启用


以下是本人项目中使用到的语音通话功能代码

<template>
    <view class="bg">
        <view class="customerImg"></view>
        {{ roomId }}---{{ userName }}
        <view class="fixedBottom">
            <view class="speaker">
                <view class="icon" @click="loudspeaker()"><text class="cuIcon-notification"></text></view>
            </view>
            <view class="">
                <!-- <view v-if="!userIn"  @click="join()" class="icon mainBtn loading-btn"><text class="cuIcon-loading2"></text></view> -->
                <view v-if="userIn" @click="stopAll" class="icon mainBtn rotate"><text class="cuIcon-phone"></text></view>
            </view>
            <view class="">
                <view class="icon"><text class="cuIcon-comment"></text></view>
            </view>
        </view>
    </view>
</template>

<script>
const trtcCloud = uni.requireNativePlugin('TX-TRTCCloud');
export default {
    data() {
        return {
            hisId: null,
            userIn: true,
        };
    },
    computed: {
        roomId() {
                      //通话房间号
            return this.$store.state.user.curInstantID ? this.$store.state.user.curInstantID : 13141516;
        },
        userName() {
                      //我的通话名字,唯一即可。加入房间时会带过去
            return plus.device.uuid;
        },
                //房间中其他用户人数(不含自己)统计这个是为了当房间没有其他用户的时候提示自己
        otherUserSum:{
            get: function () {
                            return this.$store.state.user.otherUserSum
            },
            set: function (v) {
                            this.$store.state.user.otherUserSum=v
            }
        }
    },
    onLoad() {
    
    },
    onReady() {
                //页面打开自动创建通话
        this.join();
    },
    methods: {
        stopAll() {
            console.log('关闭会话')
            trtcCloud.stopLocalAudio();
            trtcCloud.exitRoom();
                uni.navigateBack({
                    delta: 1,
                    animationType: 'pop-out',
                    animationDuration: 200
                });
        },
        join() {
            console.log('join',trtcCloud);
            trtcCloud.startLocalAudio();

            trtcCloud.enterRoom(
                {
                    appId: 1400249380,
                    appKey: 'e1262d907666861cefb431c67a859d9ac0cf369bd9126c4f337116e9571b8073',
                    roomId: this.roomId,
                    userId: this.userName,
                    role: 20,
                    scene: 0
                },
                result => {
                    //3. onUserEnter 收到远程用户加入的消息后初始化对应视图 ,并拿到userid
                    console.log(result);
                    switch (result.type) {
                        //有用用户加入
                        case 'onUserEnter':
                            console.log('用户加入--',result.userId)
                            this.hisId = result.userId;
                            this.$store.commit('SET_OTHERUSERSUM','add')
                            this.userIn = true;
                            console.log(this.otherUserSum,'用户加入--',result.userId)
                            break;
                        case 'onUserExit':
                            this.$store.commit('SET_OTHERUSERSUM','cut')
                            if(this.otherUserSum==0){
                                uni.showModal({
                                    title: '提示',
                                    content: '其他用户已退出房间,是否结束会话',
                                    success: (res)=> {
                                        if (res.confirm) {
                                            this.stopAll()
                                        }
                                    }
                                });
                            }
                            console.log(this.otherUserSum,'用户退出');
                            break;
                    }
                }
            );
        },
        loudspeaker(){
            // let speakerlist = trtcCloud.getSpeakerDevicesList()
            
            console.log('扬声器暂时无法使用',trtcCloud)
        }
    }
};
</script>

<style>
.bg {
    background-image: linear-gradient(to top, #d6cdf5 0%, #6950bd 100%);
    /* height: calc(100vh - 44px); */
    height: 100vh;
    padding-top: 80rpx;
}
.customerImg {
    border-radius: 50%;
    height: 130rpx;
    width: 130rpx;
    margin: 0 auto;
    background: url(../static/HM-chat/img/customer.png) center center no-repeat;
}
.fixedBottom {
    width: 100%;
    position: fixed;
    z-index: 10;
    /* bottom: 84rpx; */
    bottom: 0;
    padding-bottom: 84rpx;
    display: flex;
    justify-content: space-around;
    background: none;
}
.icon {
    font-size: 80rpx;
    color: #ffffff;
}
.mainBtn {
    height: 140rpx;
    width: 140rpx;
    background: red;
    border-radius: 50%;
    text-align: center;
    line-height: 140rpx;
}
.rotate {
    transform: rotate(-126deg);
}
.loading-btn {
    animation: rotate 1.5s infinite linear;
}
@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}
</style>

其他功能看插件描述,根据自身需求调用即可

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 221,695评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,569评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 168,130评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,648评论 1 297
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,655评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,268评论 1 309
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,835评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,740评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,286评论 1 318
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,375评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,505评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,185评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,873评论 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,357评论 0 24
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,466评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,921评论 3 376
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,515评论 2 359

推荐阅读更多精彩内容