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进行自定义再次开发。

sdk集成请参考

工程配置

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

info.plist配置

  • 视频通话界面图片采用字体图标方式 集成时需要把General文件夹下的字体图标库加入到工程中 如果没有视频相关可以不加

环信UI库

环信UI库介绍主要分为两种 一种是基础会话聊天UI库 一种是音视频UI库:
* HelpDeskUI   ——  基础会话聊天UI库 
* HDCallUIKit —— 音视频UI库 (基于声网音视频服务,使用环信 IM 作为信令通道的开源音视频模块)

HelpDeskUI

目录介绍

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

集成

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

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

UI库使用了第三方库Masonry作用页面布局 如果工程中也用了Masonry请把我们的如下代码放到您工程引入的#import "Masonry.h"的上边防止跟您本身使用的库导致的冲突
 #ifdef __OBJC__
    #import <HelpDesk/HelpDesk.h>
   #import "HelpDeskUI.h"
   #endif 

音视频UI库

UI库说明

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

HDCallUIKit 目录介绍

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

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

Online 目录介绍

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

集成接入 CEC会话中的视频

cec监听坐席接通视频或者坐席发起视频

* 在需要弹视频界面的类导入头文件 #import "HDCallAppManger.h"
* 在对应类的监听视频弹窗的通知 代码如下
// 使用HDCallUIKit中声网视频相关功能请一定注册这个通知
[[HDCallAppManger shareInstance] initAddCallObserver];

cec 访客发起视频

HDMessage *message = [HDClient.sharedClient.callManager cec_creteVideoInviteMessageWithImServiceNum:self.conversation.conversationId content: NSLocalizedString(@"em_chat_invite_video_call", @"em_chat_invite_video_call")];
HDVisitorInfo *visitorInfo = [[HDVisitorInfo alloc] init];
visitorInfo.nickName = @"我是访客";
[message addContent:visitorInfo];
[[HDClient sharedClient].chatManager sendMessage:message
                                            progress:nil
                                          completion:^(HDMessage *message, HDError *error){
        if (!error) {
     
         dispatch_async(dispatch_get_main_queue(), ^(void) {
        //online
        [[HDCallViewController sharedManager] showViewWithKeyCenter:nil withType:HDVideoCallDirectionSend];
        [HDCallViewController sharedManager].hangUpCallback = ^(HDCallViewController * _Nonnull callVC, NSString * _Nonnull timeStr) {
            [[HDCallViewController sharedManager]  removeView];
            [[HDCallViewController sharedManager] removeSharedManager];
        };
    });    
       }
    }];
     

VEC UI库目录介绍

注意 所有vec相关的代码类都添加了vec 标识以便区分使用功能

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

集成接入 VEC独立视频

vec监听坐席接通视频或者坐席发起视频

在需要弹视频界面的类导入头文件 #import "HDCallAppManger.h"
在对应类的监听视频弹窗的通知 代码如下
// 使用HDCallUIKit中声网视频相关功能请一定注册这个通知
[[HDCallAppManger shareInstance] initAddCallObserver];

vec 访客发起视频

访客发起视频邀请 需要注意 发起视频前 一定要保证登录了环信才可以

// 发起视频 必要参数设置 如下代码
    HDVECCallInputModel * model = [[HDVECCallInputModel alloc] init];
    model.videoInputType = HDCallVideoInputDefault; // 固定类型HDCallVideoInputDefault 这个
    HDVisitorInfo *visitorInfo = [[HDVisitorInfo alloc] init];
    visitorInfo.nickName = @"我是访客"; 
    model.visitorInfo = visitorInfo; //传访客信息
    model.vec_imServiceNum = @"vec的im服务号"; 管理后台-》接入-〉视频客服-》关联信息获取
    model.vec_configid = @"vec的插件id"; 管理后台-》接入-〉视频客服-》关联信息获取  
   [[NSNotificationCenter defaultCenter] postNotificationName:@"hd_easemob_vec_call" object:model];
   

cec会话内发起vec 视频邀请场景 如下是 询前引导场景下的发起视频邀请

// cec会话内发起vec 视频邀请场景  如下是 询前引导场景下的发起视频邀请   
      HDVECCallInputModel * model = [[HDVECCallInputModel alloc] init];
      model.videoInputType = HDCallVideoInputGuidance; // 固定类型HDCallVideoInputGuidance 这个
      HDVisitorInfo *visitorInfo = [[HDVisitorInfo alloc] init];
      visitorInfo.nickName = @"我是访客"; 
      model.visitorInfo = visitorInfo; //传访客信息
      model.cec_imServiceNum = @"cec的im服务号"; 管理后台-》接入-〉在线客服-》关联信息获取
      
      // 把item 传过去 HDMenuItem 是询前引导的菜单消息解析后的model类 跳转到独立视频需要的参数都在这个解析类里边 HDCallAppManger 里边自动解析了 详细解析请参考HDCallAppManger.m这个类的实现方式
      //还需要传一个当前会话过去 目前是在聊天的HDMessageViewController.h类里调用 具体请参考改类里的实现方式 如果是集成了我们的会话HelpDeskUI  ui库 那询前引导的这个场景 可以不用集成因为我们我的HelpDeskUI  ui库 已经集成好了 具体请参考HDMessageViewController.m内的实现方式
      NSMutableDictionary * dic = [[NSMutableDictionary alloc] init];
     [dic hd_setValue:self.conversation forKey:@"easemob_currentConversation"];
     [dic hd_setValue:item forKey:@"easemob_currentHDMenuItem"];
     [[NSNotificationCenter defaultCenter] postNotificationName:@"hd_easemob_vec_call" object:model userInfo:dic];

⚠️⚠️⚠️⚠️⚠️⚠️⚠️注意 如果是 融合视频 和 独立视频 共同使用 需要根据sdk 中的isVECMessage 这个方法 进行判断是融合视频还是vec独立视频 代码请 参考 HDCallAppManger.m类里的实现方式⚠️⚠️⚠️⚠️⚠️

/*!
 *  \~chinese
 *   获取当前消息是否是 VEC 消息  yes 是vec 消息。no 不是vec 消息
 */
- (BOOL)isVECMessage:(HDMessage *)message;

集成pod库

#  环信环信UI库 依赖的第三方库 
* pod 'MBProgressHUD',
* pod 'Masonry'
* pod 'SDWebImage'
#音视频UI库 依赖的声网sdk
* pod 'AgoraRtcEngine_iOS','4.1.1' 
#音视频UI库 依赖的白板sdk  需要注意 如果音视频UI库 中没有涉及白板业务 不需要 导入此库
pod 'Fastboard', '1.1.2'
pod 'TZImagePickerController'

选择手动导入声网sdk

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

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