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