一人多频道、观众主播秒切换react-native-agora多频道加入与角色切换实战教程【免费下载链接】react-native-agoraReact Native around the Agora RTC SDKs for Android and iOS agora项目地址: https://gitcode.com/gh_mirrors/re/react-native-agorareact-native-agora 是 Agora RTC SDK 的 React Native 官方封装让跨平台 App 轻松实现实时音视频通话与直播。本教程带你用joinChannelEx实现一人同时加入多个频道并用setClientRole实现观众/主播角色秒切换完整覆盖跨房间连麦、多房间推流的进阶场景。上图是项目自带示例应用APIExample的演示菜单Advanced 分组中就能看到本教程的主角JoinMultipleChannel一人多频道演示。为什么要用多频道与角色切换在真实的直播业务里你经常会遇到这些需求跨房间连麦/一人多推同一个主播的画面同时出现在多个直播间观众主播秒切换普通观众临时上麦变主播播完又能变回观众频道间流切换主播在 A 房开播随时把流搬到 B 房。react-native-agora 基于IRtcEngineEx扩展引擎提供多频道 APIjoinChannelEx/leaveChannelEx/updateChannelMediaOptionsEx配合ClientRoleType角色体系上述场景都能用几行代码搞定。快速环境准备5分钟跑通示例获取一个 Agora App ID注册控制台后创建项目即可填入示例配置 examples/expo/src/config/agora.config.ts在示例目录安装依赖并运行Expo 版cd examples/expo yarn npx expo start多频道演示代码位于Class 版examples/expo/app/examples/advanced/JoinMultipleChannel/JoinMultipleChannel.tsxHook 版更简洁的函数式写法examples/expo/app/examples/hook/JoinMultipleChannel/JoinMultipleChannel.tsx想直接克隆完整源码体验git clone https://gitcode.com/gh_mirrors/re/react-native-agora一步一频道一人加入两个频道的完整流程整个流程分 5 步官方示例的注释把每一步都标得清清楚楚见示例源码中Step 1~Step 5的注释。第1步初始化引擎开启直播模式this.engine createAgoraRtcEngine() as IRtcEngineEx; this.engine.initialize({ appId, channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting, // 关键 }); this.engine.enableVideo(); this.engine.startPreview(); // 必须在加入频道前调用⚠️ 直播/连麦场景务必把频道模式设为ChannelProfileLiveBroadcasting否则角色切换不生效。第2步joinChannelEx 加入频道1和频道2每个频道用独立的RtcConnectionchannelIdlocalUid标识两次调用即可分身进两个房间this.engine?.joinChannelEx(token, { channelId, localUid: uid }, // 频道1 { clientRoleType: ClientRoleType.ClientRoleBroadcaster, publishMicrophoneTrack: false, // 先进入但不推流 publishCameraTrack: false, } ); // joinChannelEx(token2, { channelId: channelId2, localUid: uid2 }, ...) 同理加入频道2 小技巧入会时先把推流开关设为false后面用流开关做频道间切换画面不会中断。第3步updateChannelMediaOptionsEx 一键切换推流目标这是主播换房的核心——关闭 A 房推流、打开 B 房推流本地画面瞬间切换目的地this.engine?.updateChannelMediaOptionsEx( { publishMicrophoneTrack: false, publishCameraTrack: false }, { channelId: channelId2, localUid: uid2 } // 停 B 房 ); this.engine?.updateChannelMediaOptionsEx( { publishMicrophoneTrack: true, publishCameraTrack: true }, { channelId, localUid: uid } // 开 A 房 );第4、5步离开单频道、释放引擎this.engine?.leaveChannelEx({ channelId, localUid: uid }); // 只离开一个频道 this.engine?.release(); // 页面销毁时释放注意leaveChannelEx只断开指定的那一路连接另一个频道不受影响——这正是多频道 API 相比leaveChannel全部退出的价值所在。观众主播秒切换setClientRole 实战react-native-agora 用 src/AgoraBase.ts 中的ClientRoleType枚举定义两种角色角色说明ClientRoleAudience观众默认只能收流不能推流节省带宽ClientRoleBroadcaster主播可推流 收流观众秒变主播engine.setClientRole(ClientRoleType.ClientRoleBroadcaster); // 立即上麦 engine.setClientRole(ClientRoleType.ClientRoleAudience); // 下麦变回观众主播秒变观众切回 Audience 后不能再推流如果只是想在隔壁房低延迟看自己/连麦画面入会时设置isInteractiveAudience: true开启互动观众模式即可。切换后 SDK 会触发onClientRoleChanged(connection, oldRole, newRole)回调建议监听它来更新 UI 状态比如上麦/下麦按钮。接口定义见 src/IAgoraRtcEngine.ts多频道扩展接口见 src/IAgoraRtcEngineEx.ts。避坑清单6个高频问题一次说清uid 必须大于 0且同一频道内不能重复不同频道可用同一个 uid但跨设备加入同一频道时 uid 必须不同开启 App Certificate 后必须带 Token入会多频道/频繁切换场景推荐申请Wildcard Token避免每次换房都向服务器要新 Token所有事件回调都带RtcConnection处理onUserJoined、onRemoteVideoStateChanged等事件时要先用connection.channelId localUid判断这是哪个频道的事件再更新对应房间的状态示例中remoteUsers/remoteUsers2就是这么分的渲染视频要带频道上下文RtcSurfaceView组件传入connection{{ channelId, localUid }}两个房间的窗口才能正确区分观众不能推流如果切回 Audience 后想再上麦必须先setClientRole(Broadcaster)入会前完成预览startPreview要在joinChannelEx之前调用否则本地画面可能黑屏离会后可再次startPreview保持预览。核心文件导航想了解的内容看这里多频道完整示例Classexamples/expo/app/examples/advanced/JoinMultipleChannel/JoinMultipleChannel.tsx多频道 Hook 版示例examples/expo/app/examples/hook/JoinMultipleChannel/JoinMultipleChannel.tsxjoinChannelEx等多频道接口src/IAgoraRtcEngineEx.tssetClientRole、ChannelMediaOptionssrc/IAgoraRtcEngine.tsClientRoleType角色枚举src/AgoraBase.ts跨频道合流进阶玩法examples/expo/app/examples/advanced/ChannelMediaRelay/ChannelMediaRelay.tsx写在最后掌握joinChannelExupdateChannelMediaOptionsExsetClientRole这三把钥匙react-native-agora 就能帮你轻松实现一人多频道、观众主播秒切换的直播玩法。下一步不妨试试 ChannelMediaRelay 跨频道合流把多个房间的画面合成一路输出玩法更多【免费下载链接】react-native-agoraReact Native around the Agora RTC SDKs for Android and iOS agora项目地址: https://gitcode.com/gh_mirrors/re/react-native-agora创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
