LiveCoreView,快速构建一个包含主播开播和观众观看功能的基础直播 App。LiveCoreView 是一个专为直播场景设计的轻量级 UI 组件,是您构建直播场景的核心,它封装了所有复杂的底层直播技术(例如推拉流、连麦、音视频渲染)。您可以将 LiveCoreView 作为直播画面的“画布”,专注于上层 UI 与交互的开发。LiveCoreView 在直播界面中的位置和作用:
# 1. 安装直播核心及原生构建工具 (必选)npx expo install react-native-tuikit-atomic-x expo-dev-client expo-build-properties#2. 安装 UI 适配与工具库 (建议)npx expo install react-native-safe-area-context react-native-toast-message react-native-localize
app.json 文件,配置直播需要用到的系统权限(相机、麦克风,后台音频),您可以这样配置:{"expo": {"name": "ExpoLive","slug": "ExpoLive",// ... Other Configurations"ios": {// ... Other Configurations"bundleIdentifier": "com.anonymous.ExpoLive","infoPlist": {"NSMicrophoneUsageDescription": "This app requires access to your microphone for live streaming.","NSCameraUsageDescription": "This app requires access to your camera for live streaming.","UIBackgroundModes": ["audio"]}},"plugins": ["react-native-localize",["expo-build-properties",{"ios": {"useFrameworks": "static"}}]]}}
AtomicXCore,必须在工程根目录下重新编译一次原生应用,把这些新的 C++/Java/Swift 代码打包进去;仅在首次集成或更新 SDK 版本时需要执行此步,日常开发只需执行步骤 4。# 本地已有 Android 和 iOS 的开发环境,则执行npx expo run:ios # 确保已安装 CocoaPodsnpx expo run:android# 或者使用云打包重新生成开发版的安装包npx eas build --profile development --platform all
npx expo start
LoginState 中的 login 方法完成登录,这是使用 AtomicXCore 所有功能的关键前提。import { useLoginState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LoginState';const { login } = useLoginState();const handleLogin = () => {login({sdkAppID: 1400000001, // 替换为您的 SDKAppIDuserID: "test_001", // 替换为您的 UserIDuserSig: "xxxxxxxxxx" // 替换为您的 UserSig});}
参数 | 类型 | 说明 |
SDKAppID | Int | |
UserID | String | 当前用户的唯一 ID,仅包含英文字母、数字、连字符和下划线。 |
userSig | String | 用于腾讯云鉴权的票据。请注意: 开发环境:您可以采用本地 GenerateTestUserSig.genTestSig 函数生成 UserSig 或者通过 UserSig 辅助工具 生成临时的 UserSig。生产环境:为了防止密钥泄露,请务必采用服务端生成 UserSig 的方式。详细信息请参见 服务端生成 UserSig。 |

LiveCoreView 组件,将 coreViewType 指定为 pushView(推流视图), 并且为组件绑定当前直播 ID。import { LiveCoreView } from 'react-native-tuikit-atomic-x/lib/module/components/LiveCoreView';export default function YourAnchorScreen({ route, navigation }) {// 定义直播房 ID(需要与后续 createLive 中使用的 liveID 保持一致)// liveID 由开发者自定义,建议使用唯一标识符(例如 UUID 或时间戳组合)// 格式要求:仅支持英文字母、数字、下划线,长度不超过 64 个字符const liveID = 'your_live_room_id'; // 替换为您的视频直播间的 IDreturn (<View style={styles.container}><LiveCoreView liveId={liveID} coreViewType="pushView" style={styles.pushView} /></View>);}
DeviceState 的 openLocalCamera、openLocalMicrophone 接口打开摄像头和麦克风,您无需做额外操作,LiveCoreView 会自动预览当前摄像头的视频流,示例代码如下:import { useEffect } from 'react';import { useDeviceState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/DeviceState';const { openLocalCamera, openLocalMicrophone } = useDeviceState();useEffect(() => {openLocalMicrophone({onSuccess: () => { console.log('麦克风打开成功'); },onError: (error) => { console.log('麦克风打开失败', error); },});openLocalCamera({isFront: true,onSuccess: () => { console.log('摄像头打开成功'); },onError: (error) => { console.log('摄像头打开失败', error); },});}, []);
LiveListState 的 createLive 接口开始视频直播,完整示例代码如下:import { useLiveListState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveListState';const { createLive } = useLiveListState();const startLive = () => {createLive({liveInfo: {liveID: liveID, // 设置直播的房间 idliveName: 'live name', // 设置直播的房间名称seatLayoutTemplateID: 600, // 配置布局模板,默认:600 动态宫格布局keepOwnerOnSeat: true, // 配置主播始终在麦位上},onSuccess: () => { console.log('创建直播间成功'); },onError: (error) => { console.log('创建直播间失败', error); },});};
LiveInfo 参数说明:参数名 | 类型 | 属性 | 描述 |
liveID | string | 必填 | 直播间的唯一标识符。 |
liveName | string | 选填 | 直播间的标题。 |
notice | string | 选填 | 直播间的公告信息。 |
isMessageDisable | boolean | 选填 | 是否禁言( true:是,false:否)。 |
isPublicVisible | boolean | 选填 | 是否公开可见( true:是,false:否)。 |
isSeatEnabled | boolean | 选填 | 是否启用麦位功能( true:是,false:否)。 |
keepOwnerOnSeat | boolean | 选填 | 是否保持房主在麦位上。 |
maxSeatCount | number | 选填 | 最大麦位数量。 |
seatMode | string | 选填 | 上麦模式( 'FREE':自由上麦,'APPLY':申请上麦)。 |
seatLayoutTemplateID | number | 必填 | 麦位布局模板 ID。 |
coverURL | string | 选填 | 直播间的封面图片地址。 |
backgroundURL | string | 选填 | 直播间的背景图片地址。 |
activityStatus | number | 选填 | 直播活动状态。 |
isGiftEnabled | boolean | 选填 | 是否启用礼物功能( true:是,false:否)。 |
LiveListState 的 endLive 接口结束直播。SDK 会处理停止推流和销毁房间的逻辑。import { useLiveListState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveListState';const { endLive } = useLiveListState();const handleEndLive = () => {endLive({onSuccess: () => { console.log('结束直播成功'); },onError: (error) => { console.log('结束直播失败', error); },});};

LiveCoreView 组件,将 coreViewType 指定为 playView(拉流视图), 并且为组件绑定当前直播 ID。import { LiveCoreView } from 'react-native-tuikit-atomic-x/lib/module/components/LiveCoreView';export default function YourAudienceScreen({ route, navigation }) {const { liveID } = route.params || {};return (<View style={styles.container}><LiveCoreView liveId={liveID} coreViewType="playView" style={styles.playView} /></View>);}
LiveListState 的 joinLive 接口加入直播,您无需做额外操作,LiveCoreView 会自动播放当前房间的视频流,完整示例代码如下:import { useEffect } from 'react';import { useLiveListState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveListState';export default function YourAudienceScreen({ route, navigation }) {const { liveID } = route.params || {};const { joinLive } = useLiveListState();useEffect(() => {joinLive({liveID: liveID,onSuccess: () => { console.log('加入直播间成功'); },onError: (error) => { console.log('加入直播间失败', error); },});}, []);}
LiveListState 的 leaveLive 接口退出直播。SDK 会自动停止拉流并退出房间。import { useLiveListState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveListState';const { leaveLive } = useLiveListState();// 离开直播const handleLeaveLive = () => {leaveLive({onSuccess: () => { console.log('离开直播间成功'); },onError: (error) => { console.log('离开直播间失败', error); },});};
LiveListState 提供的 addLiveListListener 来实现事件监听。import { useEffect } from 'react';import { useLiveListState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveListState';export default function LiveAudienceScreen({ route, navigation }) {const { addLiveListListener, removeLiveListListener } = useLiveListState();useEffect(() => {const onLiveEnded = (event) => {console.log('直播结束', event);// 在这里处理直播间结束后的相关逻辑,例如关闭当前页面};const onKickedOutOfLive = (event) => {console.log('被移出房间', event.reason);// 可以根据被移出房间的原因进行弹窗提示};addLiveListListener('onLiveEnded', onLiveEnded);addLiveListListener('onKickedOutOfLive', onKickedOutOfLive);return () => {removeLiveListListener('onLiveEnded', onLiveEnded);removeLiveListListener('onKickedOutOfLive', onKickedOutOfLive);};}, []);}
LiveCoreView 后,您将得到一个纯净的视频渲染视图,它已具备完整的直播业务能力,但没有任何交互 UI。您可以参考下一章节 丰富直播场景 来完善直播场景。
直播功能 | 功能介绍 | 功能 States | 实现指南 |
实现观众音视频连线 | 观众申请上麦,与主播进行实时视频互动。 | ||
实现主播跨房连线 | 两个不同房间的主播进行连线,实现互动 | ||
添加弹幕聊天功能 | 观众可以在直播间发送和接收实时文字消息。 | ||
构建礼物赠送系统 | 观众可以向主播赠送虚拟礼物,增加互动和趣味性。 |
State | 功能描述 | API 文档 |
LiveListState | 视频直播全生命周期管理:创建 / 加入 / 离开 / 销毁房间,查询房间列表,修改直播信息(名称、公告等),监听直播状态(例如被移出、结束)。 | |
DeviceState | 音视频设备控制:麦克风(开关 / 音量),设备状态实时监听。 | |
CoGuestState | 观众连麦管理:连麦申请 / 邀请 / 同意 / 拒绝,连麦成员权限控制(麦克风),状态同步。 | |
CoHostState | 主播跨房连线:支持多布局模板(动态网格等),发起 / 接受 / 拒绝连线,连麦主播互动管理。 | |
GiftState | 礼物互动:获取礼物列表,发送 / 接收礼物,监听礼物事件(含发送者、礼物详情)。 | |
BarrageState | 弹幕功能:发送文本 / 自定义弹幕,维护弹幕列表,实时监听弹幕状态。 | |
LikeState | 点赞互动:发送点赞,监听点赞事件,同步总点赞数。 | |
LiveAudienceState | 观众管理:获取实时观众列表(ID / 名称 / 头像),统计观众数量,监听观众进出事件。 | |
AudioEffectState | 音频特效:变声(童声 / 男声)、混响(KTV 等)、耳返调节,实时切换特效。 | |
BaseBeautyState | 基础美颜:调节磨皮 / 美白 / 红润(0-100 级),重置美颜状态,同步效果参数。 |
LiveCoreView 实例设置了正确的 liveID。openLocalCamera({ isFront: true}) 打开了摄像头。LiveCoreView 的 coreViewType 是否配置为 pushView。LiveCoreView 的 coreViewType 是否配置为 playView。文档反馈