本文介绍iOS端如何在低代码集成(含UI)方式接入的互动直播默认UI上添加自定义的UI和控制逻辑。

背景信息

低代码集成(含UI)接入的互动直播iOS端支持以下自定义功能:

前提条件

您已经完成了iOS端集成

自定义主播端起播页面

在主播端,如果想要改变默认的起播页面,可以在ASLRBLiveRoomViewController的属性livePrestartCustomizedViewHolder添加自定义UI控件。

以下代码演示了如何在livePrestartCustomizedViewHolder添加自定义的直播标题输入开播按钮摄像头切换按钮打开美颜按钮
说明livePrestartCustomizedViewHolder上添加自定义UI的逻辑必须在push当前ASLRBLiveRoomViewController前执行。
示例代码
// 这里的liveRoomVC即已经初始化好的ASLRBLiveRoomViewController实例
[liveRoom.livePrestartCustomizedViewHolder addSubview:({
    UITextField* textField = [[UITextField alloc]initWithFrame:CGRectMake(100, 300, 200, 60)];
    textField.placeholder = @"直播标题";
    textField.backgroundColor = [UIColor colorWithWhite:1 alpha:0.7];
    textField.layer.masksToBounds = YES;
    textField.layer.cornerRadius = 4;
    self.textField = textField;
    textField;
})];

[liveRoomVC.livePrestartCustomizedViewHolder addSubview:({
    UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(100, 400, 200, 60)];
    button.backgroundColor = [UIColor redColor];
    [button setTitle:@"开播" forState:UIControlStateNormal];
    [button addTarget:self action:@selector(startLive) forControlEvents:UIControlEventTouchUpInside];
    button;
})];

[liveRoomVC.livePrestartCustomizedViewHolder addSubview:({
    UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(100, 520, 200, 60)];
    button.backgroundColor = [UIColor greenColor];
    [button setTitle:@"摄像头切换" forState:UIControlStateNormal];
    [button addTarget:vc action:@selector(switchCamera) forControlEvents:UIControlEventTouchUpInside];
    button;
})];

[liveRoomVC.livePrestartCustomizedViewHolder addSubview:({
    UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(100, 640, 200, 60)];
    button.backgroundColor = [UIColor greenColor];
    [button setTitle:@"打开美颜面板" forState:UIControlStateNormal];
    [button addTarget:vc action:@selector(showBeautyPanel) forControlEvents:UIControlEventTouchUpInside];
    button;
})];

#pragma -mark prestart UIButton selectos
- (void)startLive{
    ASLRBLiveInitConfig* config = [[ASLRBLiveInitConfig alloc] init];
    
    config.liveBusinessInfo.liveTitle = self.textField.text; //写入直播标题
    config.liveBusinessInfo.liveCoverURL = @"xxxxxx"; // 透传直播封面地址
    config.liveBusinessInfo.liveCustomData = @{@"xxx" : @"xxx"}; // 透传直播自定义内容
    
    [liveRoomVC startLiveAndUpdateConfig:config];
}

- (void)switchCamera {
    [liveRoomVC switchCamera];
}

- (void)showBeautyPanel {
    [liveRoomVC showBeautyPanel];
}

自定义主播端和观众端直播间页面

在主播端和观众端的直播间页面,如果想要自定义UI,可根据以下图表展示的自定义区域及提示信息操作。

iOS低代码互动直播自定义主播间UI
序号 区域 自定义UI
左上自定义区域
  • 如果采用默认实现,可以使用liveInfoViewHolder,也可以修改liveInfoViewHolder
  • 如果需要完全自定义左上角区域,可以在upperLeftCustomizedViewHolder中添加自定义UI控件。
  • 这里需要显示的直播间人数、点赞数可以通过监听ASLRBCommonEventLiveDataUpdated事件获取。
右上自定义区域 如果需要完全自定义右上角区域,可以在upperRightCustomizedViewHolder中添加自定义UI控件。
中心自定义区域
  • 如果需要在头像之下、弹幕区域之上添加自定义UI控件,可在middleCustomizedVIewHolder上添加。
  • 如需隐藏默认的观众列表button、公告button、加载中UI、主播推流状态UI等,请参考ASLRBLiveRoomMiddleViewsConfig.h的说明。
弹幕区域 弹幕区域的自定义请参考直播弹幕相关自定义配置
底部自定义区域
  • 如果采用默认实现,可以使用bottomViewsHolder,也可以修改bottomViewsHolder
  • 如果需要完全自定义底部区域,可以在bottomCustomizedViewHolder中添加自定义UI控件。

直播弹幕相关自定义配置

  • 直播弹幕view,即liveCommentView支持丰富多样的样式自定义,具体如下。更多的自定义能力,详见ASLRBLiveCommentViewConfig头文件说明。
    ASLRBLiveInitConfig* config = [[ASLRBLiveInitConfig alloc] init];
    
    //进入直播间时是否展示历史弹幕以及展示的条数,默认不展示
    config.liveCommentViewsConfig.countOfHistoryCommentsWhenEntered = 100;
    
    //修改进入直播间弹幕区展示的公告内容, 默认是 "欢迎大家来到直播间!直播间内严禁出现违法违规、低俗色情、吸烟酗酒等内容,若有违规行为请及时举报。"
    config.liveCommentViewsConfig.liveCommentWarningNotice = @"这是一个新的直播间公告说明";
    
    //修改直播间弹幕区展示的公告文本的颜色,默认"#12DBE6"
    config.liveCommentViewsConfig.liveCommentWarningNoticeTextColor = [UIColor redColor];
    
    //修改直播弹幕发送人昵称的文本的统一颜色,默认是根据发送人nick hash出的随机颜色
    config.liveCommentViewsConfig.defaultLiveCommentSenderColor = [UIColor redColor];
                            
  • 监听直播弹幕view的手势识别结果。
    // 这里的liveRoomVC即已经初始化好的ASLRBLiveRoomViewController实例
    
    //设置delegate
    liveRoomVC.liveCommentView.delegate = self;
    
    //实现以下回调方法
    /**
     * 直播评论区某条评论长按事件回调
     */
    - (void) onASLRBLiveCommentViewCommentLongPressed:(ASLRBLiveCommentModel*)comment;
    /**
     * 直播评论区某条评论单击事件回调
     */
    - (void) onASLRBLiveCommentViewCommentTapped:(ASLRBLiveCommentModel*)comment;
  • 监听并修改直播弹幕文本内容。
    // 这里的liveRoomVC即已经初始化好的ASLRBLiveRoomViewController实例
    liveRoomVC.liveCommentView.delegate = self;
    
    - (void) onASLRBLiveCommentJustAboutToPresent:(ASLRBLiveCommentModel*)comment {
        
        // 特定修改某个nick的内容和颜色
        if ([comment.senderNick.string isEqualToString:@"xxx"]) {
            comment.sentContent = @"xxxxxxx"; //修改弹幕内容
            comment.senderNickColor = [UIColor greenColor]; //
        }
        
        // 特定修改包含某些敏感词的弹幕内容
        if ([comment.sentContent isEqualToString:@"fxxk"] || [comment.sentContent isEqualToString:@"他xxx嘛"]) {
            comment.sentContent = @"***"; //修改弹幕内容,对敏感词操作脱敏
        }
    }
                            

添加自定义商品卡片

只要在bottomCustomizedViewHolder(或bottomViewsHolder)和liveCommentView之间插入自定义view,就能实现插入商品卡片。

示例代码
//第一步,先自定义一个商品卡片view并以bottomCustomizedViewHolder的上边沿作为商品卡片的下边边界
UIView* goodsCardView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"直播-商品卡片"]];

//第二步,把商品卡片view添加到liveRoomVC的view上作为子view
[liveRoomVC.view addSubview:goodsCardView];
[goodsCardView mas_makeConstraints:^(MASConstraintMaker * _Nonnull make) {
make.bottom.equalTo(liveRoomVC.bottomCustomizedViewHolder.mas_top);
     make.left.equalTo(liveRoomVC.view).with.offset(14);
     make.height.mas_equalTo(80);
     make.width.mas_equalTo(260);
}];
                
//第三步,把直播弹幕liveCommentView往上移动,宽、高、左边沿坐标保持不变,如下
[liveRoomVC.liveCommentView mas_remakeConstraints:^(MASConstraintMaker * _Nonnull make) {
   make.left.equalTo(self.liveRoomVC.view).with.offset(liveRoomVC.liveCommentView.frame.origin.x);
   make.bottom.equalTo(goodsCardView.mas_top);
   make.height.mas_equalTo(liveRoomVC.liveCommentView.bounds.size.height);
   make.width.mas_equalTo(liveRoomVC.liveCommentView.bounds.size.width);
}];

添加可唤起和收回的自定义UIViewController

ASLRBLiveRoomViewController内部有对系统UIViewController的扩展,支持以非常便捷的方式添加自定义UIViewController。以下代码演示了在直播liveRoomVC上从底部向上展示一个自定义的UIViewController

示例代码
//这里的liveRoomVC即已经初始化好的ASLRBLiveRoomViewController实例
CGRect frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height - [UIScreen mainScreen].bounds.size.width * 1.2, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.width * 1.2);

UIViewController* shopWindowVC = [[UIViewController alloc] init];
[liveRoomVC presentChildViewController:shopWindowVC animated:YES presentedFrame:frame direction:AIRBDViewControllerPresentFromBottom];
liveRoomVC.presentedChildViewController = shopWindowVC;

//默认情况下,只要手动点击当前没有被shopWindowVC覆盖的liveRoomVC区域,shopWindowVC就可以自动收起,但可以使用以下方法来主动收起
[liveRoomVC dismissChildViewController:shopWindowVC animated:YES];

观众端小窗播放相关

观众端可以一键开启小窗播放能力(1.7.0版本及以上支持),可以配合在直播间页面跳转到其他页面需要同时看直播的时候使用,代码如下

  • 在直播间唤起其他页面并进入小窗模式播放。
    //这里的liveRoomVC即已经初始化好的ASLRBLiveRoomViewController实例
    [liveRoomVC enterFloatingMode:YES]; //进入小窗模式
    
    [liveRoomVC presentViewController:xxxViewController]; // 跳转到某个其他ViewController
  • 在小窗模式下,点击小窗从而退出小窗模式,即从当前页面回到直播间页面。
    //这里的liveRoomVC即已经初始化好的ASLRBLiveRoomViewController实例
    - (void)onASLRBLiveRoomEventInViewController:(nonnull ASLRBLiveRoomViewController *)liveRoomVC liveRoomEvent:(ASLRBEvent)liveRoomEvent info:(nonnull NSDictionary *)info {
       switch (liveRoomEvent) {
            case ASLRBAudienceEventFloatingPlayWindowTapped:{
                 // 跳转到当前ASLRBLiveRoomViewController实例页面
             }
            break;
        ...
    }
  • 在小窗模式下,调用代码退出小窗模式。
    //这里的liveRoomVC即已经初始化好的ASLRBLiveRoomViewController实例
    [liveRoomVC enterFloatingMode:NO]; //退出小窗模式
  • 小窗模式下,切后台再回到前台会隐藏小窗,如果需要关闭这个功能,即小窗模式下切后台再回到前台后继续保持小窗,需要主动进行以下配置。
    //这里的liveRoomVC即已经初始化好的ASLRBLiveRoomViewController实例
    liveRoomVC.floatingPlayWindow.disappearAfterResignActive = NO;
说明 这里的小窗模式不是iOS系统级浮动小窗模式,即小窗不会出现iOS系统桌面上。

主播端开启美颜

主播端美颜是内部已经默认实现了的一个ViewController,可以一键打开,需要版本1.7.0及以上。

//这里的liveRoomVC即已经初始化好的ASLRBLiveRoomViewController实例
[liveRoomVC showBeautyPanel]; //打开美颜, 关闭美颜只要手动触动美颜VC之外的区域即可。

//另外,美颜面板的打开和收起,会自动触发以下事件
ASLRBCommonEventFaceBeautyViewControllerWillAppear  // 美颜面板打开事件(2.0.0及之后版本,如果控制台未主动开启美颜,则不会触发此事件)
ASLRBCommonEventFaceBeautyViewControllerWillDisappear // 美颜面板收起
说明 从2.0.0版本开始,美颜功能默认关闭,如需打开,需要在控制台应用列表中找到具体应用,在其应用配置中的直播配置->推流配置中打开。

主播端开启横屏样式

主播端可以在打开直播间时开启横屏样式(2.0.0版本及以上支持,横屏下暂不支持美颜),方法如下:

__weak typeof(self) weakSelf = self;
[[ASLRBLiveRoomManager sharedInstance] createLiveRoomVCWithConfig:({
    ASLRBLiveInitConfig* config = [[ASLRBLiveInitConfig alloc] init];
    config.liveID = @"<您的liveID>"; //低代码集成场景下主播侧liveID非必传,为空时内部会自动创建新直播
    config.role = ASLRBUserRoleAnchor; //主播侧必填ASLRBUserRoleAnchor
    config.pushOrientation = 1; //开启横屏样式
    config;
}) onSuccess:^(ASLRBLiveRoomViewController * _Nonnull liveRoomVC) {
    [weakSelf setupLiveRoomViewController:liveRoomVC];
} onFailure:^(NSString * _Nonnull errorMessage) {
    NSLog(@"获取直播ViewController失败:%@", errorMessage);
}];

观众端打开横屏样式

观众端可以打开横屏样式,方法如下:

//这里的liveRoomVC即已经初始化好的ASLRBLiveRoomViewController实例
//允许横竖屏切换
liveRoomVC.enableViewRotation = YES;
//可以使用以下接口切换横竖屏,也可以旋转设备自动切换横竖屏
[liveRoomVC switchViewOrientation];

//配置好开关后,每当切换横竖屏过程中,都会触发以下事件,可以通过以下方法来监听ASLRBCommonEventViewOrientationChanged获取通知
//具体旋转后的屏幕方法可以在info字段中看到

-(void)onASLRBLiveRoomEventInViewController:liveEvent:info:
            

观众端开启后台播放模式

默认情况下,观众端进入后台会停止播放,如果需要开启后台播放,首先需要做以下设置。

ASLRBLiveInitConfig* config = [[ASLRBLiveInitConfig alloc]init];
config.enableBackgroundLivePlaying = YES;
然后,需要打开当前应用的后台模式,如下图所示。iOS后台模式