跳到主要内容

标准会议流程

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

设置本地事件回调监听​

设置加入房间事件回调

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.setOnUserOfflineListener((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
});

加入房间​

以会议成员身份（MeetingMember）加入音视频会议

let setup = {
  type: RCRTCMediaType.AudioVideo
  role: RCRTCRole.MeetingMember
};
rtcEngine.joinRoom('会议号', setup);

本地预览​

打开前置摄像头采集视频

rtcEngine.enableCamera(true, RCRTCCamera.Front);

导入预览窗口组件

警告

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

// 导入 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 {
    // 设置失败
  }
});

发布资源​

发布音视频资源

rtcEngine.publish(RCRTCMediaType.AudioVideo);

订阅远端用户资源​

远端用户发布资源后，订阅远端用户音视频资源

rtcEngine.subscribe(userId, RCRTCMediaType.AudioVideo);

远端用户发布资源后，设置远端用户预览窗口

//viewTag参考setLocalView说明
rtcEngine.setRemoteView(userId, viewTag).then(code=>{
  if (code === 0) {
    // 设置成功
  } else {
    // 设置失败
  }
});
最后于 更新