uniapp 声网保姆级接入教程 语音通话1对1

<template>
    <view class="container">
        <view class="top">
            <!-- <input class="input" placeholder="Channel ID" @input="replaceInput" v-model="channelId" /> -->
            <button type="primary" @click="isJoined ? leaveChannel() : joinChannel()">{{`${isJoined ? '离开' : '加入'} 房间`}}</button>
        </view>
        <view class="float">
            <!-- 打开麦克风 -->
            <button type="primary" @click="switchMicrophone">{{`麦克风 ${openMicrophone ? '开启' : '关闭'}`}}</button>
            <!-- 启用扬声器 -->
            <button type="primary" @click="switchSpeakerphone">{{enableSpeakerphone ? '开启扬声器' : '关闭扬声器'}}</button>
        </view>
    </view>
</template>

<script>
    import config from '@/common/agora.config';
    import permision from "@/js_sdk/wa-permission/permission";

    import RtcEngine, {
        RtcChannel
    } from '../../../components/Agora-RTC-JS/index.js';
    import {
        ClientRole,
        ChannelProfile
    } from "../../../components/Agora-RTC-JS/common/Enums.js";
    export default {
        data() {
            return {
                // 存储 RTC 引擎对象
                engine: undefined,
                // 初始频道 ID
                channelId: config.channelId,
                // 是否已加入频道的标志位
                isJoined: false,
                // 是否打开麦克风的标志位
                openMicrophone: true,
                // 是否启用扬声器的标志位
                enableSpeakerphone: true,
                userRtcToken:'',
            }
        },
        onLoad() {
            // 页面加载时触发的事件
            console.log('onLoad');
            // 初始化引擎
            this.initEngine();
        },
        onBackPress() {
            // 点击返回按钮时触发的事件
            console.log('onBackPress');
            // 销毁引擎
            this.engine && this.engine.destroy();
        },
        methods: {
            getRtcUserToken() {
              const channelName = "htj";
              const url = ``; //后端copy
              uni.request({
                url: url,
                method: 'GET',
                success: (res) => {
                  this.userRtcToken = res.data;
                  console.log(res.data);
                },
              });
            },
             // 初始化引擎
                async initEngine() {
                    // 创建 RTC 引擎,并存储到 this.engine 变量中
                    this.engine = await RtcEngine.create(config.appId);
                    // 添加事件监听器
                    this.addListeners();
            
                    // 启用音频功能
                    await this.engine.enableAudio();
                    // 设置频道模式为直播模式
                    await this.engine.setChannelProfile(ChannelProfile.LiveBroadcasting);
                    // 设置客户端角色为主播
                    await this.engine.setClientRole(ClientRole.Broadcaster);
                },
                // 添加事件监听器
                addListeners() {
                    // 监听加入频道成功事件
                    this.engine.addListener('JoinChannelSuccess', (channel, uid, elapsed) => {
                        console.info('JoinChannelSuccess', channel, uid, elapsed);
                        this.isJoined = true;
                    });
                    // 监听离开频道事件
                    this.engine.addListener('LeaveChannel', (stats) => {
                        console.info('LeaveChannel', stats);
                        this.isJoined = false;
                    });
                },
                // 加入频道
                async joinChannel() {
                     let ChannelUid = Date.now();
                    // 如果是安卓平台,请求录音权限
                    if (uni.getSystemInfoSync().platform === 'android') {
                        await permision.requestAndroidPermission('android.permission.RECORD_AUDIO');
                    }
            
                    // 加入频道
                    await this.engine.joinChannel(
                        userRtcToken,
                        this.channelId,
                        null,
                        ChannelUid
                    );
                },
                // 离开频道
                async leaveChannel() {
                    // 离开频道
                    await this.engine && this.engine.leaveChannel();
                },
                // 切换麦克风状态
                switchMicrophone() {
                    this.engine &&
                        this.engine.enableLocalAudio(!this.openMicrophone)
                        .then(() => {
                            this.openMicrophone = !this.openMicrophone;
                        })
                        .catch((err) => {
                            console.warn('enableLocalAudio', err);
                        });
                },
                // 切换扬声器状态
                switchSpeakerphone() {
                    this.engine &&
                        this.engine.setEnableSpeakerphone(!this.enableSpeakerphone)
                        .then(() => {
                            this.enableSpeakerphone = !this.enableSpeakerphone;
                        })
                        .catch((err) => {
                            console.warn('setEnableSpeakerphone', err);
                        });
                },
                // 替换频道输入
                replaceInput(event) {
                    this.channelId = event.detail.value;
                }
        }
    }
</script>

<style>
    .container {
        flex: 1;
    }

    .float {
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .top {
        /* width: 100%; */
    }

    .input {
        borderColor: gray;
        borderWidth: 1;
    }
</style>
注意要  nvue 页面

  • 9
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值