跳到主要内容

标准低延迟直播流程

在开始之前，请您再次确认您已经完成了开通音视频服务、导入 SDK以及初始化。

提示

多人之间想要发起音视频通话，需要加入同一个音视频房间。对于直播需求来讲，资源类型需选择 AudioVideo 或 Audio ，即音视频直播间或纯音频直播间。加入房间的角色也分为主播 LiveBroadcaster 和观众 LiveAudience ，下面就这两种身份，分别进行说明。

主播端​

用户加入房间的角色为主播 RCRTCRole.LiveBroadcaster。

步骤 1.1：设置监听​

设置本地事件监听​

设置加入房间事件回调

rtcEngine.setOnRoomJoinedListener((code: number, message: string) => {
  if (code === 0) {
    // 加入房间成功
  } else {
    // 加入房间失败
  }
});

设置发布资源事件回调

rtcEngine.setOnPublishedListener((type: RCRTCMediaType, code: number, message: string) => {
  // type 发布资源的类型 RCRTCMediaType
  if (code === 0) {
    // 发布成功
  } else {
    // 发布失败
  }
});

设置取消发布资源事件回调

rtcEngine.setOnUnpublishedListener((type: RCRTCMediaType, code: number, message: string) => {
  // type 取消发布资源的类型 RCRTCMediaType
  if (code === 0) {
    // 取消发布成功
  } else {
    // 取消发布失败
  }
});

设置订阅资源事件回调

rtcEngine.setOnSubscribedListener((userId: string, type: RCRTCMediaType, code: number, message: string) => {
  // userId 远端用户 ID
  // type 订阅资源的类型 RCRTCMediaType
  if (code === 0) {
    // 订阅成功
  } else {
    // 订阅失败
  }
});

设置取消订阅资源事件回调

rtcEngine.setOnUnsubscribedListener((userId: string, type: RCRTCMediaType, code: number, message: string) => {
  // userId 远端用户 ID
  // type 取消订阅资源的类型 RCRTCMediaType
  if (code === 0) {
    // 取消订阅成功
  } else {
    // 取消订阅失败
  }
});

设置远端事件监听​

设置远端用户加入房间事件回调

rtcEngine.setOnUserJoinedListener((roomId: string, userId: string) => {
  // userId 远端用户 ID
  // roomId 房间 ID
});

设置远端用户离开房间事件回调

rtcEngine.setOnUserLeftListener((roomId: string, userId: string) => {
  // userId 远端用户 ID
  // roomId 房间 ID
});

设置远端用户发布资源回调

rtcEngine.setOnRemotePublishedListener((roomId: string, userId: string, type: RCRTCMediaType)  => {
  // userId 远端用户 ID
  // roomId 房间 ID
  // type 远端用户发布的资源类型 RCRTCMediaType
});

设置远端用户取消发布资源回调

rtcEngine.setOnRemoteUnpublishedListener((roomId: string, userId: string, type: RCRTCMediaType)  => {
  // userId 远端用户 ID
  // roomId 房间 ID
  // type 远端用户发布的资源类型 RCRTCMediaType
});

步骤 1.2：加入房间​

  1. 构建 RCRTCRoomSetup，指定主播身份和房间类型：

    let roomSetup = {
      // 根据实际场景，选择音视频直播：AudioVideo 或纯音频直播：Audio
      type: RCRTCMediaType.AudioVideo
      role: RCRTCRole.LiveBroadcaster
    };

  2. 调用 RCRTCEngine 下的 joinRoom 方法创建并加入一个直播房间：

    rtcEngine.joinRoom('直播间 ID', roomSetup);
提示

客户端通过 joinRoom 传入的"直播间 ID" 来加入不同房间。房间不需要客户端创建或销毁，融云服务若发现该房间不存在时会自动创建，当没有任何主播时（只有观众不算），过一段时间也会自动销毁该房间。

步骤 1.3：发布音视频资源​

发布音视频资源​

加入房间后，开始摄像头采集并发布音视频资源。

/// 开启摄像头
rtcEngine.enableCamera(true);
/// 发布音视频资源
rtcEngine.publish(RCRTCMediaType.AudioVideo);

#### 设置显示视频的组件

设置用于显示视频的 `RCReactNativeRtcView`，调用 `RCRTCEngine` 下的 `setLocalView` 方法设置本地视频的显示 view。

> **警告**
>
> RCReactNativeRtcView 内部包装的是原生提供的组件， 所以 RCReactNativeRtcView 只能在 JSX或TSX文件中使用。


  导入预览窗口组件

  ```js
  // 导入 RCReactNativeRtcView
  import {RCReactNativeRtcView} from '@rongcloud/react-native-rtc';

添加预览窗口并获取 viewTag

// 增加 RCReactNativeRtcView 组件, fitType: 视频填充模式, mirror: 视频是否镜像显示。并在ref中获取viewTag
<RCReactNativeRtcView
  ref={(ref) => {
      let viewTag = findNodeHandle(ref);
  }}
  fitType={RCRTCViewFitType.Center}
  mirror={true}>
</RCReactNativeRtcView>

设置预览窗口

// 设置预览窗口,其中viewTag为上一步获取的viewTag
rtcEngine.setLocalView(viewTag).then(code=>{
  if (code === 0) {
    // 设置成功
  } else {
    // 设置失败
  }
});

步骤 1.4：主播订阅房间内其他主播的资源​

  1. 调用 RCRTCEngine 下的 subscribe 方法订阅房间内其他主播的资源，在主播连麦的场景下会用到该方法，当远端主播发布资源时，会通过 setOnRemotePublishedListener 回调通知，需要订阅音视频资源并显示视图。

    rtcEngine.subscribe(userId, RCRTCMediaType.AudioVideo);

  2. 创建用于显示视频的 RCReactNativeRtcView并获取其viewTag，调用 RCRTCEngine 下的 setRemoteView 方法设置远端视频的显示 view。

    /// 导入组件 和 添加 remoteView 组件，可参考 setLocalView 部分的示例
    /// 设置预览窗口
    rtcEngine.setRemoteView(userId, viewTag).then(code=>{
    if (code === 0) {
        // 设置成功
    } else {
        // 设置失败
    }
    });

观众端​

用户加入房间的角色为观众 RCRTCRole.LiveAudience。

步骤 2.1：设置监听​

设置合流资源发布监听

rtcEngine.setOnRemoteLiveMixPublishedListener((type: RCRTCMediaType) => {
  // type 资源类型 RCRTCMediaType
});

设置合流资源取消发布监听

rtcEngine.setOnRemoteLiveMixUnpublishedListener((type: RCRTCMediaType) => {
  // type 资源类型 RCRTCMediaType
});

步骤 2.2：加入房间​

  1. 构建 RCRTCRoomSetup，指定观众身份和房间类型：

    let roomSetup = {
      // 根据实际场景，选择音视频直播：audio_video 或纯音频直播：audio
      type: RCRTCMediaType.AudioVideo,
      role: RCRTCRole.LiveAudience,
    };

  2. 调用 RCRTCEngine 下的 joinRoom 方法创建并加入一个直播房间：

    rtcEngine.joinRoom('直播间 ID', setup);

步骤 2.3：观众观看直播​

  1. 在监听到合流资源发布事件之后，调用 RCRTCEngine 下的 subscribeLiveMix 方法订阅直播。

    rtcEngine.subscribeLiveMix(RCRTCMediaType.AudioVideo);

  2. 创建用于显示视频的 RCReactNativeRtcView并获取其viewTag，调用 RCRTCEngine 下的 setLiveMixView 方法设置房间直播资源的显示 view。

    /// 创建预览窗口
    /// 导入组件 和 添加 remoteView 组件，可参考 setLocalView 部分的示例
    /// 设置预览窗口
    rtcEngine.setLiveMixView(viewTag).then(code=>{
    if (code === 0) {
        // 设置成功
    } else {
        // 设置失败
    }
    });
最后于 更新