You need to enable JavaScript to run this app.
导航
【iOS】拍摄&基础编辑 含 UI 接入文档
最近更新时间:2023.02.06 10:39:17首次发布时间:2023.02.06 10:39:17
工程结构说明

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
  1. 修改成自己的开发者证书

  1. 在 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.
    //}
    
    1. Info.plist 中删除 Application Scene Manifest

    1. 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 即可。

  1. 修改 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。

  1. 关闭 bitcode

    1. 进入 TARGETS > Project Name >Build Setting

    2. 选择 All ,搜索 bitcode

    3. Enable Bitcode 选择 NO


  1. 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>

  1. 修改 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 参数说明:

isOversea标记是否是海外版 SDK,国内用户传 NO,非必传,默认为 NO
veLicensePath鉴权文件的路径,默认会根据 Bundle ID,读取 CKResource 里的文件,若读不到,则必传
veAppKey鉴权的 key,必传
veToken鉴权的 token,根据购买的能力确定是否必传

volcAccessKey
volcSecretKey

「音乐踩点功能」所需的秘钥,没有的话可以不赋值,对应功能将不可用

subtitleAppId
subtitleToken

「文本朗读」「字幕识别」等功能所需的秘钥,没有的话可以不赋值,对应功能将不可用


编辑

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

#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
}
  1. 在调用初始化接口前,设置即可
#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 目录,整个进行替换即可。