融云 React-Native RTC
本文档主要讲解了如何使用融云 React-Native RTC SDK,基于 融云 iOS/Android 平台的 RTCLib SDK
前期准备
1 申请开发者账号
融云官网申请开发者账号
通过管理后台的 "基本信息"->"App Key" 获取 AppKey
通过管理后台的 "IM 服务"—>"API 调用"->"用户服务"->"获取 Token",通过用户 id 获取 IMToken
2 开通音视频服务
管理后台的 "音视频服务"->"服务设置" 开通音视频 RTC 3.0 ,开通两个小时后生效
依赖 RTC 插件
前置接口说明
初始化 IM SDK
// IM 初始化
const options: RCIMIWEngineOptions = {
naviServer: navigate,
fileServer: file,
};
imEngine = RCIMIWEngine.create(key, options);
连接 IM
// 设置连接回调
imEngine?.setOnConnectedListener((code: number, userId: string) => {
if (code === 0) {
console.log('IM 连接成功 userId:' + userId);
} else {
console.log('IM 连接失败,code: ' + code);
}
});
// 连接融云 IM 服务器
imEngine?.connect(token, 30)
.then((code: number) => {
if (code === 0) {
console.log('connect 接口调用成功');
} else {
console.log('connect 接口调用失败', code);
}
});
创建 RTC 引擎
rtcEngine = RCRTCEngine.create(setup)
音视频模式接口说明
用户加入房间,渲染并发布资源
加入 RTC 房间
// 设置加入 RTC 房间事件监听
rtcEngine?.setOnRoomJoinedListener((code: number, message: string) => {
if (code === 0) {
// 加入房间成功
} else {
// 加入房间失败
}
});
// 加入 RTC 房间
let roomSetup = {
// 根据实际场景,选择音视频直播:AudioVideo 或纯音频直播:Audio
type: RCRTCMediaType.AudioVideo
role: RCRTCRole.MeetingMember
};
rtcEngine?.joinRoom('直播间 ID', roomSetup);
采集音频
引擎默认开启音频采集
rtcEngine?.enableMicrophone(true);
采集视频
rtcEngine?.enableCamera(true);
渲染视频
设置用于显示视频的 RCReactNativeRtcView
,调用 RCRTCEngine
下的 setLocalView
方法设置本地视频的显示 view。
:::warning RCReactNativeRtcView 内部包装的是原生提供的组件, 所以 RCRTCView 只能在 TSX或JSX 文件中使用。 :::
导入预览窗口组件
// 导入 RCReactNativeRtcView
import {RCReactNativeRtcView} from '@rongcloud/react-native-rtc';
添加预览窗口并获取viewTag
<!-- 增加 RCReactNativeRtcView 组件, fitType: 视频填充模式, mirror: 视频是否镜像显示 -->
<RCReactNativeRtcView
ref={(ref) => {
let viewTag = findNodeHandle(ref);
}}
fitType={RCRTCViewFitType.Center}
mirror={true}>
</RCReactNativeRtcView>
设置预览窗口
// 设置预览窗口,其中viewTag为上一步获取的viewTag
rtcEngine?.setLocalView(viewTag).then(code=>{
if (code === 0) {
// 设置成功
} else {
// 设置失败
}
});
发布资源
rtcEngine?.publish(RCRTCMediaType.AudioVideo);
渲染远端用户
监听远端用户加入的回调
当用户加入的时候,不要做订阅渲染的处理
,因为此时该用户可能刚加入房间成功,但是尚未发布资源
rtcEngine?.setOnUserJoinedListener((roomId: string, userId: string) => {
// userId 远端用户 ID
// roomId 房间 ID
});
监听远端用户发布资源的回调
rtcEngine?.setOnRemotePublishedListener((roomId: string, userId: string, type: RCRTCMediaType) => {
// userId 远端用户 ID
// roomId 房间 ID
// type 远端用户发布的资源类型 RCRTCMediaType
});
远端用户发布资源后,订阅远端用户资源
rtcEngine?.subscribe(userId, type);
渲染远端用户资源
// 导入组件 和 添加 remoteView 组件,可参考 setLocalView 部分的示例
// 设置预览窗口
rtcEngine?.setRemoteView(userId, viewTag).then(code=>{
if (code === 0) {
// 设置成功
} else {
// 设置失败
}
});
直播模式接口说明
主播加入房间,渲染并发布资源
加入 RTC 房间
// 设置加入 RTC 房间事件监听
rtcEngine?.setOnRoomJoinedListener((code: number, message: string) => {
if (code === 0) {
// 加入房间成功
} else {
// 加入房间失败
}
});
// 加入 RTC 房间
let roomSetup = {
// 根据实际场景,选择音视频直播:AudioVideo 或纯音频直播:Audio
type: RCRTCMediaType.AudioVideo
role: RCRTCRole.LiveBroadcaster
};
rtcEngine?.joinRoom('直播间 ID', roomSetup);
采集音频
引擎默认开启音频采集
rtcEngine?.enableMicrophone(true);
采集视频
rtcEngine?.enableCamera(true);
渲染视频
// 设置预览窗口,其中viewTag为RCReactNativeRtcView获取的viewTag
rtcEngine?.setLocalView(viewTag).then(code=>{
if (code === 0) {
// 设置成功
} else {
// 设置失败
}
});
发布资源
rtcEngine?.publish(RCRTCMediaType.AudioVideo);
渲染远端主播
监听远端主播加入的回调
当主播加入的时候,不要做订阅渲染的处理
,因为此时该主播可能刚加入房间成功,但是尚未发布资源
rtcEngine?.setOnUserJoinedListener((roomId: string, userId: string) => {
// userId 远端用户 ID
// roomId 房间 ID
});
监听远端主播发布资源的回调
rtcEngine?.setOnRemotePublishedListener((roomId: string, userId: string, type: RCRTCMediaType) => {
// userId 远端用户 ID
// roomId 房间 ID
// type 远端用户发布的资源类型 RCRTCMediaType
});
远端主播发布资源后,订阅远端主播资源
rtcEngine?.subscribe(userId, type);
渲染远端主播资源
// 导入组件 和 添加 remoteView 组件,可参考 setLocalView 部分的示例
rtcEngine?.setRemoteView(userId, viewTag).then(code=>{
if (code === 0) {
// 设置成功
} else {
// 设置失败
}
});
观众加入房间,订阅并渲染MCU资源
加入 RTC 房间
// 设置加入 RTC 房间事件监听
rtcEngine?.setOnRoomJoinedListener((code: number, message: string) => {
if (code === 0) {
// 创建/加入房间成功
} else {
// 创建/加入房间失败
}
});
// 加入 RTC 房间
let setup = {
type: RCRTCMediaType.AudioVideo,
role: RCRTCRole.LiveAudience, // 观众
};
rtcEngine?.joinRoom(roomId, setup);
监听MCU资源发布回调
rtcEngine?.setOnRemoteLiveMixPublishedListener((type: RCRTCMediaType) => {
// type 媒体类型
});
MCU资源发布后,订阅MCU资源
rtcEngine?.subscribeLiveMix(RCRTCMediaType.AudioVideo);
渲染MCU资源
/// 导入组件 和 添加 liveMixView 组件,可参考 setLocalView 部分的示例
/// 设置预览窗口
rtcEngine?.setLiveMixView(viewTag).then(code=>{
if (code === 0) {
// 设置成功
} else {
// 设置失败
}
});
观众加入房间,订阅并渲染主播资源
加入 RTC 房间
// 设置加入 RTC 房间事件监听
rtcEngine?.setOnRoomJoinedListener((code: number, message: string) => {
if (code === 0) {
// 创建/加入房间成功
} else {
// 创建/加入房间失败
}
});
// 加入 RTC 房间
let setup = {
type: RCRTCMediaType.AudioVideo,
role: RCRTCRole.LiveAudience, // 观众
};
rtcEngine?.joinRoom(roomId, setup);
监听远端主播加入的回调
当主播加入的时候,不要做订阅渲染的处理
,因为此时该主播可能刚加入房间成功,但是尚未发布资源
rtcEngine?.setOnUserJoinedListener((roomId: string, userId: string) => {
// userId 远端用户 ID
// roomId 房间 ID
});
监听远端主播发布资源的回调
rtcEngine?.setOnRemotePublishedListener((roomId: string, userId: string, type: RCRTCMediaType) => {
// userId 远端用户 ID
// roomId 房间 ID
// type 远端用户发布的资源类型 RCRTCMediaType
});
远端主播发布资源后,订阅远端主播资源
rtcEngine?.subscribe(userId, type);
渲染远端主播资源
// 导入组件 和 添加 remoteView 组件,可参考 setLocalView 部分的示例
rtcEngine?.setRemoteView(userId, viewTag).then(code=>{
if (code === 0) {
// 设置成功
} else {
// 设置失败
}
});
其他接口
离开房间
rtcEngine?.leaveRoom();