iOS 访客端demo集成(含UI库)

代码下载

您可以通过以下两种方式获取到源代码:

欢迎大家提交PR改进和修复HelpDeskUI中的问题。

运行 CustomerSystem-ios 工程

客服云sdk 及 Demo 下载 下载 iOS SDK 压缩包,然后解压。解压后在 kefu-iossdk-vx.x.x 文件夹下有一个kefu-ios-demo文件夹,即为CustomerSystem-ios的工程目录。 终端cd到kefu-ios-demo的podfile目录下,终端执行pod install命令,等待下载完所有的pod依赖库,即可打开CustomerSystem-ios.xcworkspace,运行kefu-ios-demo进行自定义再次开发。

工程配置

确保以下内容工程都配置上 才能正确使用 环信UI库

1、使用环信UI库 请确保工程已经添加 客服sdk相关依赖库

2、info.plist 配置 字体图标

  • 视频通话界面图片采用字体图标方式 集成时需要把General文件夹下的字体图标库加入到工程中

3、在工程info.plist文件中,增加隐私权限:

  • Privacy - Photo Library Usage Description 需要访问您的相册
  • Privacy - Microphone Usage Description 需要访问您的麦克风
  • Privacy - Camera Usage Description 需要访问您的摄像机
  • Privacy - Location Always Usage Description 发送定位消息的时候需要访问您的位置信息
  • Privacy - Location When In Use Usage Description 发送定位消息的时候需要访问您的位置信息

环信UI库

环信UI库介绍主要分为两种 一种是基础会话聊天UI库 一种是音视频UI库:

* HelpDeskUI  ——  基础会话聊天UI库 
* HDCallUIKit —— 音视频UI库 (基于声网音视频服务,使用环信 IM 作为信令通道的开源音视频模块)

1、 HelpDeskUI

1.1、 HelpDeskUI目录介绍

  • 3rdparty——ui依赖的第三方库 部分基于pod集成
  • ViewController——存放所有页面的控制器类
  • Views—— 存放界面的view
  • Helper—— 封装发送各个类型消息的工具类
  • Model—— 消息模型解析模块
  • Util—— 工具类模块

1.2、 HelpDeskUI集成

1.2.1集成基础会话聊天UI库时只需要把demo中HelpDeskUI文件夹拖入到自己项目中

1.2.2 在pch文件或全局.h文件中添加如下代码

#ifdef __OBJC__
    #import <HelpDesk/HelpDesk.h>
   #import "HelpDeskUI.h"
   #endif 

2、 音视频UI库

2.1、音视频UI库主要分为两种 一种是融合视频(在线聊天中视频) 一种是独立视频(VEC视频) 都在HDCallUIKit下

HDCallUIKit 目录介绍:

  • General —— 通用基础工具类 两种视频都依赖这个文件下的类
  • Online —— 融合视频(在线聊天中视频)
  • VEC —— 独立视频(VEC视频)。

其中Online 和 VEC 都是独立的代码。相互不依赖 可以灵活插拔 根据需求添加对应音视频UI库

Online UI库目录介绍

  • Fastboard —— 互动白板相关代码类
  • Manager —— 视频中的管理类
    • HDAgoraCallManager主要类 对声网sdk进行了封装 详细请查看这个类的头文件
  • ViewController —— 视频界面相关类
    • HDCallViewController 视频界面主要入口类 这个类有一个需要注意的地方 这个类包含了白板界面相关的代码 如果没有集成白板相关代码 请一定要在这个类的头文件中找到 如下代码 进行注释 即关闭 白板功能 要不然 会影响编译 因为ui库中默认都是所以功能开启的
// ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️如果不使用白板功能请一定要注释到以下的代码 ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️
//#define OnlineWhiteBoard   1
// ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️如果不使用白板功能请一定要注释到以上的代码 ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️

  • Views —— 视频界面需要的相关view

Online 基本代码使用示例

  • 访客发起视频
// 如果是 融合视频 和 独立视频 共同使用 需要 设置isVecVideo 这个属性  发起的时候 如果是 融合视频 设置为no 如果是独立视频(vec)设置为yes
    [HDClient sharedClient].callManager.isVecVideo = NO;
    // 这个是sdk 封装了发送视频请求的信令消息 
    HDMessage *message = [HDClient.sharedClient.callManager creteVideoInviteMessageWithImId:@“会话id” content: @“请求视频通话”)];
    发送消息
     [[HDClient sharedClient].chatManager sendMessage: message
                                            progress:nil
                                          completion:^(HDMessage *message, HDError *error)
     {
    }];
    //视频界面入口
    [[HDCallViewController sharedManager] showViewWithKeyCenter:nil withType:HDVideoCallDirectionSend];
    [HDCallViewController sharedManager].hangUpCallback = ^(HDCallViewController * _Nonnull callVC, NSString * _Nonnull timeStr) {
        [[HDCallViewController sharedManager]  removeView];

        [[HDCallViewController sharedManager] removeSharedManager];
    };
  • 访客收到接听数据
// 先添加用于语音呼入的监听 onCallReceivedNickName:
    [HDClient.sharedClient.callManager addDelegate:self delegateQueue:nil];
    // 收到监听通知
   #pragma mark - HDCallManagerDelegate
- (void)onCallReceivedParameter:(HDKeyCenter *)keyCenter withMessage:(HDMessage *)message{
        //online
        [[HDCallViewController sharedManager] showViewWithKeyCenter:keyCenter withType:HDVideoCallDirectionReceive];
        [HDCallViewController sharedManager].hangUpCallback = ^(HDCallViewController * _Nonnull callVC, NSString * _Nonnull timeStr) {

            [[HDCallViewController sharedManager]  removeView];
            [[HDCallViewController sharedManager] removeSharedManager];
           };
}
   目前在线视频通知和vec视频通知是一个通知 如果是 融合视频 和 独立视频 共同使用 请参考 下边 共用通知处理方式
 

VEC UI库目录介绍 注意 所有vec相关的代码类都添加了vec 标识以便区分使用功能

  • VEC_Fastboard —— 互动白板相关代码类
  • Manager —— 视频中的管理类
    • HDVECAgoraCallManager主要类 对声网sdk进行了封装 详细请查看这个类的头文件
  • ViewController —— 视频界面相关类
    • HDVECCallViewController 视频界面主要入口类 这个类有一个需要注意的地方 这个类包含了白板界面相关的代码 如果没有集成白板相关代码 请一定要在这个类的头文件中找到 如下代码 进行注释 即关闭 白板功能 要不然 会影响编译 因为ui库中默认都是所以功能开启的
// ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️如果不使用白板功能请一定要注释到以下的代码 ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️
//#define HDVECWhiteBoard   1
// ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️如果不使用白板功能请一定要注释到以上的代码 ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️

  • Views —— 视频界面需要的相关view

VEC 基本代码使用示例

  • 访客发起视频
// 如果是 融合视频 和 独立视频 共同使用 需要 设置isVecVideo 这个属性  发起的时候 如果是 融合视频 设置为no 如果是独立视频(vec)设置为yes
       [HDClient sharedClient].callManager.isVecVideo = YES;
       // vec_initSettingWithCompletion 这个方法是获取界面一些后台配置接口 
       [[HDVECAgoraCallManager shareInstance] vec_initSettingWithCompletion:^(id  responseObject, HDError * _Nonnull error) {
                    dispatch_async(dispatch_get_main_queue(), ^{
                        [[HDVECCallViewController sharedManager] showViewWithKeyCenter:nil withType:HDVECDirectionSend withVisitornickName:lgM.nickname];
                        [HDVECCallViewController sharedManager].hangUpVideoCallback = ^(HDVECCallViewController * _Nonnull callVC, NSString * _Nonnull timeStr) {
                            [[HDVECCallViewController sharedManager]  removeView];

                            [[HDVECCallViewController sharedManager] removeSharedManager];

                        };
                    });
                }];
  • 访客收到坐席回呼弹起访客界面
// 先添加用于语音呼入的监听 onCallReceivedNickName:
    [HDClient.sharedClient.callManager addDelegate:self delegateQueue:nil];
    // 收到监听通知
   #pragma mark - HDCallManagerDelegate
- (void)onCallReceivedParameter:(HDKeyCenter *)keyCenter withMessage:(HDMessage *)message{
       
           // 这个是 坐席取消回呼的判断 
           if (keyCenter && keyCenter.isAgentCancelCallbackReceive) {
            [[HDVECCallViewController sharedManager]  removeView];

            [[HDVECCallViewController sharedManager] removeSharedManager];
        }else{
         // 收到邀请回来的数据 进入视频 界面
        [[HDVECCallViewController sharedManager] showViewWithKeyCenter:keyCenter withType:HDVECDirectionReceive withVisitornickName:keyCenter.visitorNickName];
        [HDVECCallViewController sharedManager].hangUpVideoCallback = ^(HDVECCallViewController * _Nonnull callVC, NSString * _Nonnull timeStr) {
            [[HDVECCallViewController sharedManager]  removeView];

            [[HDVECCallViewController sharedManager] removeSharedManager];

        };
        }
}

⚠️⚠️⚠️⚠️⚠️⚠️⚠️注意 如果是 融合视频 和 独立视频 共同使用 需要根据sdk 中的isVecVideo 这个属性 进行判断是融合视频还是vec独立视频 代码如下⚠️⚠️⚠️⚠️⚠️

// 先添加用于语音呼入的监听 onCallReceivedNickName:
 [HDClient.sharedClient.callManager addDelegate:self delegateQueue:nil];
 #pragma mark - HDCallManagerDelegate
- (void)onCallReceivedParameter:(HDKeyCenter *)keyCenter withMessage:(HDMessage *)message{
    
    [HDLog logI:@"================vec1.2=====onCallReceivedParameter= %@",[NSThread currentThread] ];
    if ([HDClient sharedClient].callManager.isVecVideo) {
       
        [HDLog logI:@"================vec1.2=====收到坐席回呼cmd消息: "];
        
        if (keyCenter && keyCenter.isAgentCancelCallbackReceive) {
            [[HDVECCallViewController sharedManager]  removeView];

            [[HDVECCallViewController sharedManager] removeSharedManager];
        }else{
        
        [[HDVECCallViewController sharedManager] showViewWithKeyCenter:keyCenter withType:HDVECDirectionReceive withVisitornickName:keyCenter.visitorNickName];
        [HDVECCallViewController sharedManager].hangUpVideoCallback = ^(HDVECCallViewController * _Nonnull callVC, NSString * _Nonnull timeStr) {
            [[HDVECCallViewController sharedManager]  removeView];

            [[HDVECCallViewController sharedManager] removeSharedManager];

        };
        }
    }else{
        
        
        [HDLog logI:@"================vec1.1=====收到坐席回呼cmd消息: "];
        //online
        [[HDCallViewController sharedManager] showViewWithKeyCenter:keyCenter withType:HDVideoCallDirectionReceive];
        [HDCallViewController sharedManager].hangUpCallback = ^(HDCallViewController * _Nonnull callVC, NSString * _Nonnull timeStr) {

            [[HDCallViewController sharedManager]  removeView];
            [[HDCallViewController sharedManager] removeSharedManager];

           };
    }
    
}

集成pod库

#  环信环信UI库 依赖的第三方库 
* pod 'MBProgressHUD',
* pod 'Masonry'
* pod 'SDWebImage'
#音视频UI库 依赖的声网sdk
* pod 'AgoraRtcEngine_iOS','3.6.1' 
#音视频UI库 依赖的白板sdk  需要注意 如果音视频UI库 中没有涉及白板业务 不需要 导入此库
pod 'Fastboard', :git => 'https://github.com/netless-io/fastboard-iOS'
pod 'TZImagePickerController'

选择手动导入声网sdk

  • 前往 声网官网sdk下载 页面,获取客服对应的版本的SDK(目前客服集成依赖的版本是3.6.1),然后解压。
  • 将 SDK 包内 libs 路径下的文件,拷贝到你的项目路径下。
  • 打开 Xcode,添加对应动态库,确保添加的动态库 Embed 属性设置为 Embed & Sign。

sdk集成请参考

详细代码请查看demo中HDCallUIKit文件下对应的源码