========= iOS 访客端demo集成（含UI库） ========= * 为了方便您快速了解我们的访客端SDK所提供的各种能力，我们对外开放了访客端集成Demo的全部源码，里面包含了对话过程中的业务处理及上层UI库； * 通过这个Demo源码，可以帮助产品人员快速了解我们的访客端功能，可以帮助研发人员快速了解集成技术逻辑，帮助测试人员通过对比demo和您自己的app，更快定位问题； * 我们的访客端Demo里提供了一整套UI，您可以直接使用这套UI，当然我们更建议您用作参考，根据您的APP风格和实际业务场景，设计您自己的一套UI和业务使用流程，减少访客在使用您app过程中所产生的割裂感； * 在SDK集成过程中，针对您遇到的问题我们建议您先对比下Demo里的处理逻辑，帮助您快速解决您遇到的问题，如果Demo仍无法解答您心中的疑惑，请直接联系我们商务或技术支持，我们会全力为您提供所需要的帮助！ ==== 访客端Demo使用 ==== 当您在手机上安装完访客端demo应用后，首次使用需先经过简单的扫码配置，然后就可以开始发起正常对话了，详细说明如下： {{:cs:300visitoraccess:客服云-安卓端demo下载后使用配置.png?nolink|}} ==== 访客端Demo与您自己APP的区别 ==== 访客端Demo与客户的APP以及SDK之间的关系说明如下： * 对象不同：我们的demo主要供产品、研发、测试等内部使用，便于了解功能的，您的APP是面对终端用户的； * 使用不同：我们访客端Demo是不上架应用商店，您的App是需要上架到各大应用商店提供给访客下载的； * 功能不同：我们访客端Demo仅提供的是对话的功能，您的APP里一般都是实现各种例如零售、维修、娱乐等各种功能，对话功能只是对于您的app里的一项补充能力； {{:cs:300visitoraccess:客服云-安卓端demo与sdk的区别.png?nolink|}} ======== 代码下载 ======== 您可以通过以下两种方式获取到源代码： * 下载代码压缩包：客服云sdk 及 Demo 下载 [[http://www.easemob.com/download/cs ]] * 下载源代码：github源码地址 [[https://github.com/easemob/kefu-ios-demo ]] 欢迎大家提交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集成请参考 ===== 请移步sdk集成文档[[http://docs.easemob.com/cs/300visitoraccess/iossdkvec]] ======== 工程配置 ======== === 确保以下内容工程都配置上 才能正确使用 环信UI库 === =====info.plist配置 ===== * 视频通话界面图片采用字体图标方式 集成时需要把General文件夹下的字体图标库加入到工程中 如果没有视频相关可以不加 {{:cs:300visitoraccess:icfont.png?400|}} ====== 环信UI库====== 环信UI库介绍主要分为两种 一种是基础会话聊天UI库 一种是音视频UI库： * HelpDeskUI —— 基础会话聊天UI库 * HDCallUIKit —— 音视频UI库 （基于声网音视频服务，使用环信 IM 作为信令通道的开源音视频模块） =====HelpDeskUI===== ==== 目录介绍==== * 3rdparty——ui依赖的第三方库 部分基于pod集成 * ViewController——存放所有页面的控制器类 * Views—— 存放界面的view * Helper—— 封装发送各个类型消息的工具类 * Model—— 消息模型解析模块 * Util—— 工具类模块 ====集成==== ===集成基础会话聊天UI库时只需要把demo中HelpDeskUI文件夹拖入到自己项目中=== {{:cs:300visitoraccess:qq20230228-114841_2x.png?200|}} === 在pch文件或全局.h文件中添加如下代码=== UI库使用了第三方库Masonry作用页面布局 如果工程中也用了Masonry请把我们的如下代码放到您工程引入的#import "Masonry.h"的上边防止跟您本身使用的库导致的冲突 #ifdef __OBJC__ #import #import "HelpDeskUI.h" #endif =====音视频UI库===== ==== UI库说明 ==== *音视频UI库主要分为两种 一种是融合视频（在线聊天中视频） 一种是独立视频（VEC视频） 都在HDCallUIKit下 {{:cs:300visitoraccess:hdcallkit.png?200|}} ==== 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====== *前往 声网官网[[https://docs.agora.io/cn/video-call-4.x/downloads?platform=iOS|sdk下载]] 页面，获取客服对应的版本的SDK(目前客服集成依赖的版本是3.6.1)，然后解压。 *将 SDK 包内 libs 路径下的文件，拷贝到你的项目路径下。 *打开 Xcode，添加对应动态库，确保添加的动态库 Embed 属性设置为 Embed & Sign。 ===详细代码请查看demo中HDCallUIKit文件下对应的源码===