标准低延迟直播流程
在开始之前，请您再次确认您已经完成了开通音视频服务、导入 SDK以及初始化。
提示
多人之间想要发起音视频通话，需要加入同一个音视频房间。对于直播需求来讲，资源类型需选择 AudioVideo 或 Audio ，即音视频直播间或纯音频直播间。加入房间的角色也分为主播 LiveBroadcaster 和观众 LiveAudience ，下面就这两种身份，分别进行说明。
主播端
用户加入房间的角色为主播 RCRTCRole.LiveBroadcaster。
步骤 1.1：设置监听
设置本地事件监听
设置加入房间事件回调
方法
JavaScript
rtcEngine.setOnRoomJoinedListener(callback);
回调参数
| 参数 | 类型 | 说明 |
|---|---|---|
| code | Number | 错误码，0 表示成功 |
| message | String | 错误信息 |
示例代码
JavaScript
rtcEngine.setOnRoomJoinedListener((code, message) => {
if (code === 0) {
// 加入房间成功
console.log('主播加入房间成功');
} else {
// 加入房间失败
console.log('主播加入房间失败:', message);
}
});
设置发布资源事件回调
方法
JavaScript
rtcEngine.setOnPublishedListener(callback);
回调参数
| 参数 | 类型 | 说明 |
|---|---|---|
| type | RCRTCMediaType | 发布资源的类型 |
| code | Number | 错误码，0 表示成功 |
| message | String | 错误信息 |
示例代码
JavaScript
rtcEngine.setOnPublishedListener((type, code, message) => {
if (code === 0) {
// 发布成功
console.log('主播发布资源成功:', type);
} else {
// 发布失败
console.log('主播发布资源失败:', message);
}
});
设置取消发布资源事件回调
方法
JavaScript
rtcEngine.setOnUnpublishedListener(callback);
回调参数
| 参数 | 类型 | 说明 |
|---|---|---|
| type | RCRTCMediaType | 取消发布资源的类型 |
| code | Number | 错误码，0 表示成功 |
| message | String | 错误信息 |
示例代码
JavaScript
rtcEngine.setOnUnpublishedListener((type, code, message) => {
if (code === 0) {
// 取消发布成功
console.log('主播取消发布资源成功:', type);
} else {
// 取消发布失败
console.log('主播取消发布资源失败:', message);
}
});
设置订阅资源事件回调
方法
JavaScript
rtcEngine.setOnSubscribedListener(callback);
回调参数
| 参数 | 类型 | 说明 |
|---|---|---|
| userId | String | 远端用户 ID |
| type | RCRTCMediaType | 订阅资源的类型 |
| code | Number | 错误码，0 表示成功 |
| message | String | 错误信息 |
示例代码
JavaScript
rtcEngine.setOnSubscribedListener((userId, type, code, message) => {
if (code === 0) {
// 订阅成功
console.log('主播订阅资源成功:', userId, type);
} else {
// 订阅失败
console.log('主播订阅资源失败:', message);
}
});
设置取消订阅资源事件回调
方法
JavaScript
rtcEngine.setOnUnsubscribedListener(callback);
回调参数
| 参数 | 类型 | 说明 |
|---|---|---|
| userId | String | 远端用户 ID |
| type | RCRTCMediaType | 取消订阅资源的类型 |
| code | Number | 错误码，0 表示成功 |
| message | String | 错误信息 |
示例代码
JavaScript
rtcEngine.setOnUnsubscribedListener((userId, type, code, message) => {
if (code === 0) {
// 取消订阅成功
console.log('主播取消订阅资源成功:', userId, type);
} else {
// 取消订阅失败
console.log('主播取消订阅资源失败:', message);
}
});
设置远端事件监听
设置远端用户加入房间事件回调
方法
JavaScript
rtcEngine.setOnUserJoinedListener(callback);
回调参数
| 参数 | 类型 | 说明 |
|---|---|---|
| roomId | String | 房间 ID |
| userId | String | 远端用户 ID |
示例代码
JavaScript
rtcEngine.setOnUserJoinedListener((roomId, userId) => {
console.log('远端用户加入房间:', userId, roomId);
});
设置远端用户离开房间事件回调
方法
JavaScript
rtcEngine.setOnUserLeftListener(callback);
回调参数
| 参数 | 类型 | 说明 |
|---|---|---|
| roomId | String | 房间 ID |
| userId | String | 远端用户 ID |
示例代码
JavaScript
rtcEngine.setOnUserLeftListener((roomId, userId) => {
console.log('远端用户离开房间:', userId, roomId);
});
设置远端用户发布资源回调
方法
JavaScript
rtcEngine.setOnRemotePublishedListener(callback);
回调参数
| 参数 | 类型 | 说明 |
|---|---|---|
| roomId | String | 房间 ID |
| userId | String | 远端用户 ID |
| type | RCRTCMediaType | 远端用户发布的资源类型 |
示例代码
JavaScript
rtcEngine.setOnRemotePublishedListener((roomId, userId, type) => {
console.log('远端用户发布资源:', userId, type);
});
设置远端用户取消发布资源回调
方法
JavaScript
rtcEngine.setOnRemoteUnpublishedListener(callback);
回调参数
| 参数 | 类型 | 说明 |
|---|---|---|
| roomId | String | 房间 ID |
| userId | String | 远端用户 ID |
| type | RCRTCMediaType | 远端用户发布的资源类型 |
示例代码
JavaScript
rtcEngine.setOnRemoteUnpublishedListener((roomId, userId, type) => {
console.log('远端用户取消发布资源:', userId, type);
});
步骤 1.2：加入房间
- 构建 RCRTCRoomSetup，指定主播身份和房间类型：
方法
JavaScript
rtcEngine.joinRoom(roomId, roomSetup);
参数说明
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| roomId | String | 是 | 直播间 ID |
| roomSetup | RCRTCRoomSetup | 是 | 房间配置 |
示例代码
JavaScript
let roomSetup = {
// 根据实际场景，选择音视频直播：AudioVideo 或纯音频直播：Audio
type: RCRTCMediaType.AudioVideo,
role: RCRTCRole.LiveBroadcaster
};
rtcEngine.joinRoom('直播间 ID', roomSetup);
console.log('主播加入直播间');
提示
客户端通过 joinRoom 传入的"直播间 ID" 来加入不同房间。房间不需要客户端创建或销毁，融云服务若发现该房间不存在时会自动创建，当没有任何主播时（只有观众不算），过一段时间也会自动销毁该房间。
步骤 1.3：发布音视频资源
发布音视频资源
加入房间后，开始摄像头采集并发布音视频资源。
方法
JavaScript
rtcEngine.enableCamera(enabled);
rtcEngine.publish(mediaType);
参数说明
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| enabled | Boolean | 是 | 是否开启摄像头 |
| mediaType | RCRTCMediaType | 是 | 媒体类型 |
示例代码
JavaScript
// 开启摄像头
rtcEngine.enableCamera(true);
console.log('摄像头已开启');
// 发布音视频资源
rtcEngine.publish(RCRTCMediaType.AudioVideo);
console.log('音视频资源发布请求已发送');
设置显示视频的组件
设置用于显示视频的 RCReactNativeRtcView，调用 RCRTCEngine 下的 setLocalView 方法设置本地视频的显示 view。
警告
RCReactNativeRtcView 内部包装的是原生提供的组件， 所以 RCReactNativeRtcView 只能在 JSX或TSX文件中使用。
导入预览窗口组件
方法
JavaScript
import { RCReactNativeRtcView } from '@rongcloud/react-native-rtc';
示例代码
JavaScript
// 导入 RCReactNativeRtcView
import { RCReactNativeRtcView } from '@rongcloud/react-native-rtc';
console.log('预览窗口组件导入成功');
添加预览窗口并获取 viewTag
方法
JavaScript
<RCReactNativeRtcView
ref={(ref) => {
let viewTag = findNodeHandle(ref);
}}
fitType={RCRTCViewFitType.Center}
mirror={true}>
</RCReactNativeRtcView>
参数说明
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| fitType | RCRTCViewFitType | 否 | 视频填充模式 |
| mirror | Boolean | 否 | 视频是否镜像显示 |
示例代码
JavaScript
// 增加 RCReactNativeRtcView 组件, fitType: 视频填充模式, mirror: 视频是否镜像显示。并在ref中获取viewTag
<RCReactNativeRtcView
ref={(ref) => {
let viewTag = findNodeHandle(ref);
console.log('获取到预览窗口 viewTag:', viewTag);
}}
fitType={RCRTCViewFitType.Center}
mirror={true}>
</RCReactNativeRtcView>
设置预览窗口
方法
JavaScript
rtcEngine.setLocalView(viewTag);
参数说明
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| viewTag | Number | 是 | 预览窗口的 viewTag |
示例代码
JavaScript
// 设置预览窗口,其中viewTag为上一步获取的viewTag
rtcEngine.setLocalView(viewTag).then(code => {
if (code === 0) {
// 设置成功
console.log('本地预览窗口设置成功');
} else {
// 设置失败
console.log('本地预览窗口设置失败');
}
});
步骤 1.4：主播订阅房间内其他主播的资源
- 调用
RCRTCEngine下的subscribe方法订阅房间内其他主播的资源，在主播连麦的场景下会用到该方法，当远端主播发布资源时，会通过setOnRemotePublishedListener回调通知，需要订阅音视频资源并显示视图。
方法
JavaScript
rtcEngine.subscribe(userId, mediaType);
参数说明
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| userId | String | 是 | 远端用户 ID |
| mediaType | RCRTCMediaType | 是 | 媒体类型 |
示例代码
JavaScript
rtcEngine.subscribe(userId, RCRTCMediaType.AudioVideo);
console.log('订阅其他主播资源');
- 创建用于显示视频的
RCReactNativeRtcView并获取其viewTag，调用RCRTCEngine下的setRemoteView方法设置远端视频的显示 view。
方法
JavaScript
rtcEngine.setRemoteView(userId, viewTag);
参数说明
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| userId | String | 是 | 远端用户 ID |
| viewTag | Number | 是 | 预览窗口的 viewTag |
示例代码
JavaScript
// 导入组件 和 添加 remoteView 组件，可参考 setLocalView 部分的示例
// 设置预览窗口
rtcEngine.setRemoteView(userId, viewTag).then(code => {
if (code === 0) {
// 设置成功
console.log('远端用户预览窗口设置成功');
} else {
// 设置失败
console.log('远端用户预览窗口设置失败');
}
});
观众端
用户加入房间的角色为观众 RCRTCRole.LiveAudience。
步骤 2.1：设置监听
设置合流资源发布监听
方法
JavaScript
rtcEngine.setOnRemoteLiveMixPublishedListener(callback);
回调参数
| 参数 | 类型 | 说明 |
|---|---|---|
| type | RCRTCMediaType | 资源类型 |
示例代码
JavaScript
rtcEngine.setOnRemoteLiveMixPublishedListener((type) => {
console.log('合流资源发布:', type);
});
设置合流资源取消发布监听
方法
JavaScript
rtcEngine.setOnRemoteLiveMixUnpublishedListener(callback);
回调参数
| 参数 | 类型 | 说明 |
|---|---|---|
| type | RCRTCMediaType | 资源类型 |
示例代码
JavaScript
rtcEngine.setOnRemoteLiveMixUnpublishedListener((type) => {
console.log('合流资源取消发布:', type);
});
步骤 2.2：加入房间
- 构建
RCRTCRoomSetup，指定观众身份和房间类型：
方法
JavaScript
rtcEngine.joinRoom(roomId, roomSetup);
参数说明
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| roomId | String | 是 | 直播间 ID |
| roomSetup | RCRTCRoomSetup | 是 | 房间配置 |
示例代码
JavaScript
let roomSetup = {
// 根据实际场景，选择音视频直播：audio_video 或纯音频直播：audio
type: RCRTCMediaType.AudioVideo,
role: RCRTCRole.LiveAudience,
};
rtcEngine.joinRoom('直播间 ID', roomSetup);
console.log('观众加入直播间');
步骤 2.3：观众观看直播
- 在监听到合流资源发布事件之后，调用
RCRTCEngine下的subscribeLiveMix方法订阅直播。
方法
JavaScript
rtcEngine.subscribeLiveMix(mediaType);
参数说明
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| mediaType | RCRTCMediaType | 是 | 媒体类型 |
示例代码
JavaScript
rtcEngine.subscribeLiveMix(RCRTCMediaType.AudioVideo);
console.log('订阅直播合流资源');
- 创建用于显示视频的
RCReactNativeRtcView并获取其viewTag，调用RCRTCEngine下的setLiveMixView方法设置房间直播资源的显示 view。
方法
JavaScript
rtcEngine.setLiveMixView(viewTag);
参数说明
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| viewTag | Number | 是 | 预览窗口的 viewTag |
示例代码
JavaScript
// 创建预览窗口
// 导入组件 和 添加 remoteView 组件，可参考 setLocalView 部分的示例
// 设置预览窗口
rtcEngine.setLiveMixView(viewTag).then(code => {
if (code === 0) {
// 设置成功
console.log('直播合流预览窗口设置成功');
} else {
// 设置失败
console.log('直播合流预览窗口设置失败');
}
});