All Products
Search
Document Center

Import for editing

Last Updated: Aug 01, 2019

Overview

The editing module of the Alibaba Cloud short video SDK allows you to edit video effects. Currently, the basic edition of the short video SDK does not support the editing module, whereas the standard edition supports filters, music, effects, speed control, transition, and graffiti. Based on the standard edition, the professional edition adds music videos (MVs), motion graphics, and captioning. You can quickly integrate the professional video editing feature into your application in a few simple steps.You can use a configuration file to customize the style of the video editing UI. You can also refer to the demo and use the Alibaba Cloud short video SDK to customize your own editing module.

Note: You need to create an AliyunVideo folder in your project to store all source code copied from the demo. This AliyunVideo folder can help you troubleshoot, update, and maintain the code in the future.

Step 1: Copy SDK files

  • The following table lists the two files that the editing module is dependent on.
Name Type Description
AliyunVideoSDKPro.framework DLL The short video SDK, which is dependent on the alivcffmpeg library.
alivcffmpeg.framework DLL The ffmepg library.
  • Copy the files highlighted in red into your project, as shown in the following figure.
    WX20181022-175643@2x.png

Step 2: Copy business code files

Copy the following three parts of code files into your project:

  • Basic code and public components that the project is dependent on

    Copy the files highlighted in red into your project, as shown in the following figure.

    Copy public components

Name Description
Categories The categories required by the project.
Config The configuration files of the project.
Helpers The helper classes required by the project.
Utilites The four utility classes required by the project.
  • Basic code and public components that the short video SDK is dependent on

    Copy the files highlighted in red into your project, as shown in the following figure.

    Copy public business components

Name Description
AlivcShortVideoCommonFile The public components that the short video SDK is dependent on in its basic, standard, and professional editions.
Common The business components for the professional edition of the short video SDK.
AlivcShortVideoResource The resources required by the short video SDK.
Utilites The four utility classes required by the project.

Resource folders are referenced as folder references, as shown in the following figure.WX20181019-225713@2x.png

Add these folders to your project following instructions, as shown in the following figure.WX20181019-230720@2x.png

  • Code of the video editing module

    Copy the files highlighted in red into your project, as shown in the following figure.

    Copy editing code

Name Description
VideoEdit The business code of video editing.
VideoPublish The business code of video production and publish

Step 3: Configure the PCH file

  • Add the following reference to a .pch file in your project:

    import “AlivcImage.h”

    import “AlivcMacro.h”

If your project does not contain a .pch file, you can copy the PrefixHeader.pch file from the demo. Keep the preceding reference in the .pch file.

  • Choose TARGETS > Build Settings to configure the PCH file, as shown in the following figure.WX20181020-002351@2x.png

Prefix Header: Enter the directory of the PrefixHeader.pch file in your project, for example, $(SRCROOT)/Your own directory/PrefixHeader.pch.

Step 4: Set up the project environment

  • Open the project and select the target. Choose General > Embedded Binaries. Click + to import the alivcffmpeg.framework and AliyunVideoSDKPro.framework files, as shown in the following figures.undefined

undefined

  • Open the project and select the target. Choose General > Linked Frameworks and Libraries. Click + to add the following system libraries:

    • libz.tbd
    • ImageIO.framework
    • CoreMedia.framework
    • CoreVideo.framework
    • VideoToolBox.framework
    • MediaPlayer.framework
    • OpenAL.framework
    • libc++.tbd
    • libsqlite3.tbd
    • libiconv.tbdundefined
  • Choose Build Settings > Linking > Other Linker Flags. Add the $(inherited) and -ObjC options.undefined

  • Choose Build Settings > Build Options. Set Enable Bitcode to No.undefined

  • Edit the Info.plist file and add the following fields to apply for the camera, album, and music access permissions:

  1. * Privacy - NSCameraUsageDescription
  2. * Privacy - NSPhotoLibraryAddUsageDescription
  3. * Privacy - NSPhotoLibraryUsageDescription
  4. * Privacy - NSAppleMusicUsageDescription
  1. You can also add the following code to the source code of the Info.plist file:
  1. <key>NSCameraUsageDescription</key>
  2. <string></string>
  3. <key>NSPhotoLibraryAddUsageDescription</key>
  4. <string></string>
  5. <key>NSPhotoLibraryUsageDescription</key>
  6. <string></string>
  7. <key>NSAppleMusicUsageDescription</key>
  8. <string></string>

Step 5: Integrate CocoaPods

  • Add the following reference to a Podfile:
  1. pod 'JSONModel','~> 1.7.0'
  2. pod 'SDWebImage', '~> 4.0'
  3. pod 'FMDB', '~> 2.5'
  4. pod 'TTRangeSlider','~> 1.0.6'
  5. pod 'ZipArchive', '~> 1.4.0'
  6. pod 'MBProgressHUD', '~> 1.1.0'
  7. pod 'LXReorderableCollectionViewFlowLayout'
  8. pod 'AFNetworking', '~> 3.0'
  9. pod 'AlivcConan', '0.9.0' # The dependent data tracking of the short video SDK.
  • On a physical device where your project is run, run the cd command to go to the directory of the Podfile and run the pod install command.

Step 6: Compile the sample code for the editing feature

  • Import header files.
  1. `#import "AlivcShortVideoRoute.h"`
  • Compile the navigation code.
  1. // Obtains the routing information.
  2. AlivcShortVideoRoute *alivcRoute = [AlivcShortVideoRoute shared];
  3. // Registers a callback event for the completion of editing.
  4. [alivcRoute registerEditFinishBlock:^(NSString * _Nonnull outputPath) {
  5. NSLog(@"Storage path of the edited and produced video: %@",outputPath);
  6. // Performs other operations required after short video processing.
  7. }];
  8. // Obtains a view controller for the feature.
  9. UIViewController *control =[alivcRoute alivcViewControllerWithType:AlivcViewControlEditVideoSelect];
  10. // Hides the built-in navigation bar with a custom unified style in the functional module.
  11. [self.navigationController setNavigationBarHidden:YES];
  12. #Warning: If you fail to be redirected to the custom page, check whether UINavigationController is configured in your code.
  13. // Pushes the view controller.
  14. if (self.navigationController) {
  15. [self.navigationController pushViewController:control animated:YES];
  16. }else{
  17. NSLog(@"----------------------------------------");
  18. NSLog(@"Check whether UINavigationController is configured.") ;
  19. NSLog(@"Check whether UINavigationController is configured.") ;
  20. NSLog(@"Check whether UINavigationController is configured.") ;
  21. NSLog(@"----------------------------------------");
  22. }

Note: If you do not plan to integrate the video playback module, you need to modify the value of a macro definition after Step 6 to preview the expected effects. Open the file in the following directory: AliyunVideoClient_Entrance/AlivcShortVideo/AlivcShortVideoCommonFile/AVC_ShortVideo_Config.h.Find the following code and set the value to 1:

  1. // Indicates whether SmartVideo is integrated. Default value: 1. Valid values: 1 (indicating yes) and 0 (indicating no).
  2. #define HaveQuVideo 1
  • Configure optional items.

Configure and register the following items before you call the alivcViewControllerWithEntry method.

  1. The following table lists whether the entry configuration can be customized.

| Entry | AlivcEditUIConfig | AliyunMediaConfig || g | | ——- | ——— | ———— || - | | AlivcViewControlEdit | √ | √ || √ | | AlivcViewControlEditVideoSelect | x | √ || √ | | AlivcViewControlEditParam | x | x |

  1. // Customizes the UI configuration.
  2. AlivcEditUIConfig *uiconfig = [AlivcEditUIConfig new];
  3. // The filter icon.
  4. uiconfig.filterImage = [UIImage new];
  5. // The play icon.
  6. uiconfig.playImage = [UIImage new];
  7. // For more information about parameter settings, see the AlivcEditUIConfig.h file.
  8. // Registers the configuration file.
  9. [alivcRoute registerUIConfig:uiconfig];
  10. // Sets video editing parameters.
  11. AliyunMediaConfig *mediaConfig =[[AliyunMediaConfig alloc]init];
  12. // The resource path.
  13. mediaConfig.sourcePath =@"";
  14. // The padding mode.
  15. mediaConfig.cutMode = AliyunMediaCutModeScaleAspectFill;
  16. // For more information about parameter settings, see the AliyunMediaConfig.h file.
  17. // Registers the configuration file.
  18. [alivcRoute registerEditUIConfig:mediaConfig];
  • Provide the edited video.

    After video editing, trigger the callback event registered in Step 6.

  1. // Registers a callback event for the completion of editing.
  2. [alivcRoute registerEditFinishBlock:^(NSString * _Nonnull outputPath) {
  3. NSLog(@"Storage path of the edited video: %@",outputPath);
  4. // Performs other operations required after short video processing.
  5. }];