实现流程

1. 功能说明

超级小班应用由教师端、学生端、监管端三端组成，教师端应用基于ZegoLiveRoom SDK开发，使用Electron框架，可以在Windows、Mac和Linux中工作，显著减少了开发和培训的时间。主讲老师可以使用教师端登录课堂大房间授课，助教和学生都可以使用学生端登录课堂小房间，学生在课堂小房间里拉取教师端的实时音视频听课学习，同时助教在课堂小房间里维持课堂秩序、解答学生问题，监管人员可以使用监管端对当前课堂的各个小房间里进行监管。

超级小班应用使用了多房间模块，目前官网上的ZegoLiveRoom SDK 中，暂不包含多房间模块，如有需要，请联系 ZEGO 技术支持提供。

2. 流程说明

2.1 教师进入课堂流程说明：

1. 初始化SDK：SDK在初始化后才可以进行登录和推拉流操作。
2. 设置回调：包括房间状态回调、推流回调、拉流回调。
3. 获取房间信息：演示应用省略，由用户手动输入房间ID，学生端进入课堂时需要使用相同的房间ID。
4. 登录大班房间。
5. 推流：把教师端授课的音视频实时推送出去。
6. 进入小班房间：使用多房间技术，教师可以自由进入小班房间。
7. 拉小班房间流：教师查看小班房间学生的学习状态。
8. 退出小班房间。
9. 退出大班房间。

3. 代码说明

3.1 初始化SDK

使用 AppID 与 AppSign 初始化 SDK。

// 初始化SDK
 initSDK(cb?: (res?: any) => void) {
   const { zegoClient, config } = this;
   return zegoClient.initSDK({
     app_id: config.appId,
     sign_key: config.appSign,
     user_id: config.userId,
     user_name: config.userName
   }, (res) => {
     // 初始化SDK回调
     // res.error_code等于0表示初始化成功
     const isSuccess = res.error_code === 0;
     console.error({ isSuccess });
     if (!isSuccess) {
    // SDK 初始化失败
     };
   })
 }

3.2 设置回调

设置回调接口，主要包括房间状态回调接口、推流回调接口、拉流回调接口

 /*设置回调接口*/
 setEventHandler() {
   const { zegoClient } = this;
   // 设置房间流更新回调接口
   zegoClient.onEventHandler("onStreamUpdated", (rs: any) => {
     console.log("onStreamUpdated", rs);
   });
   // 设置推流回调
   zegoClient.onEventHandler("onPublishStateUpdate", (rs: any) => {
     console.log("onPublishStateUpdate, rs = ", rs);
   });
   // 设置拉流回调
   zegoClient.onEventHandler("onPlayStateUpdate", (rs: { error_code: number; }) => {
     console.log("onPlayStateUpdate", rs);
     if (rs.error_code === 0) {
       //播放成功
     } else {
       //播放失败
     }
   });
 }

3.3 登录大班房间

调用 loginRoom 登录房间。

注意：roomID 需保证房间 ID 信息的全局唯一，只支持长度不超过 128 字节的数字、下划线、字母。

 // 登录房间
 loginRoom(roomId: string, cb: (res: any) => void) {
   const { zegoClient, ZEGOCONSTANTS } = this;
   zegoClient.loginRoom({
     room_id: roomId,
     room_name: roomId,
     role: ZEGOCONSTANTS.ZegoRoomRole.Audience
   }, res => {
     if (cb) cb;
     if (res.error_code === 0) {
       //登录房间成功
       // 登录房间成功后，开发者可通过 streamList 获取到当前房间推流信息，便于后续的拉流操作。
       // streamList，内部封装了 userID、userName、streamID 和 extraInfo。
       // 当 streamList 为空时说明当前房间没有人推流
       const streams = [...res.stream_list, { stream_id: liveRoom.config.publishStreamId }];
     } else {
       //登录房间失败
     }
   });
 }

3.4 推流

开发者可调用如下 API 进行推流，如果不需要继续推流, 请调用 stopPublishing 停止推流

注意：streamID 仅支持长度不超过 256 字节的数字、下划线、字母，streamID 需要在整个 AppID 内全局唯一。

  // 开始推流
  publishStream() {
    const { zegoClient, ZEGOCONSTANTS } = this;
    // 开始推流
    zegoClient.startPublishing({
      title: liveRoom.config.publishStreamId,
      stream_id: liveRoom.config.publishStreamId,
      publish_flag: ZEGOCONSTANTS.ZegoPublishFlag.ZEGO_JOIN_PUBLISH
    });
  }

开发者也可按照实际使用场景，指定推流场景，请参考 ZEGOCONSTANTS.ZegoPublishFlag 定义。

3.4 登录小班房间

ZegoLiveRoom 自 2019.11.09 版本起，支持加入多个房间，目前可进入的总房间数量限制为两个（文档中分别称为主房间 Room、多房间 MultiRoom）。

加入房间后，用户只能在主房间中推流，但可以同时在主房间和多房间中拉流，并且可以正常收到每个房间中的信令及回调。

多房间技术非常匹配超级小班的应用场景，教师可以在不离开授课大班、不中断授课的情况下，自由进出学生所在的小班房间观察小班房间内学生的学习状态，和小班的学生互动。

 /** 登录小班房间 */
 loginMultiRoom(roomId: String) {
   /** 登录小班房间 */
   const { zegoClient } = this;
   // 使用多房间API登录小班房间
   zegoClient.loginMultiRoom({ room_id: roomId, role: 1, room_name: roomId }, (res: { error_code: number; }) => {
     console.log("loginMultiRoom", res);
     if (res.error_code === 0) {
       // 登录成功
     }
   }
 }

3.5 拉流

ZegoLiveRoom支持多房间登录的同时，支持跨房间拉流，开发者可以调用 startPlayingStream 进行拉流。

注意：streamID 仅支持长度不超过 256 字节的数字、下划线、字母，streamID 需要在整个 AppID 内全局唯一。

 /** 拉流 */
 startPlayingStream(mode, streamId, videoEl) {
   const { zegoClient } = this;
   /** 拉流 */
   // 设置用于拉流的View的播放模式
   zegoClient.setViewMode({ mode: mode, stream_id: streamId });
   // 拉流
   zegoClient.startPlayingStream({
     stream_id: streamId,
     canvas_view: videoEl,
     params: ""
   });
 }

对于 streamID 的获取，在本用户登录房间前就已经在推的流，可以从登录成功回调中获得，在本用户登录房间后新推或者停推的流，可以从房间代理中的流信息更新回调中获得。

3.6 退出房间

超级小班教师端使用了多房间技术，教师可以在不退出大班房间的情况下，进入小班房间。因此在退出房间的时候需要注意当前退出的是大班房间还是小班房间。

退出小班房间，需要停止拉小班房间的流，然后退出小班房间，因为大班房间仍在使用中，所以不需要释放SDK。

  // 退出小班房间
  logoutMultiRoom(streamId: String, cb?: () => void) {
    const { zegoClient } = this;
    // 停止拉流，参数为需要停止拉流的流ID
    zegoClient.stopPlayingStream({ stream_id: streamId });
    // 退出多房间
    zegoClient.logoutMultiRoom(cb || (() => { }));
  }

退出大班房间，需要停止推流、停止拉流，然后再退出房间，视后续业务需求情况来判断是否需要释放SDK。

  // 退出登录
  logoutRoom(streamId: String, cb?: () => void) {
    const { zegoClient, ZEGOCONSTANTS } = this;
    // 停止拉流，参数为需要停止拉流的流ID
    zegoClient.stopPublishing({ channel_index: ZEGOCONSTANTS.PublishChannelIndex.PUBLISH_CHN_MAIN });
    // 停止预览
    zegoClient.stopPreview({ channel_index: ZEGOCONSTANTS.PublishChannelIndex.PUBLISH_CHN_MAIN });
    // 停止拉流，参数为需要停止拉流的流ID
    zegoClient.stopPlayingStream({ stream_id: streamId });
    // 退出房间
    zegoClient.logoutRoom(cb || (() => { }));
    // 如果不需要再继续使用 SDK 可以调用如下函数释放 SDK。 
    // 注意：释放 SDK 后需要再使用 SDK 时，必须重新初始化 SDK。
    zegoClient.unInitSDK();
  }

4 API 参考列表