直播回看

直播回看功能支持对直播间录制的视频进行回放。使用直播回看,您需要在控制台为应用选配录制组件、完成回看配置,并进行一些客户端的开发。本文主要介绍客户端开发步骤。

前提条件

您已经在控制台完成了直播回看配置,详情请参见配置直播回看

开发步骤

根据您选择的场景和终端,按文档完成开发:

互动直播低代码集成(含UI)

完成应用集成即可,无需额外开发。集成步骤请参见iOS端集成Android端集成Web观看端集成Flutter集成

互动直播标准集成(不含UI)

  1. 集成客户端和服务端。请参见接入流程

  2. 服务端调用GetLiveRoom - 获取直播详情接口,获取RoomIdPlaybackUrl的值。

  3. 进入房间。

    • iOS

      id<AIRBRoomChannelProtocol> room = [[AIRBRoomEngine sharedInstance] getRoomChannelWithRoomID:xxx];
      room.delegate = self;
      [room enterRoomWithUserNick:xxx extension:xxx];
    • Android

      // 获取RoomChannel。参数RoomId的值为步骤2获取直播详情接口中RoomId的值。
      Result<RoomChannel> result = RoomEngine.getInstance().getRoomChannel(RoomId);
      if (!result.success) {
          // 注意检查返回结果(登录未成功时,会走到这里)
          showToast(result.errorMsg);
          return;
      }
      
      roomChannel = result.value;
      // 获取插件服务
      chatService = roomChannel.getPluginService(ChatService.class);
      liveService = roomChannel.getPluginService(LiveService.class);
      // 监听事件
      roomChannel.setEventHandler(this::onRoomEvent);
      chatService.setEventHandler(this::onChatEvent);
      liveService.setEventHandler(this::onLiveEvent);
      livePlayerService = liveService.getPlayerService();
      // 进房间
      roomChannel.enterRoom(nick, new Callback<Void>() {
          @Override
          public void onSuccess(Void data) {
              RoomDetail roomDetail = roomChannel.getRoomDetail();
              onEnterRoomSuccess(roomDetail);
          }
          @Override
          public void onError(String errorMsg) {
              onEnterRoomError(errorMsg);
          }
      });
  4. 成功进入房间后进行播放。

    • iOS

      // 进入房间成功后,启动播放
      - (void) onAIRBRoomChannelEvent:(AIRBRoomChannelEvent) event info:(NSDictionary*)info{
          switch (event) {
              case AIRBRoomChannelEventEntered:{
                  //参数prepareWithMediaURL的值为步骤2获取直播详情接口中PlaybackUrl的值。
                  [room.vodPlayer prepareWithMediaURL:@"https://xxxx"];
              }
              break;
              .....
          }
      }
      
      //收到AIRBVodPlayerEventPrepareDone时把播放器view添加父view上;并且把播放控制view添加上;
      - (void) onAIRBVodPlayerEvent:(AIRBVodPlayerEvent)event info:(NSDictionary *)info {
          switch (event) {
              case AIRBVodPlayerEventPrepareDone:{
                  dispatch_async(dispatch_get_main_queue(), ^{
                      
                      [self.view addSubview:self.room.vodPlayer.playerView];
                      [self.view addSubview:self.room.vodPlayer.playerControlView];
                      [self.view sendSubviewToBack:self.room.vodPlayer.playerControlView];
                      [self.view sendSubviewToBack:self.room.vodPlayer.playerView];
                  });
                  break;
            ...
      }
    • Android

      // 进入房间成功后,进行播放
      @Override
      protected void onEnterRoomSuccess(RoomDetail roomDetail) {
           tryPlayLive();
      }
      
      private void tryPlayLive() {
           livePlayerService.setViewContentMode(parseScaleMode());
           livePlayerService.tryPlay(new Callback<View>() {
              @Override
              public void onSuccess(View view) {
                  if (view.getParent() != renderContainer) {
                      renderContainer.addView(view);
                  }
                  if (!liveService.hasLive()) {
                      showToast("当前暂无直播");
                  }
              }
      
              @Override
              public void onError(String errorMsg) {
                  showToast(errorMsg);
              }
          });
      }

互动课堂标准集成(不含UI)

  1. 集成客户端和服务端。请参见接入流程

  2. 服务端调用GetClassDetail - 获取课程详情接口,获取RoomId的值。

  3. 服务端调用GetClassRecord - 获取课程录制信息接口,获取PlaybackUrlMapm3u8类型的值。仅iOS需要获取此参数。

  4. 进入房间。

    • iOS

      id<AIRBRoomChannelProtocol> room = [[AIRBRoomEngine sharedInstance] getRoomChannelWithRoomID:xxx];
      room.delegate = self;
      [room enterRoomWithUserNick:xxx extension:xxx];
    • Android

      // 获取RoomChannel。参数RoomId的值为步骤2获取直播详情接口中RoomId的值。
      Result<RoomChannel> result = RoomEngine.getInstance().getRoomChannel(RoomId);
      if (!result.success) {
          // 注意检查返回结果(登录未成功时,会走到这里)
          showToast(result.errorMsg);
          return;
      }
      
      roomChannel = result.value;
      // 获取插件服务
      chatService = roomChannel.getPluginService(ChatService.class);
      liveService = roomChannel.getPluginService(LiveService.class);
      // 监听事件
      roomChannel.setEventHandler(this::onRoomEvent);
      chatService.setEventHandler(this::onChatEvent);
      liveService.setEventHandler(this::onLiveEvent);
      livePlayerService = liveService.getPlayerService();
      // 进房间
      roomChannel.enterRoom(nick, new Callback<Void>() {
          @Override
          public void onSuccess(Void data) {
              RoomDetail roomDetail = roomChannel.getRoomDetail();
              onEnterRoomSuccess(roomDetail);
          }
          @Override
          public void onError(String errorMsg) {
              onEnterRoomError(errorMsg);
          }
      });
  5. 成功进入房间后进行播放。

    • iOS

      // 进入房间成功后,启动播放
      - (void) onAIRBRoomChannelEvent:(AIRBRoomChannelEvent) event info:(NSDictionary*)info{
          switch (event) {
              case AIRBRoomChannelEventEntered:{
                  //参数prepareWithMediaURL的值为步骤3获取课程录制信息接口中PlaybackUrlMap中m3u8类型的值。
                  [room.vodPlayer prepareWithMediaURL:@"https://xxxx"];
              }
              break;
              .....
          }
      }
      
      //收到AIRBVodPlayerEventPrepareDone时把播放器view添加父view上;并且把播放控制view添加上;
      - (void) onAIRBVodPlayerEvent:(AIRBVodPlayerEvent)event info:(NSDictionary *)info {
          switch (event) {
              case AIRBVodPlayerEventPrepareDone:{
                  dispatch_async(dispatch_get_main_queue(), ^{
                      
                      [self.view addSubview:self.room.vodPlayer.playerView];
                      [self.view addSubview:self.room.vodPlayer.playerControlView];
                      [self.view sendSubviewToBack:self.room.vodPlayer.playerControlView];
                      [self.view sendSubviewToBack:self.room.vodPlayer.playerView];
                  });
                  break;
            ...
      }
    • Android

      // 进入房间成功后,进行播放
      @Override
      protected void onEnterRoomSuccess(RoomDetail roomDetail) {
           tryPlayLive();
      }
      
      private void tryPlayLive() {
           livePlayerService.setViewContentMode(parseScaleMode());
           livePlayerService.tryPlay(new Callback<View>() {
              @Override
              public void onSuccess(View view) {
                  if (view.getParent() != renderContainer) {
                      renderContainer.addView(view);
                  }
                  if (!liveService.hasLive()) {
                      showToast("当前暂无直播");
                  }
              }
      
              @Override
              public void onError(String errorMsg) {
                  showToast(errorMsg);
              }
          });
      }