SDK集成

如下是一个总体接入流程，详细细节请参见 RTC服务开通指南。

整体实现流程

整体业务流程图

核心功能实现

进入退出房间

时序图

示例代码

• 进入房间

const app_id = "";

const rtc_token="";


interface EngineOptions {
  appId: string;
  uid: string;
  rtsUid: string;
  roomId: string;
  rtmToken: string;
  serverUrl: string;
  serverSignature: string;
  bid: string;
}

// rtc 实例
class RtcClient {

  createEngine = async (props: EngineOptions) => {
    this.config = props;
    this.engine = VERTC.createEngine(this.config.appId);
  };
  
  joinWithRTS = async () => {
    await this.engine.login(this.config.rtmToken, this.config.rtsUid);
    await this.engine.setServerParams(this.config.serverSignature, this.config.serverUrl);
  };
  
  joinRoom = (token: string | null, username: string): Promise<void> => {
    // 启用音频信息提示，回调周期 2000ms
    this.engine.enableAudioPropertiesReport({ interval: 2000 });
    return this.engine.joinRoom(
      token,
      `${this.config.roomId!}`,
      {
        userId: this.config.uid!,
        extraInfo: JSON.stringify({
          user_name: username,
          user_id: this.config.uid,
        }),
      },
      {
        isAutoPublish: true,
        isAutoSubscribeAudio: true,
        isAutoSubscribeVideo: true,
        roomProfileType: RoomProfileType.meeting,
      }
    );
  };
  
  leaveRoom = () => {
    this.engine.leaveRoom();
    VERTC.destroyEngine(this.engine);
    this._videoCaptureDevice = undefined;
    this._audioCaptureDevice = undefined;
    this._audioPlaybackDevice = undefined;

    this._captureConfig = DefaultCaptureConfig;
    this._encoderConfig = DefaultEncoderConfig;
  };
  
  // ... 

}


// 业务层逻辑
const handleStart = async (formValues: FormProps) => {
  
  // 创建RTC引擎对象
  await RtcClient.createEngine({
    appId: app_id,
  });
  
  await RtcClient.joinWithRTS();
  
  const joinRes: any = await RtcClient.sendServerMessage('videocallJoinRoom');

  await RtcClient.joinRoom(rtc_token, formValues.username);

  const mediaDevices = await RtcClient.getDevices();


  // 根据设备权限和是否启用，开启/关闭视频采集 
  if (devicePermissions.video && formValues.publishVideo) {
     await RtcClient.startVideoCapture();
     RtcClient.setMirrorType(MirrorType.MIRROR_TYPE_RENDER);
  }
  // 根据设备权限，默认采集音频 
  if (devicePermissions.audio) {
     await RtcClient.startAudioCapture();
  }
  
  // 根据是否启用，推送音频流 
  if (!formValues.publishAudio) {
     RtcClient.unpublishStream(MediaType.AUDIO);
  }
};

• 退出房间

const handleStop = async () => {
    await RtcClient.stopAudioCapture();
    await RtcClient.stopVideoCapture();
    await RtcClient.stopScreenCapture();
    await RtcClient.leaveRoom();
  };

断线重连

时序图

示例代码

• 短时间断网
  无需处理。RTC SDK 会补发断网期间丢失的消息。
  例如：本地用户网络从 WIFI 切换到 5G，在网络切换中有远端用户加入房间。当本地用户网络切换成功后，就会收到 RTC SDK -onUserJoined 回调。

• 长时间断网，时序图和关键代码如下：

const handleConnectionStateChange = (state) =>{
  if(state === ConnectionState.CONNECTION_STATE_DISCONNECTED){
     message.error("网络断开链接")
  }
}

const handleUserPublishStream = (e: { userId: string; mediaType: MediaType }) => {
    // 更新UI
};

const handleUserUnpublishStream = (e: {
  userId: string;
  mediaType: MediaType;
  reason: StreamRemoveReason;
}) => {
     // 更新UI
};

屏幕共享

屏幕共享参看Web 端屏幕共享。

核心功能 API 与回调参考

API

回调