产品文档 直播技术文档 iOS 直播 UI SDK

iOS 直播 UI SDK

git 链接:http://git.baijiashilian.com/open-ios/BJLiveUI.git

App 下载:https://itunes.apple.com/app/id1146697098?ls=1&mt=8

功能简介

直播 UI SDK 在直播 Core SDK 的基础上提供了一个针对教育场景下师生互动模板,主要包括师生一对一音视频互动,多人音视频互动,课件展示、文字聊天等功能,包含一套完整的直播间 UI,集成工作量小,便于快速接入、开发。

1. 直播相关功能

参考 iOS 直播 Core SDK

2. UI

直播间主界面 采集视图 用于显示摄像头采集到的视频
播放视图 用于显示其他发言用户的视频
课件视图 用于显示白板、课件、画笔
聊天视图 用于发送聊天消息、显示直播间内的聊天消息列表
用户列表 用于显示直播间内的所有用户
设置面板 用于设置音视频、课件等功能模块的相关参数
添加自定义 UI 自定义按钮 将自定义按钮添加到直播间主界面,SDK 提供相应的点击回调方法
自定义弹窗 点击自定义按钮之后显示在直播间主界面的弹窗,可自定义样式

Demo

1. Demo 源文件

git 上下载最新的 SDK,demo 源文件在 BJLiveUI/demo/BJLiveUI 文件夹中。

2. Demo 编译、运行

  • 在 demo 的工程目录下执行 pod install

  • 使用 Xcode 打开 demo 文件夹下的 BJLiveUI.xcworkspace 文件

  • 选择运行设备:模拟器运行 demo 时无法采集音视频;真机运行时,需要设置好 development team

picture

  • 使用 Xcode 运行 demo

3. Demo 体验

  • demo 运行成功后将进入如下登录界面,需要输入参加码及昵称才能进入教室。其中参加码通过使用 百家云后台 或者 API 创建一个教室获得。

    登陆界面

  • 教室加载成功之后进入如下主界面,包含课件、采集、播放、聊天列表等部分。

    教室界面

采集

引入 SDK

SDK 支持 iOS 8.0 及以上 的系统,iPhone、iPad 等设备,集成 1.0.0 或以上版本的 SDK 要求 Xcode 的版本至少为 9.0,它会依赖一些第三方库,建议使用 CocoaPods 方式引入:

  • Podfile 设置 source
source 'https://github.com/CocoaPods/Specs.git'
source 'http://git.baijiashilian.com/open-ios/specs.git'
  • Podfile 中引入 BJLiveUI
pod 'BJLiveUI', '~> 1.0'
  • 在工程目录下执行 pod install

版本升级

版本号格式为 大版本.中版本.小版本[-alpha(测试版本)/beta(预览版本)]

  • 测试版本和预览版本可能很不稳定,请勿随意尝试;

  • 小版本升级只改 BUG、UI 样式优化,不会影响功能;

  • 中版本升级、修改功能,更新 UI 风格、布局,会新增 API、标记 API 即将废弃,但不会导致现有 API 不可用;

  • 大版本任何变化都是有可能的;

首次集成建议选择最新正式版本(版本号中不带有 alphabeta 字样),版本升级后请仔细阅读 ChangeLog,指定版本的方式有一下几种:

  • 固执型:pod update 时不会做任何升级,但可能无法享受到最新的 BUG 修复,建议用于 0.x 版本;
pod 'BJLiveUI', '1.0.0'
  • 稳妥型(推荐):pod update 时只会升级到更稳定的小版本,而不会升级中版本和大版本,不会影响功能和产品特性,升级后需要 适当测试
pod 'BJLiveUI', '~> 1.0.0'
  • 积极型:pod update 时会升级中版本,但不会升级大版本,及时优化,但不会导致编译出错不可用,升级后需要 全面测试
pod 'BJLiveUI', '~> 1.0'
  • 激进型(不推荐):pod update 时会升级大版本,可能导致编译出错、必须调整代码,升级后需要 严格测试
pod 'BJLiveUI'

工程设置

  • 隐私权限:在 Info.plist 中添加麦克风、摄像头、相册访问描述
Privacy - Microphone Usage Description       用于语音上课、发言
Privacy - Camera Usage Description           用于视频上课、发言,拍照传课件、聊天发图
Privacy - Photo Library Usage Description    用于上传课件、聊天发图

picture

  • 后台任务(打开这一选项之后,在 App 提交审核时,强烈建议录制一个视频,说明 App 确实用到了后台播放,否则审核很有可能不通过): 在 Project > Target > Capabilities 中打开 Background Modes 开关,选中 Audio,Airplay, and Picture in Picture

picture

Hello World

可参考 demo 中的 BJLoginViewController

集成的整体流程如下:

  • 在自己定义的相关文件中定义一个 BJLRoomViewController 的属性 roomVIewController,用于管理教室视图
  • 使用教室相关信息(通过百家云后台或者 API 创建教室后获取)将 roomVIewController 属性实例化
  • 为教室的进入、退出等事件添加监听和相应的回调处理,回调处理可以根据自身需求进行自定义,为教室视图的管理做好准备
  • (可选)添加需要显示在教室主界面的自定义按钮,设置好点击按钮之后的响应回调和需要显示的自定义弹窗
  • roomVIewControllerview 显示出来(可使用 present、addChildViewController 等方式)

1. 准备创建教室

  • 引入头文件
#import <BJLiveUI/BJLiveUI.h>
  • 定义 roomViewController
@property (nonatomic) BJLRoomViewController *roomViewController;

2. 创建、进入教室

可通过教室 ID 或参加码两种方式进行

/**
通过 ID 创建教室
@param roomID          教室 ID
@param user            用户
@param apiSign         API sign
@return                教室
*/
self.roomViewController = [BJLRoomViewController instanceWithID:roomID
                                                        apiSign:apiSign
                                                           user:user];
  • 参加码方式:参加码同样通过使用 百家云后台 或者 API 创建一个教室获得
/**
通过参加码创建教室
@param roomSecret      教室参加码
@param userName        用户名
@param userAvatar      用户头像 URL
@return                教室
*/
self.roomViewController = [BJLRoomViewController instanceWithSecret:roomSecret
                                                           userName:userName
                                                         userAvatar:userAvatar];
  • 进入教室界面
[self presentViewController:self.roomViewController animated:YES completion:nil];

3. 监听进出教室事件

进出教室事件的监听可以即时获取教室的动态变化,便于添加自定义的回调处理。监听通过两种方式实现:BJLRoomViewControllerDelegate;监听 BJLRoomViewController 的方法调用。

3.1 BJLRoomViewControllerDelegate

  • 设置 delegate
self.roomViewController.delegate = self;
  • BJLRoomViewControllerDelegate 方法
/** 进入教室 - 成功 */
- (void)roomViewControllerEnterRoomSuccess:(BJLRoomViewController *)roomViewController {
    NSLog(@"[%@ %@]", NSStringFromSelector(_cmd), roomViewController);
}
/** 进入教室 - 失败 */
- (void)roomViewController:(BJLRoomViewController *)roomViewController
enterRoomFailureWithError:(BJLError *)error {
    NSLog(@"[%@ %@, %@]", NSStringFromSelector(_cmd), roomViewController, error);
}
/**
即将退出教室 - 正常/异常
正常退出 `error` 为 `nil`,否则为异常退出
参考 `BJLErrorCode` */
- (void)roomViewController:(BJLRoomViewController *)roomViewController
willExitWithError:(nullable BJLError *)error {
    NSLog(@"[%@ %@, %@]", NSStringFromSelector(_cmd), roomViewController, error);
}
/**
 退出教室 - 正常/异常
 正常退出 `error` 为 `nil`,否则为异常退出
 参考 `BJLErrorCode` */
- (void)roomViewController:(BJLRoomViewController *)roomViewController
          didExitWithError:(nullable BJLError *)error {
    NSLog(@"[%@ %@, %@]", NSStringFromSelector(_cmd), roomViewController, error);
}

3.2 监听 BJLRoomViewController 的方法调用

  • 进入教室成功
[self bjl_observe:BJLMakeMethod(self.roomViewController, roomViewControllerEnterRoomSuccess:)
         observer:^BOOL(BJLRoomViewController *roomVC) {
             NSLog(@"roomViewControllerEnterRoomSuccess");
             return YES;
         }];
  • 进入教室失败
[self bjl_observe:BJLMakeMethod(self.roomViewController, roomViewController:enterRoomFailureWithError:)
         observer:^BOOL(BJLRoomViewController *roomVC, BJLError *error) {
             NSLog(@"roomViewControllerEnterRoomFailureWithError:%@", error);
             return YES;
         }];
  • 即将退出教室
[self bjl_observe:BJLMakeMethod(roomViewController, roomViewController:willExitWithError:)
         observer:^BOOL(BJLRoomViewController *roomVC, BJLError *error) {
             if (error) {
                 NSLog(@"roomViewControllerWillExitWithError:%@", error);
             }
             else {
                 NSLog(@"roomViewControllerWillExit");
             }
             return YES;
         }];
  • 退出教室
[self bjl_observe:BJLMakeMethod(roomViewController, roomViewController:didExitWithError:)
         observer:^BOOL(BJLRoomViewController *roomVC, BJLError *error) {
             if (error) {
                 NSLog(@"roomViewControllerDidExitWithError:%@", error);
             }
             else {
                 NSLog(@"roomViewControllerDidExit");
             }
             return YES;
         }];

4. 添加自定义按钮、弹窗

SDK 的 UI 支持一定程度上的自定义,可以向教室主界面添加自定义按钮(如分享按钮等),通过 BJLRoomViewControllerDelegate 设置好按钮的点击回调和响应弹窗,弹窗的样式也可以通过 BJLOverlayContainerController 的相关方法进行设置

4.1 添加按钮

将自定义按钮数组添加到教室主界面。示例代码中 self.shareButtonself.praiseButton 为自定义的按钮

[self.roomViewController setCustomButtons:@[self.shareButton, self.praiseButton]];

4.2 按钮点击回调

自定义按钮的回调方法通过 BJLRoomViewControllerDelegateroomViewController:viewControllerToShowForCustomButton:方法实现

4.2.1 设置 delegate
self.roomViewController.delegate = self;
4.2.2 点击回调方法

此方法返回的 viewController 可以像用户列表一样显示在教室内。didMoveToParentViewController: 后 viewController 的 bjl_overlayContainerController 属性可用,通过该属性可以设置统一样式的标题、导航栏按钮、底部按钮、以及关闭等,参考 BJLOverlayContainerController

- (nullable UIViewController *)roomViewController:(BJLRoomViewController *)roomViewController
              viewControllerToShowForCustomButton:(UIButton *)button {
    if (roomViewController == self.roomViewController) {
        if (button == self.shareButton) {
            // shareButton 被点击,返回自定义的 shareViewController,将显示在教室内
            return self.shareViewController;
        }
        else if (button == self.praiseButton) {
            // praiseButton 被点击,返回自定义的 praiseViewController,将显示在教室内
            return self.praiseViewController;
        }
    }
    return nil;
}
4.2.3 使用 BJLOverlayContainerController 的相关方法设置自定义弹窗样式

上述回调方法 roomViewController:viewControllerToShowForCustomButton: 返回的自定义 viewController,在 didMoveToParentViewController: 方法执行后,可使用 bjl_overlayContainerController 属性设置样式。这里以上一步添加的 self.shareViewController 为例

  • 重写自定义 self.shareViewController 的 didMoveToParentViewController: 方法
- (void)didMoveToParentViewController:(UIViewController *)parent {
    [super didMoveToParentViewController:parent];
    // 使用 BJLOverlayContainerController 的相关方法添加自定义样式设置
}
  • 设置标题
[self.shareViewController.bjl_overlayContainerController updateTitle:@"分享"];
  • 设置导航栏按钮,从右到左排列
[self.shareViewController.bjl_overlayContainerController updateRightButtons:self.rightButtons];
  • 设置底部视图
[self.shareViewController.bjl_overlayContainerController updateFooterView:self.footerView];
  • 隐藏
[self.shareViewController.bjl_overlayContainerController hide];

5. 退出教室

[self.roomViewController exit];

附录

1. 变更记录

2. 参考源文件