【iOS】拍摄&基础编辑 含 UI 接入文档

SDK 的主要内容集中在 CK 目录，有以下组件：

├── CK
│   ├── CKEditor 「CK SDK 初始化」
│   ├── CKRRecorder 「拍摄/合拍」
│   ├── CKResource 「算法资源、素材、License 集合」
│   ├── CKi18n 「国际化文案」
│   ├── DVEFoundationKit 「集中放一些通用的基础类」
│   ├── DVETrackKit「编辑器中的轨道区」
│   └── NLEEditor-iOS 「编辑器模块」

结构大概如图：

暂时无法在飞书文档外展示此内容

详细说明：

1. CKEditor 是 CK 初始化的入口。

2. CKResource 的资源，打包后，其中的资源会加到 App 的 main bundle 里。

3. CKRRecorder 拍摄、合拍模块。

4. NLEEditor-iOS 是编辑器模块，编辑器的轨道区部分在 DVETrackKit 中。

5. DVEFoundationKit 集中放一些通用的基础类。

开发机环境要求

• Xcode 9.0 或以上版本。

• 支持 iOS 9.0 或以上版本的 iOS 设备，暂不支持模拟器调试。

工程环境搭建

压缩包说明

解压后的目录：

├── CK
│   ├── CKEditor 「CK SDK 初始化」
│   ├── CKRRecorder 「拍摄/合拍」
│   ├── CKResource 「算法资源、素材、License 集合」
│   ├── CKi18n 「国际化文案」
│   ├── DVEFoundationKit 「集中放一些通用的基础类」
│   ├── DVETrackKit「编辑器中的轨道区」
│   └── NLEEditor-iOS 「编辑器模块」
└── CKOne-iOS 「接入示例」
    ├── CKOBase 「通用类」
    ├── CKOBusiness 「业务」
    ├── CKOEditor 「跳转编辑器的示例」
    ├── CKOLog「日志实现示例」
    ├── CKORecord 「跳转拍摄的示例」
    └── CKOne 「壳工程，Podfile 的目录」

1. SDK 的主要内容集中在 CK 目录，详细内容，可查看上面的「工程结构说明」。

2. CKOne-iOS 是一个接入的 Sample 工程，仅供参考，接入到 App 时，可直接去掉。

将提供的 CKOne 跑起来

1. 下载、解压后，进入 CKOne-iOS/CKOne 目录

2. 执行 pod update 后，打开工程。

cd CKOne-iOS/CKOne
pod update
open CKOne.xcworkspace

3. 修改成自己的开发者证书

4. 在 Xcode 中，选择真机设备后，便可 run 起来。

SDK 接入

SDK 接入到已有的 App，有以下步骤（这里新建了一个 Demo，作为举例）

1. 复制 CK SDK 到工程里

   1. 将 zip 里的 CK 放到目录里。

   

2. 若是项目里有 SceneDelegate，需要删除清理下 SceneDelegate，不然，此步骤可跳过。

   1. 删除 SceneDelegate.h、Scenedelegate.m

   2. 注释或删除 AppDelegate 中有关 UISceneSession 的回调

   #pragma mark - UISceneSession lifecycle
    
   //
   //- (UISceneConfiguration *)application:(UIApplication *)application configurationForConnectingSceneSession:(UISceneSession *)connectingSceneSession options:(UISceneConnectionOptions *)options {
   //    // Called when a new scene session is being created.
   //    // Use this method to select a configuration to create the new scene with.
   //    return [[UISceneConfiguration alloc] initWithName:@"Default Configuration" sessionRole:connectingSceneSession.role];
   //}
   //
   //
   //- (void)application:(UIApplication *)application didDiscardSceneSessions:(NSSet<UISceneSession *> *)sceneSessions {
   //    // Called when the user discards a scene session.
   //    // If any sessions were discarded while the application was not running, this will be called shortly after application:didFinishLaunchingWithOptions.
   //    // Use this method to release any resources that were specific to the discarded scenes, as they will not return.
   //}
   

   4. Info.plist 中删除 Application Scene Manifest

   

   6. AppDelegate 中添加 window，以及设置 UINavigationController。

   @interface AppDelegate : UIResponder <UIApplicationDelegate>
   @property (nonatomic, strong) UIWindow *window;
   @end
   
   
   // AppDelegate.m
   #import "ViewController.h"
   - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
       UIWindow *window = [[UIWindow alloc] init];
       UIViewController *mainVC = [[ViewController alloc] init];
       UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:mainVC];
       [navigationController setNavigationBarHidden:YES];
       window.rootViewController = navigationController;
       [window makeKeyAndVisible];
       UIApplication.sharedApplication.delegate.window = window;
       return YES;
   }
   

3. 若已有 Podfile，此步骤可跳过。

若无 Podfile，在 .xcodeproj 同目录下，执行 pod init 即可。

4. 修改 Podfile 后，执行 pod update。

source 'https://cdn.cocoapods.org/'

platform:ios, '9.0'

# 通用的 pods
def base_pods
  pod 'TTVideoEditor', '11.8.1.36-D',:source => 'https://github.com/volcengine/volcengine-specs.git'
  pod 'NLEPlatform', '0.5.2', :source => 'https://github.com/volcengine/volcengine-specs.git'
  pod 'DVEInject', '0.0.5', :source => 'https://github.com/volcengine/volcengine-specs.git'
end

# 编辑
def editor_pods
  # 接入时，根据项目实际情况，调用相对路径
  pod 'NLEEditor', :subspecs => ['CK'], :path => '../NLEEditor-iOS'
  pod 'DVETrackKit', :subspecs => ['CK'], :path => '../DVETrackKit'
  pod 'DVEFoundationKit', :subspecs => ['CK'], :path => '../DVEFoundationKit'
  pod 'CKEditor', :path => '../CKEditor'
  
  ################################### 第三方 ###################################
  pod 'SGPagingView', '1.7.1'
  pod 'KVOController','1.2.0'
  pod 'Masonry','1.1.0'
  pod 'ReactiveObjC', '3.1.1'
  pod 'YYWebImage', '1.0.5'
  pod 'YYImage', '1.0.4'
  pod 'YYModel', '1.0.4'
  pod 'MBProgressHUD', '1.2.0'
  pod 'lottie-ios', '2.5.3'
  pod 'SDWebImage', '5.11.1'
  pod 'Toast', '4.0.0'
  pod 'MJExtension'
  pod 'MJRefresh', '3.6.1'
  pod 'PocketSVG', '2.7.0'
  pod 'IGListKit', '4.0.0'
  pod 'IGListDiffKit', '4.0.0'
  pod 'FileMD5Hash'
end

# 拍摄
def recorder_pods
    pod 'CKRRecorder', :subspecs => ['Arch'], :path => '../CKRRecorder'
end

target 'Demo' do
  base_pods
  # 基础编辑 & 拍摄
  editor_pods
  recorder_pods
end

更详细的 Podfile，可参考上面压缩包里的 CKOne。

5. 关闭 bitcode

   1. 进入 TARGETS > Project Name >Build Setting

   2. 选择 All ，搜索 bitcode

   3. Enable Bitcode 选择 NO

   

6. Info.plist 补充权限描述

找到项目的 Info.plist 文件，添加用到的权限描述。

<key>NSCameraUsageDescription</key>
<string>Use Camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>Use Microphone</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Use Photo Libary</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Use Photo Library</string>

7. 修改 license

License 与 Bundle ID 绑定，以 .licbag 为后缀，比如 com.bytedance.solution.ck.licbag 。
请咨询火山同学获取「License」及「素材」，并参考文末：「更换 License」、「替换资源素材」进行修改。

若只是体验，可以先修改工程里的 Bundle ID 为 com.bytedance.solution.ck

模块验证

初始化

初始化例子如下，其中参数请联系火山同学提供。

#import <CKEditor/CKEditor.h>

+ (void)setupEditorEngine {
    CKEditorEngineConfig *c = [CKEditorEngineConfig defaultConfig];
    // uncomment these to set veLicensePath
//    NSBundle *bundle = [NSBundle mainBundle];
//    NSString *licensePath = [bundle pathForResource:@"com.bytedance.solution.ck.licbag" ofType:@""];
//    c.veLicensePath = licensePath;
    
    c.veAppKey = @"";
    c.veToken = @"";
    
    /// {zh} 根据需要的功能，联系火山引擎提供  {en} According to the required functions, contact Volcano Engine to provide
    // c.subtitleAppId = @"";
    // c.subtitleToken = @"";
    // c.volcAccessKey = @"";
    // c.volcSecretKey = @"";

    [CKEditorEngine.shared startWithConfig:c];
}

CKEditorEngineConfig 参数说明：

编辑

调用后，会先弹出选图器，选择完之后，直接跳转到编辑页面：

#import <CKEditor/CKEditor.h>

[CKEditorEngine.shared toStandarMultiTrackEditor];

更多配置，可以参考查看上述方法的实现。

拍摄

调用后，直接跳转到拍摄页面。

#import <CKEditor/CKEditor.h>

[CKEditorEngine.shared toRecord];

更多配置，可以参考查看上述方法的实现。

合拍

调用后，会先弹出选图器，选择完之后，直接跳转到拍摄页面。

#import <CKEditor/CKEditor.h>

[CKEditorEngine.shared toDuetRecord];

更多配置，可以参考查看上述方法的实现。

草稿箱

调用后，直接跳转到草稿页面。

#import <CKEditor/CKEditor.h>

[CKEditorEngine.shared toDraft];

更多配置，可以参考查看上述方法的实现。

工程问题排查

替换资源

可直接替换 CK/CKResource/CKResource/Resource 里的资源。
CKResource 里的资源，打包后，会添加到 main bundle 里。
详细说明：

├── Editor 「编辑所用到的资源」
│   ├── adjust.bundle「调节」
│   ├── bubble.bundle「气泡」
│   ├── canvas.bundle「画布」
│   ├── chroma.bundle「色度抠图」
│   ├── curve_speed.bundle「曲线变速」
│   ├── flower.bundle「花字」
│   ├── mix.bundle「混合模式」
│   ├── smooth_speed.bundle「丝滑变速」
│   ├── sticker.bundle「贴纸」
│   ├── sticker_animation.bundle「贴纸动画」
│   ├── text_align.bundle「文字-样式-排列」
│   ├── text_animation.bundle「文字动画」
│   ├── text_color.bundle「文字-样式-底色」
│   ├── text_fonts.bundle「文字-样式-字体」
│   ├── text_style.bundle「文字-样式-样式」
│   ├── text_template.bundle「文字模板」
│   ├── tone.bundle「变声」
│   ├── transitions.bundle「转场」
│   ├── ve_effect.bundle「特效」
│   ├── ve_filter.bundle「滤镜」
│   ├── video_animation.bundle「视频动画」
│   ├── video_mask.bundle「蒙版」
│   └── voice.bundle「文本朗读-声色选择」
├── License
│   └── com.bytedance.solution.ck.licbag「鉴权 License」
├── Local「通用资源，未加密」
│   ├── default.bundle
│   ├── en.lproj「多语言文案-英文」
│   ├── music.bundle
│   ├── sound.bundle
│   └── zh-Hans.lproj「多语言文案-中文」
└── Record「拍摄所用到的资源」
    ├── ComposeMakeup.bundle「美颜」
    ├── FilterResource.bundle「滤镜」
    ├── StickerResource.bundle「贴纸」
    └── duet.bundle「合拍」
    └── ModelResource.bundle「算法模型-拍摄、编辑都需要，其中会以文件夹区分不同功能」

修改日志

默认在 Debug 模式下，使用 NSLog 打印，也支持自行实现。
建议自行实现，将日志写到 App 所用的日志平台上，方便排查时提供。

例子：

1. 新建 YourLogImpl，实现 CKLogProtocol。

#import <CKEditor/CKEditor.h>

@interface YourLogImpl : NSObject <CKLogProtocol>

@end

@implementation YourLogImpl
- (void)logMsg:(NSString *)msg tag:(NSString *)tag type:(DVELogType)type {
    // log here
}

2. 在调用初始化接口前，设置即可

#import <CKEditor/CKEditor.h>
#import "YourLogImpl.h"

CKEditorEngine.shared.logImpl = [YourLogImpl new];

提供的 CKOne 里的 CKOLog+FileImpl 是一个将日志写到文件里的例子，可供参考。

替换 License

License 默认是 CK/CKResource/CKResource/Resource/License/com.bytedance.solution.ck.licbag。
需要注意的是，代码是根据 App 的 Bundle ID 匹配 License，此处的com.bytedance.solution.ck 对应的是 Demo 的 Bundle ID。
若是其他的，请将文件名称改成对应的 Bundle ID。

若不放在以上位置，则在初始化前，根据实际位置，设置 CKEditorEngineConfig.veLicensePath 即可。
若替换了文件，也改了 veLicensePath，则以设置 veLicensePath 的为准。
例子：

#import <CKEditor/CKEditor.h>

+ (void)setupEditorEngine {
    CKEditorEngineConfig *c = [CKEditorEngineConfig defaultConfig];
    // uncomment these to set veLicensePath
    NSBundle *bundle = [NSBundle mainBundle];
    NSString *licensePath = [bundle pathForResource:@"YourBundleID.licbag" ofType:@""];
    c.veLicensePath = licensePath;
    
     // ...
    [CKEditorEngine.shared startWithConfig:c];
}

需要注意的是，此路径的文件，必须是可访问到的，比如是在 main bundle 里，或者沙盒目录下。

升级 SDK

解压后，拿到其中的 CK 目录，整个进行替换即可。