All Products
Search
Document Center

Import and editing

Last Updated: Jul 30, 2019

The short video SDK allows you to import videos or images and produce videos with rich effects such as filters, dubbing, time effects, and transitions. The core editing class is AliyunEditor.

Edition difference

Edition Description
Professional edition All features are supported.
Standard edition Basic features are supported. A license is required to use advanced features.
Basic edition The import and editing features are not supported.

Import and edit videos and images

The following figure shows the import and editing process.

Edit sequence chart

  • startEdit and stopEdit must be called in pairs. After you call the startEdit method, the SDK creates related resources internally. After you call the stopEdit method, the SDK destroys the related resources internally. You must call the stopEdit method before destroying an editor. Otherwise, memory leakage occurs.
  • The media clips must be determined before editing. Therefore, the media clip management method AliyunIClipConstructor must be called before startEdit.
  • The playback control, editing, and production methods are called between startEdit and stopEdit.

Initialization

Set taskPath

taskPath specifies the path of the folder for storing configuration information. The folder stores the configuration file containing the video material information such as the path, output bitrate, GOP size, and resolution, and temporary files. AliyunEdit reads parameter settings from the configuration file stored in the folder specified by taskPath. You can set taskPath in the following ways:

  • When you record videos for editing, initialize an AliyunIRecorder object and set the taskPath property to the path of an empty folder. When you call recording methods, a configuration file is automatically created and video resources are automatically added.
  • When you import videos for editing, initialize an AliyunImporter object and set the taskPath parameter to the path of an empty folder. Call the methods of the AliyunIClipConstructor protocol to add video resources and then call the -(void)generateProjectConfigure method to create a configuration file.

AliyunImporter is used to generate the editing configuration file and provides the following methods:

  • Initialize an AliyunImporter instance.
  1. /**
  2. Initializes an AliyunImporter instance.
  3. @param taskPath The path of the folder for storing configuration information. Make sure that the folder exists.
  4. @param outputSize The resolution of the output video. Both the width and height must be even numbers.
  5. @return The AliyunImporter instance.
  6. */
  7. - (instancetype)initWithPath:(NSString *)taskPath outputSize:(CGSize)outputSize;
  • Set video output parameters.
  1. /**
  2. Sets video output parameters.
  3. @param videoParam The video output parameters.
  4. */
  5. - (void)setVideoParam:(AliyunVideoParam *)videoParam;
  • Generate a configuration file.
  1. /**
  2. /**
  3. Generates a configuration file in the folder specified by taskPath.
  4. */
  5. - (void)generateProjectConfigure;

AliyunImporter implements the AliyunIClipConstructor protocol to configure media clips. The method for adding a media clip is as follows:

  1. - (void)addMediaClip:(AliyunClip *)clip;

In this method, the clip parameter specifies an AliyunClip object indicating a media clip. You can use the initialization method to create an AliyunClip object.

  • Create a video clip.
  1. /**
  2. Creates a video clip.
  3. @param path The path of the video.
  4. @param animDuration The duration of the transition animation.
  5. @return The video clip.
  6. */
  7. - (instancetype)initWithVideoPath:(NSString *)path
  8. animDuration:(CGFloat)animDuration;
  • Create an image clip.
  1. /**
  2. Create an image clip.
  3. @param path The path of the image.
  4. @param duration The display duration of the image.
  5. @param animDuration The duration of the transition animation.
  6. @return The image clip.
  7. */
  8. - (instancetype)initWithImagePath:(NSString *)path
  9. duration:(CGFloat)duration
  10. animDuration:(CGFloat)animDuration;
  • Create a GIF clip.
  1. Creates a GIF clip.
  2. @param path The path of the GIF file.
  3. @return The GIF clip.
  4. */
  5. - (instancetype)initWithGifPath:(NSString *)path;

Initialize an editor

Call the initialization method to create an AliyunEdit object.

  1. /**
  2. @param taskPath The path of the folder for storing configuration information.
  3. @param preview The editing preview view.
  4. @return The editor.
  5. */
  6. - (instancetype)initWithPath:(NSString *)taskPath preview:(UIView *)preview;

The taskPath parameter must be set to the path of the folder for storing the configuration file that has been generated.The preview parameter specifies the preview UIView. The aspect ratio of the preview UIView must be the same as that of the output video. If you want to produce a video without previewing it, set the preview parameter to nil.

Manage media clips

You can use the -(id<AliyunIClipConstructor>)getClipConstructor method to obtain the media clip manager for managing media clips. AliyunIClipConstructor provides the following methods for adding and deleting media clips:

  • Add a media clip.
  1. /**
  2. @param clip The media clip.
  3. */
  4. - (void)addMediaClip:(AliyunClip *)clip;
  • Set all media clips.
  1. /**
  2. @param clips The media clip list.
  3. */
  4. - (void)setMediaClips:(NSArray<AliyunClip *> *)clips;
  • Add a media clip to the specified position.
  1. /**
  2. @param clip The media clip.
  3. @param index The index of the media clip.
  4. */
  5. - (void)addMediaClip:(AliyunClip *)clip atIndex:(NSInteger)index;
  • Update a media clip.
  1. /**
  2. @param clip The media clip.
  3. @param index The index of the media clip.
  4. */
  5. - (void)updateMediaClip:(AliyunClip *)clip atIndex:(NSInteger)index;
  • Delete a media clip.
  1. /**
  2. @param index The index of the media clip.
  3. */
  4. - (void)deleteMediaClipAtIndex:(NSInteger)index;
  • Delete all media clips.
  1. - (void)deleteAllMediaClips;
  • Obtain a media clip.
  1. /**
  2. @param index The index of the media clip.
  3. @return The media clip.
  4. */
  5. - (AliyunClip *)mediaClipAtIndex:(NSInteger)index;
  • Obtain all media clips.
  1. /**
  2. @return The media clip list.
  3. */
  4. - (NSArray<AliyunClip *> *)mediaClips;

Manage media clips before calling the startEdit method or after calling the stopEdit method.

Configure playback

Control playback

Call the following method to obtain the player:

  1. - (id<AliyunIPlayer>)getPlayer;

The player control methods are as follows:

  • Start the playback.
  1. - (int)play;
  • Seek to a time point.
  1. /**
  2. @param time The time point. Unit: seconds.
  3. */
  4. -(int)seek:(float)time;
  • Pause the playback.
  1. - (int)pause;
  • Resume the playback.
  1. - (int)resume;
  • Check whether the player is playing a video.
  1. /**
  2. @return The value indicating whether the player is playing a video.
  3. */
  4. - (BOOL)isPlaying;
  • Play the video again from the start.
  1. - (int)replay;
  • Stop the playback.
  1. /**
  2. * If the status is normal, ALIVC_COMMON_RETURN_SUCCESS is returned.
  3. * If the status is incorrect, ALIVC_COMMON_INVALID_STATE is returned.
  4. */
  5. - (int)stop;
  • Obtain the total playback duration. Unit: seconds.
  1. /**
  2. @return The total duration.
  3. */
  4. - (double)getDuration;
  • Obtain the current playback position. Unit: seconds.
  1. - (double)getCurrentTime;
  • Obtain the duration of the original video stream. Unit: seconds.
  1. /**
  2. @return The total duration.
  3. */
  4. - (double)getStreamDuration;
  • Obtain the playback position in the original video stream. Unit: seconds.
  1. - (double)getCurrentStreamTime;
  • Obtain the time when a video clip starts to be played in the playback timeline. Unit: seconds.
  1. /**
  2. @param idx The ID of the video clip.
  3. @return The time point. Unit: seconds.
  4. */
  5. - (double)getClipStartTimeAtIndex:(int)idx;
  • Set the refresh rate of the player.

Default value: 30 fps. Maximum value: 60 fps. We recommend that you set the refresh rate to a value equal to or greater than 20 fps.

  1. /**
  2. @param fps The refresh rate.
  3. */
  4. - (void)setRefreshFps:(double)fps;

Listen to playback callbacks

The delegate object needs to implement the AliyunIPlayerCallback protocol to monitor the playback status. The following callbacks are provided:

  • Callback to be called when the playback starts
  1. - (void)playerDidStart;
  • Callback to be called when the playback ends
  1. - (void)playerDidEnd;

To play a video again from the start after the playback ends, you need to call the replay method.

  • Callback to be called when the seeking ends
  1. - (void)seekDidEnd;
  • Playback progress callback
  1. /**
  2. @param playSec The playback position.
  3. @param streamSec The duration of the stream.
  4. */
  5. - (void)playProgress:(double)playSec streamProgress:(double)streamSec;
  • Callback to be called when a playback exception occurs
  1. /**
  2. @param errorCode The error code.
  3. */
  4. - (void)playError:(int)errorCode;

Precautions

  • The play and stop methods as well as the pause and resume methods must be called in pairs.
  • If you call the seek method or add an effect (such as MV and music), the player enters the pause status. You must call the resume method to resume the playback.
  • Time effects affect the playback timeline. The following examples show the differences between getDuration and getStreamDuration and between getCurrentTime and getCurrentStreamTime:
  • The duration of a video is 15s and the entire video is played at twice the speed. Then, getDuration returns 7.5s and getStreamDuration returns 15s. If getCurrentTime returns 3.5s, getCurrentStreamTime returns 7s.
  • The duration of a video is 15s and the entire video is played at half the speed. Then, getDuration returns 30s and getStreamDuration returns 15s. If getCurrentTime returns 10s, getCurrentStreamTime returns 5s.
  • The duration of a video is 15s and the entire video is played reversely. Then, getDuration returns 15s and getStreamDuration returns 15s. If getCurrentTime returns 6s, getCurrentStreamTime returns 9s.

Configure effects

Filter

The filter resources of the short video SDK are stored in the filter folder, which contains a configuration file and related resources. AliyunEffectFilter indicates a filter resource. You can use the initialization method to construct a filter instance. The path parameter specifies the path of the folder for storing the filter resource.

  • Generate a filter object.
  1. - (id)initWithFile:(NSString *)path;
  • Add a filter.
  1. - (int)applyFilter:(AliyunEffectFilter *)filter;

Filters cannot be overlaid. The new filter replaces the existing one each time you call the applyFilter method.

  • Remove a filter.
  1. - (int)removeFilter;

Time effect

A time effect refers to repetition, speed adjustment, or reverse playback of a video. AliyunEffectTimeFilter indicates a time effect. The following example shows how to add a time effect:

  1. AliyunEffectTimeFilter *timeFilter = [[AliyunEffectTimeFilter alloc] init];
  2. // Sets the start time of the time effect.
  3. timeFilter.startTime = 1;
  4. // Sets the end time of the time effect.
  5. timeFilter.endTime = 2;
  6. // Adds a speed adjustment effect.
  7. timeFilter.type = TimeFilterTypeSpeed;
  8. // Plays the video at half the speed.
  9. timeFilter.param = 0.5;
  10. // Applies the time effect.
  11. [self.editor applyTimeFilter:timeFilter];
  12. // The video playback is paused after you apply the time effect. You need to call the resume method to resume the playback.
  13. [self.player resume];

The time effect types include TimeFilterTypeSpeed (speed adjustment), TimeFilterTypeRepeat (repetition), and TimeFilterTypeInvert (reverse playback). If the time effect type is set to TimeFilterTypeSpeed, you need to set the param property to the playback speed. If the time effect type is set to TimeFilterTypeRepeat, you need to set the param property to the number of repetition times.

The reverse playback and repetition effects apply only to a single video clip, and cannot be overlaid with other time effects.

We recommend that you encode a video before using the reverse playback effect. Otherwise, the video playback may freeze.

MV

The MV resources of the short video SDK are stored in the MV folder, which contains a configuration file and related resources. The downloaded MV package contains four folders with MV resources in different aspect ratios, which apply to different output resolutions. AliyunEffectMV indicates an MV resource. You can use the initialization method to construct an MV instance. The path parameter specifies the path of the folder for storing the MV resource.

  • Generate an MV object.
  1. - (id)initWithFile:(NSString *)path;
  • Add an MV.
  1. - (int)applyMV:(AliyunEffectMV *)mv;

MVs cannot be overlaid. The new MV replaces the existing one each time you call the applyMV method.

  • Remove an MV.
  1. - (int)removeMV;
  • Mute the music of an MV.

MVs contain music. The method for muting the music is as follows:

  1. -(int)removeMVMusic;

Music

AliyunEffectMusic indicates a music resource. You can use the initialization method to construct a music instance. The path parameter specifies the path of the music file.

  • Generate a music object.
  1. - (id)initWithFile:(NSString *)path;
  • Add music.
  1. - (int)applyMusic:(AliyunEffectMusic *)music;
  • Remove the specified music stream.

The short video SDK allows you to overlay multiple music streams. The method for removing the specified music stream is as follows:

  1. - (int)removeMusic:(AliyunEffectMusic *)music;
  • Removes all music streams.
  1. - (int)removeMusics;

You can play the specified part of a music stream and play the music stream in the specified time period of a video. The related properties are as follows:

  1. @property (nonatomic, assign) CGFloat startTime; // The start time of the part to be played in the music stream.
  2. @property (nonatomic, assign) CGFloat duration; // The duration of the part to be played in the music stream.
  3. @property (nonatomic, assign) CGFloat streamStartTime; // The time when the music stream starts to be played in the playback timeline.
  4. @property (nonatomic, assign) CGFloat streamDuration; // The playback duration of the music stream in the playback timeline.

For example, you can play the part from the 5th second to the 10th second in a music stream and repeat this part of music twice from the 8th second of a video. To do so, generate the music object as follows:

  1. AliyunEffectMusic *music = [[AliyunEffectMusic alloc] initWithFile:`The path of the music file`];
  2. music.startTime = 5;
  3. music.duration = 5;
  4. music.streamStartTime = 8;
  5. music.streamDuration = 10;

After you call music-related methods, the player enters the pause status. You must call the resume method to resume the playback.

Dubbing

AliyunEffectDub indicates a dubbing resource and inherits AliyunEffectMusic. The operations for configuring dubbing are basically the same as those for configuring music. The related methods are as follows:

  • Add dubbing.
  1. - (int)applyDub:(AliyunEffectDub *)dub;
  • Remove a dubbing track.
  1. - (int)removeDub:(AliyunEffectDub *)dub;
  • Remove all dubbing tracks.
  1. - (int)removeDubs;

Dubbing differs from music in that dubbing supports speed adjustment while music does not. For example, if a video is played at twice the speed, the dubbing is also played at twice the speed, but the music is played at the normal speed.

Sound effect

  • Mute audio.
  1. - (int)setMute:(BOOL)mute;
  • Set the volume.

    Default value: 100. If the volume value is greater than 100, the sound may be distorted. Recommended range: 0-100.

  1. - (int)setVolume:(int)volume;
  • Set the volume of main streams.

    Main streams refer to one or more video clips imported for editing.

  1. - (int)setMainStreamsAudioWeight:(int)weight;
  • Set the volume of any stream.

    All added video, music, dubbing, and MV streams will be assigned a unique stream ID. The stream ID of a music stream is stored in the effectVid property of AliyunEffectMusic. The stream ID of an MV stream is stored in the audioEffectVid property of AliyunEffectMV. The stream ID of a main stream is stored in the streamId property of AliyunClip.

  1. - (int)setAudioWeight:(int)weight streamId:(int)streamId;
  • Denoise main streams.
  1. - (int)setMainStreamsAudioDenoise:(BOOL)denoise;
  • Denoise the specified stream.
  1. - (int)setAudioDenoise:(BOOL)denoise streamId:(int)streamId;

Animated sticker

The short video SDK supports three types of stickers: common sticker, subtitle, and bubble subtitle. You can add stickers by using the AliyunPasterManager class or the underlying class AliyunPasterRender.

Use AliyunPasterManager

The following table lists related classes.| Class | Function ||———|———||AliyunPasterManager|Creates an AliyunPasterController object.||AliyunPasterBaseView|Obtains the UI status.||AliyunPasterBaseView|Informs the short video SDK of user modifications on the UI. The short video SDK then synchronizes the UI status to the renderer to complete sticker rendering.|

You can add stickers by using AliyunPasterManager. The following figure shows the Model-View-Controller (MVC) design.

 MVC schematic diagram for stickers

According to the preceding schematic diagram, we can see that AliyunPasterManager is responsible for creating an AliyunPasterController object. The controller obtains the UI status from AliyunPasterBaseView. User modifications on the UI are sent to the short video SDK through AliyunPasterBaseView. The short video SDK then synchronizes the UI status to the renderer to complete sticker rendering. In this way, the UI can be customized on condition that AliyunPasterUIEventProtocol is implemented.

AliyunPasterUIEventProtocol provides the following methods:

  1. - (void)eventBoundsDidChanged:(CGRect)aBounds; // Synchronizes the size of the animated sticker to the controller for rendering.
  2. - (void)eventCenterDidChanged:(CGPoint)aCenter; // Synchronizes the center point of the animated sticker to the controller for rendering.
  3. - (void)eventRotateDidChanged:(CGFloat)aRotate; // Synchronizes the rotation angle of the animated sticker to the controller for rendering.
  4. - (void)eventTextBoundsDidChanged:(CGRect)aBounds; // Synchronizes the text size to the controller for rendering.
  5. - (void)eventTextCenterDidChanged:(CGPoint)aCenter; // Synchronizes the text position to the controller for rendering.
  6. - (void)eventMirrorChanged:(BOOL)isMirror; // Indicates whether mirroring is enabled.
  7. - (void)eventPasterViewClosed:(UIView *)pasterView; // Closes the animated sticker UI.
  8. - (void)eventEditDidEnd; // Completes editing.

AliyunPasterManager manages all animated stickers. To ensure that the position and size of each animated sticker are rendered correctly, set the editing area and rendering area first. The related methods are as follows:

  • Set the editing area.
  1. /**
  2. Generally, the editing area needs to cover the entire video area, and all the upper-layer animated stickers are added to the editing area.
  3. */
  4. @property (nonatomic, assign) CGSize displaySize;
  • Set the resolution of the output video.
  1. /**
  2. During production, the size of the rendering area is calculated based on this resolution.
  3. */
  4. @property (nonatomic, assign) CGSize outputSize;
  • Set the rendering area.

The rendering area is used to convert logical pixels to physical pixels.

  1. /**
  2. You can call the [_editor getPreviewRenderSize] method to obtain the size of the rendering area.
  3. */
  4. @property (nonatomic, assign) CGSize previewRenderSize;
  • Add an animated sticker.
  1. /**
  2. @param filePath The path of the animated sticker file.
  3. @param st The time when the animated sticker starts to be displayed.
  4. @param duration The display duration of the animated sticker.
  5. @return The animated sticker controller.
  6. */
  7. - (AliyunPasterController *)addPaster:(NSString *)filePath startTime:(double)st duration:(double)duration;
  • Add a subtitle.
  1. /**
  2. @param text The text. If it is null, the text is editable when the subtitle is displayed for the first time. If it is not null, the text is displayed and not editable.
  3. @param bounds The subtitle size.
  4. @param st The time when the subtitle starts to be displayed.
  5. @param duration The display duration of the subtitle.
  6. @return The animated sticker controller.
  7. */
  8. - (AliyunPasterController *)addSubtitle:(NSString *)text bounds:(CGRect)bounds startTime:(CGFloat)st duration:(CGFloat)duration;
  • Obtain all animated sticker controllers.
  1. /**
  2. @return The array of animated sticker controllers.
  3. */
  4. - (NSArray *)getAllPasterControllers;
  • Obtain an animated sticker controller based on the ID.
  1. /**
  2. @param obj The ID of the animated sticker controller.
  3. @return The animated sticker controller.
  4. */
  5. - (AliyunPasterController *)getPasterControllerByObj:(id)obj;
  • Check whether an animated sticker exists in a certain position.
  1. /**
  2. @param point The position you clicked.
  3. @param time The current playback position in the video.
  4. @return The animated sticker controller is returned if an animated sticker exists in this position currently. Otherwise, nil is returned.
  5. */
  6. - (AliyunPasterController *)touchPoint:(CGPoint)point atTime:(double)time;
  • Remove all animated stickers.
  1. - (void)removeAllPasterControllers;
  • Remove an animated sticker controller.
  1. /**
  2. API_AVAILABLE(3.7.0)
  3. @param pasterController The animated sticker controller to be removed.
  4. */
  5. - (void)removePasterController:(AliyunPasterController *)pasterController;
  • Remove all common animated stickers.
  1. - (void)removeAllNormalPasterControllers;
  • Remove all subtitle animated stickers.
  1. - (void)removeAllCaptionPasterControllers;
  • Remove all text animated stickers.
  1. - (void)removeAllSubtitlePasterControllers;
  • Obtain the animated sticker controller being edited.
  1. /**
  2. @return The animated sticker controller.
  3. */
  4. - (AliyunPasterController *)getCurrentEditPasterController;

The addPaster and addSubtitle methods are used to create animated stickers. The returned AliyunPasterController object is an animated sticker controller, from which you can obtain the parameters for rendering the animated sticker internally. AliyunPasterController defines the position, size, display start time, and display end time of an animated sticker.

AliyunPasterController provides the following properties and methods:

  • Set the view of the animated sticker.
  1. /**
  2. @warning The view of the animated sticker must be set.
  3. */
  4. @property (nonatomic, strong) UIView *pasterView;
  • Set the type of the animated sticker.
  1. @property (nonatomic, assign, readonly) AliyunPasterEffectType pasterType;
  • Set the rotation angle (radian) of the animated sticker.
  1. @property (nonatomic, assign) CGFloat pasterRotate;

All the values related to positions and sizes are logical pixels, which need to be converted to physical pixels for internal rendering.

  • Set the position (x,y) of the animated sticker.
  1. @property (nonatomic, assign) CGPoint pasterPosition;
  • Set the size of the animated sticker.
  1. @property (nonatomic, assign) CGSize pasterSize;
  • Set both the position and size of the animated sticker.
  1. @property (nonatomic, assign) CGRect pasterFrame;
  • Set whether to mirror the animated sticker.
  1. @property (nonatomic, assign) BOOL mirror;
  • Set the text content.
  1. @property (nonatomic, copy) NSString *subtitle;
  • Set the text position.

    The text position is the position of the text on the animated sticker.

  1. @property (nonatomic, assign) CGRect subtitleFrame;
  • Set the background font name of the text.
  1. @property (nonatomic, copy, readonly) NSString *subtitleConfigFontName;
  • Set the background font ID of the text.
  1. @property (nonatomic, assign, readonly) NSInteger subtitleConfigFontId;
  • Set whether to outline the text.
  1. @property (nonatomic, assign) BOOL subtitleStroke;
  • Set the text color.
  1. @property (nonatomic, strong) UIColor *subtitleColor;
  • Set the color of the text outline.
  1. @property (nonatomic, strong) UIColor *subtitleStrokeColor;
  • Set the background color of the text.
  1. @property (nonatomic, strong) UIColor *subtitleBackgroundColor;
  • Set the text font.
  1. @property (nonatomic, copy) NSString *subtitleFontName;
  • Set the keyframe image.
  1. @property (nonatomic, strong, readonly) UIImage *kernelImage;
  • Set the start time of the animated sticker. Unit: seconds.
  1. @property (nonatomic, assign) CGFloat pasterStartTime;
  • Set the end time of the animated sticker. Unit: seconds.
  1. @property (nonatomic, assign) CGFloat pasterEndTime;
  • Set the duration of the animated sticker. Unit: seconds.
  1. @property (nonatomic, assign) CGFloat pasterDuration;
  • Set the minimum duration of the animated sticker. Unit: seconds.
  1. @property (nonatomic, assign) CGFloat pasterMinDuration;
  • Set the editing area.
  1. @property (nonatomic, assign) CGSize displaySize;
  • Set the resolution of the output video.
  1. @property (nonatomic, assign) CGSize outputSize;
  • Set the rendering area.
  1. @property (nonatomic, assign) CGSize previewRenderSize;

All the values related to positions and sizes of animated stickers are logical pixels, which need to be converted to physical pixels for internal rendering.

AliyunPasterController provides methods for managing the editing status. You need to call these methods to instruct an animated sticker controller to change the status when you start or stop editing. The methods are as follows:

  • Prepare for editing.
  1. /**
  2. Before an animated sticker enters the editing status, the currently rendered animated sticker is removed internally.
  3. */
  4. - (void)editWillStart;
  • Enter the editing status.
  1. - (void)editDidStart;
  • Start editing.
  1. - (void)editProcess;
  • Complete editing.
  1. /**
  2. After editing is completed, the modifications are synchronized to the properties of the animated sticker controller and the animated sticker is rendered internally.
  3. */
  4. - (void)editCompleted;
  • Complete subtitle editing.
  1. /**
  2. This method provides the same function as the previous method, and will be deprecated in later versions of the short video SDK.
  3. @param image The subtitle image.
  4. */
  5. - (void)editCompletedWithImage:(UIImage *)image;

You can use AliyunPasterControllerDelegate to monitor the status of an animated sticker. The related methods are as follows:

  • Callback to be called when the animated sticker controller is removed
  1. /**
  2. @param obj The animated sticker controller.
  3. */
  4. - (void)onRemove:(id)obj;
  • Callback to be called when editing preparation is completed
  1. /**
  2. @param obj The animated sticker controller.
  3. */
  4. - (void)onEditWillBegin:(id)obj;
  • Callback to be called when the editing starts
  1. /**
  2. @param obj The animated sticker controller.
  3. */
  4. - (void)onEditDidBegin:(id)obj;
  • Callback to be called when the editing is completed
  1. /**
  2. @param obj The animated sticker controller.
  3. */
  4. - (void)onEditEnd:(id)obj;
  • Callback to be called when the image editing is completed
  1. /**
  2. @param obj The animated sticker controller.
  3. @param image The image to be rendered.
  4. */
  5. - (void)onEditEnd:(id)obj image:(UIImage *)image;
  • Example
  1. AliyunPasterController *pasterController = [self.pasterManager addPaster:pasterInfo.resourcePath startTime:range.startTime duration:range.duration]; // Initializes an AliyunPasterController object.
  2. AliyunPasterView *pasterView = [[AliyunPasterView alloc] initWithPasterController:pasterController]; // Generates an AliyunPasterView object through the AliyunPasterController object.
  3. pasterController.subtitleFontName = pasterView.textFontName; // Sets the text font.
  4. pasterController.subtitleStroke = pasterView.textColor.isStroke; // Sets whether to outline the text.
  5. pasterController.subtitleColor = [pasterView contentColor]; // Sets the text color.
  6. pasterController.subtitleStrokeColor = [pasterView strokeColor]; // Sets the color of the text outline.
  7. pasterController.subtitleBackgroundColor = [pasterView textBackgroundColor]; // Sets the background color of the text.
  8. pasterView.delegate = (id)pasterController;
  9. pasterView.actionTarget = (id)self;
  10. [pasterController setPasterView:pasterView];
  11. [pasterController editCompleted]; // Completes editing and performs rendering.

Use AliyunPasterRender

Animated sticker creation through AliyunPasterManager uses the default UI provided by the short video SDK. If you need to customize the UI, directly use AliyunPasterRender to add animated stickers. The related methods are as follows:

  • Obtain the AliyunPasterRender instance.
  1. - (AliyunPasterRender *)getPasterRender;
  • Add an animated sticker.
  1. @param paster The animated sticker object.
  2. * If the status is normal, ALIVC_COMMON_RETURN_SUCCESS is returned.
  3. * If the status is incorrect, ALIVC_COMMON_INVALID_STATE is returned.
  4. * If the file does not exist, ALIVC_SVIDEO_EDITOR_FILE_NOT_EXIST is returned.
  5. * If the animated sticker fails to be parsed, ALIVC_SVIDEO_EDITOR_PARSE_RESOURCE_FAILED is returned.
  6. * If a rendering parameter error occurs, ALIVC_FRAMEWORK_RENDER_ERROR_SCENE_INVALID is returned.
  7. */
  8. - (int)addGifPaster:(AliyunEffectPaster *)paster;
  • Add text.
  1. @param subtitle The text object.
  2. @param textImage The text snapshot.
  3. * If the status is normal, ALIVC_COMMON_RETURN_SUCCESS is returned.
  4. * If the status is incorrect, ALIVC_COMMON_INVALID_STATE is returned.
  5. * If a rendering parameter error occurs, ALIVC_FRAMEWORK_RENDER_ERROR_SCENE_INVALID is returned.
  6. */
  7. - (int)addSubtitlePaster:(AliyunEffectSubtitle *)subtitle textImage:(UIImage *)textImage;
  • Add a subtitle.
  1. @param caption The subtitle object.
  2. @param textImage The text snapshot.
  3. * If the status is incorrect, ALIVC_COMMON_INVALID_STATE is returned.
  4. * If the file does not exist, ALIVC_SVIDEO_EDITOR_FILE_NOT_EXIST is returned.
  5. * If the animated sticker fails to be parsed, ALIVC_SVIDEO_EDITOR_PARSE_RESOURCE_FAILED is returned.
  6. * If a rendering parameter error occurs, ALIVC_FRAMEWORK_RENDER_ERROR_SCENE_INVALID is returned.
  7. */
  8. - (int)addCaptionPaster:(AliyunEffectCaption *)caption textImage:(UIImage *)textImage;
  • Remove an animated sticker.
  1. @param basePaster The animated sticker object.
  2. * If the status is normal, ALIVC_COMMON_RETURN_SUCCESS is returned.
  3. * If the status is incorrect, ALIVC_COMMON_INVALID_STATE is returned.
  4. * If a rendering parameter error occurs, ALIVC_FRAMEWORK_RENDER_ERROR_SCENE_INVALID is returned.
  5. */
  6. - (int)removePaster:(AliyunEffectPasterBase *)basePaster;

Doodle

Doodles involve the AliyunIPaint and AliyunICanvasView classes. AliyunIPaint indicates a paint brush and AliyunICanvasView indicates a canvas.

AliyunIPaint provides the following properties and methods:

  • Set the line color.
  1. @property (nonatomic, strong) UIColor *lineColor;
  • Set the line width.
  1. @property (nonatomic, assign) CGFloat lineWidth;
  • Set the line shadow color.
  1. @property (nonatomic, strong) UIColor *shadowColor;
  • Set the line shadow width.
  1. @property (nonatomic, assign) CGFloat shadowWidth;
  • Initialize the line width and color.
  1. /**
  2. @param lineWidth The line width.
  3. @param lineColor The line color.
  4. @return self
  5. */
  6. - (instancetype)initWithLineWidth:(CGFloat)lineWidth
  7. lineColor:(UIColor *)lineColor;

Currently, you can set the line color, line width, line shadow color, and line shadow width for a paint brush.

AliyunICanvasView provides the following properties and methods:

  • Set callbacks.
  1. @property (nonatomic, weak) id<AliyunICanvasViewDelegate> delegate;
  • Set whether cross-border painting is allowed.

    By default, cross-border painting is not allowed.

  1. @property (nonatomic, assign) BOOL enableCrossBorder;
  • Set the paint brush.
  1. @property (nonatomic, strong) AliyunIPaint *paint;
  • Initialize the paint brush and canvas.
  1. /**
  2. @param frame The canvas.
  3. @param paint The paint brush.
  4. @return self
  5. */
  6. - (instancetype)initWithFrame:(CGRect)frame
  7. paint:(AliyunIPaint *)paint;
  • Modify the paint brush configuration.
  1. /**
  2. @param paint The paint brush.
  3. */
  4. - (void)changePaint:(AliyunIPaint *)paint;
  • Clear all lines. This operation cannot be undone.
  1. - (void)remove;
  • Undo the previous step.
  1. - (void)undo;
  • Redo the previous step.
  1. - (void)redo;
  • Undo all doodle operations.
  1. - (void)undoAllChanges;
  • Complete the configuration.
  1. /**
  2. @return The doodle image.
  3. */
  4. - (UIImage *)complete;

The doodle feature supports the following callbacks:

  • Callback to be called when the painting starts
  1. /**
  2. @param startPoint The point where painting starts.
  3. */
  4. - (void)startDrawingWithCurrentPoint:(CGPoint)startPoint;
  • Callback to be called when the painting ends
  1. /**
  2. @param endPoint The point where painting ends.
  3. */
  4. - (void)endDrawingWithCurrentPoint:(CGPoint)endPoint;

Watermark

AliyunEffectImage indicates an image resource. You can use the initialization method to construct a watermark image instance. The path parameter specifies the path of the watermark image file.

  • Initialize a watermark.
  1. - (instancetype)initWithFile:(NSString *)path;

After initialization, you must set the frame property to the size and position of the watermark relative to the output resolution specified by the outputSize property. The aspect ratio of the watermark must be the same as that of the original image.

  • Set a watermark.
  1. - (int)setWaterMark:(AliyunEffectImage *)waterMark;
  • Set an end watermark.
  1. - (int)setTailWaterMark:(AliyunEffectImage *)waterMark;

You can use the endTime property of AliyunEffectImage to set the duration of the end watermark.

Transition

Since V3.7.0, the short video SDK provides the transition feature. The transition base class is AliyunTransitionEffect.

AliyunTransitionEffect provides the following properties and methods:

  • Set the transition duration.
  1. /**
  2. Make sure that the transition duration is equal to or greater than the video clip duration.
  3. */
  4. @property (nonatomic, assign) float overlapDuration;
  • Customize a transition effect.
  1. @property (nonatomic, copy) NSString *customShader;
  • Set custom transition fields.
  1. @property (nonatomic, strong) NSDictionary *transitionParam;

Currently, the short video SDK supports the following transition types:

  1. AliyunTransitionEffectShuffer: the shutter transition.
  2. AliyunTransitionEffectTranslate: the translation transition, in up, down, left, and right directions.
  3. AliyunTransitionEffectCircle: the circle transition.
  4. AliyunTransitionEffectPolygon: the polygon transition, with more than two edges.
  5. AliyunTransitionEffectFade: the fade transition.

If you are familiar with OpenGL Shading Language, you can use transitionParam and customShader to customize transition settings.

  • ExampleWhen constructing an AliyunClip instance through AliyunImporter, do as follows to add a transition to the video clip:
  1. AliyunClip *clip = [[AliyunClip alloc] initWithImagePath:info.sourcePath duration:info.duration animDuration:i == 0 ? 0 : 1];
  2. AliyunTransitionEffectFade *transitionEffect = [[AliyunTransitionEffectFade alloc] init];
  3. transitionEffect.overlapDuration = 2;
  4. clip.transitionEffect = transitionEffect;
  5. // Sets a transition by using the transitionEffect property of the clip.

In addition to AliyunImporter, you can also directly set a transition in AliyunEditor.

AliyunEditor provides the following methods for adding and removing transitions:

  • Add a transition.
  1. /**
  2. API_AVAILABLE(3.7.0)
  3. Note:
  4. 1. This method cannot be called if there is only one video clip.
  5. 2. The transition duration cannot be longer than the duration of the shorter one of the two involved video clips.
  6. 3. Before calling this method, you must call [_editor stopEdit]. After calling this method, you must call [_editor startEdit] and [_player play].
  7. [----A视频段----] [----B视频段----] [----C视频段----]...[----N段视频----]
  8. ^ ^ ^
  9. clipIndex: 0 1 N-1
  10. @param transition The transition.
  11. @param clipIdx The index of a video clip intersection.
  12. @return If the transition fails to be set, ALIVC_COMMON_RETURN_FAILED is returned.
  13. If the transition is set successfully, ALIVC_COMMON_RETURN_SUCCESS is returned.
  14. */
  15. - (int)applyTransition:(AliyunTransitionEffect *)transition atIndex:(int)clipIdx;
  • Remove a transition.
  1. /**
  2. API_AVAILABLE(3.7.0)
  3. Note: Before calling this method, you must call [_editor stopEdit]. After calling this method, you must call [_editor startEdit] and [_player play].
  4. @param clipIdx The index of a video clip intersection.
  5. */
  6. - (int)removeTransitionAtIndex:(int)clipIdx;
  • Example
  1. AliyunTransitionEffectFade *fade = [[AliyunTransitionEffectFade alloc] init];
  2. fade.overlapDuration = 10;
  3. [self.editor applyTransition:fade atIndex:idx];

Animation

Since V3.7.0, all objects inheriting AliyunClip and AliyunEffectPasterBase support the animation feature. The animation base class is AliyunAction.

In the current version, the short video SDK supports the following animation classes:

  1. AliyunMoveAction // The moving animation.
  2. AliyunScaleAction // The scaling animation.
  3. AliyunRotateAction // The rotation animation.
  4. AliyunRotateToAction // The animation for rotating to the specified radian.
  5. AliyunRotateByAction // The animation for rotating the specified radian from the current radian.
  6. AliyunRotateRepeatAction // The animation for repeated rotation.
  7. AliyunAlphaAction // The alpha animation.
  8. AliyunCustomAction // The custom animation.

For more information about the animation classes, see the SDK documentation.

AliyunEditor provides the following animation-related methods:

  • Add a frame animation.
  1. /**
  2. API_AVAILABLE(3.7.0)
  3. Note: Main streams do not support alpha frame animations.
  4. @param obj The object to which the animation applies.
  5. @param action The animation.
  6. */
  7. - (void)add:(id<AliyunActionProtocol>)obj withFrameAnimation:(AliyunAction *)action;
  • Remove a frame animation.
  1. /**
  2. API_AVAILABLE(3.7.0)
  3. @param obj The object to which the animation applies.
  4. @param action The animation.
  5. */
  6. - (void)remove:(id<AliyunActionProtocol>)obj withFrameAnimation:(AliyunAction *)action;

AliyunClip provides the following animation-related methods:

  • Add an animation.
  1. /**
  2. API_AVAILABLE(3.7.0)
  3. Note: Main streams do not support alpha frame animations.
  4. @param action The animation.
  5. */
  6. - (void)runAction:(AliyunAction *)action;
  • Stop an animation.
  1. /**
  2. API_AVAILABLE(3.7.0)
  3. @param action The animation.
  4. */
  5. - (void)stopAction:(AliyunAction *)action;
  • Obtain all animations.
  1. /**
  2. API_AVAILABLE(3.7.0)
  3. @return The animation array.
  4. */
  5. - (NSArray *)allActions;

AliyunEffectPasterBase provides the following animation-related methods:

  • Add an animation.
  1. /**
  2. API_AVAILABLE(3.7.0)
  3. @param action The animation.
  4. */
  5. - (void)runAction:(AliyunAction *)action;
  • Stop an animation.
  1. /**
  2. API_AVAILABLE(3.7.0)
  3. @param action The animation.
  4. */
  5. - (void)stopAction:(AliyunAction *)action;
  6. - (void)stopAllActions;
  • ExampleTo make a static sticker transparent by using AliyunEditor, do as follows:
  1. AliyunAlphaAction *alphaAction = [[AliyunAlphaAction alloc] init];
  2. alphaAction.targetID = [_staticImage effectVid]; // Sets the ID of the object to which the animation applies.
  3. alphaAction.startTime = 3;
  4. alphaAction.duration = 2;
  5. alphaAction.fromAlpha = 0.0;
  6. alphaAction.toAlpha = 1.0;
  7. [self.editor add:_staticImage withFrameAnimation:alphaAction];

To make a static sticker transparent by using AliyunClip and AliyunEffectPasterBase, do as follows:

  1. AliyunAlphaAction *alphaAction = [[AliyunAlphaAction alloc] init];
  2. alphaAction.startTime = [pasterController pasterStartTime];
  3. alphaAction.duration = 1;
  4. alphaAction.fromAlpha = 0.0f;
  5. alphaAction.toAlpha = 1.0f;
  6. [effectPaster runAction:alphaAction];

If you are familiar with OpenGL Shading Language, you can use AliyunCustomAction to customize animations as follows:

  1. AliyunCustomAction *customAction = [[AliyunCustomAction alloc] init];
  2. customAction.startTime = [pasterController pasterStartTime];
  3. customAction.duration = 0.5;
  4. customAction.fragmentShader = @"precision mediump float; uniform sampler2D inputImageTexture; uniform float uAlpha; varying vec2 textureCoordinate; uniform float offset; float w = 0.2; float g = 1.0; uniform int direction; uniform int wipeMode;const int LEFT = 0;const int TOP = 1;const int RIGHT = 2;const int BOTTOM = 3;const int APPEAR = 0;const int DISAPPEAR = 1;void main(){vec4 gamma = vec4(g, g, g, 1.0);vec4 color0 = pow(texture2D(inputImageTexture, textureCoordinate), gamma);float correction = mix(w, -w, offset);float coord = textureCoordinate.x;if(direction == LEFT){coord = 1.0 - textureCoordinate.x;}else if(direction == RIGHT){coord = textureCoordinate.x;}else if(direction == TOP){coord = 1.0 - textureCoordinate.y;}else if(direction == BOTTOM){coord = textureCoordinate.y;}float choose = smoothstep(offset - w, offset + w, coord + correction); float alpha = choose;if(wipeMode == APPEAR){alpha = 1.0 - choose;}else if(wipeMode == DISAPPEAR){alpha = choose;}gl_FragColor = vec4(color0.r,color0.g,color0.b,color0.a*alpha);}";
  5. customAction.customUniformsMapper = @{@"direction": @[@0],
  6. @"wipeMode":@[@0],
  7. @"offset":@[@0.0,@1.0],
  8. };
  9. [effectPaster runAction:customAction];

In this example, the customized fragmentShader and customUniformsMapper define a linear erasure animation.

Custom rendering

The short video SDK allows you to obtain the IDs of the original texture and rendered texture through related methods. You can perform custom rendering in the rendering process. To perform custom rendering, you must implement the shader. Otherwise, you do not need to implement the shader.

To perform custom rendering, you must implement the AliyunIRenderCallback protocol.

  1. /**
  2. Custom rendering method used by the SDK to return the ID of the original texture before rendering
  3. @param srcTexture The ID of the original video frame texture.
  4. @param size The size of the original video frame texture.
  5. @return The texture ID.
  6. */
  7. - (int)customRender:(int)srcTexture size:(CGSize)size;
  1. /**
  2. Custom rendering method used by the SDK to return the ID of the rendered texture
  3. @param srcTexture The ID of the original video frame texture.
  4. @param size The size of the original video frame texture.
  5. @return The texture ID.
  6. */
  7. - (int)textureRender:(int)srcTexture size:(CGSize)size;

Scaling mode

You can use AliyunEffectRunningDisplayMode to dynamically switch the player to the padding mode or cropping mode during playback. The related properties are as follows:

  1. @property(nonatomic, assign) float streamStartTime; // The start time.
  2. @property(nonatomic, assign) float streamEndTime; // The end time.
  3. @property(nonatomic, assign) AliyunRunningMode mode; // AliyunRunningModeFit indicates the cropping mode and AliyunRunningModeFill indicates the padding mode.
  4. @property(nonatomic, assign) int targetStreamId; // The ID of the target stream to which the scaling mode applies.
  • Example
  1. AliyunEffectRunningDisplayMode *displayMode = [[AliyunEffectRunningDisplayMode alloc] init];
  2. displayMode.streamStartTime = 0; // Sets the start time of the scaling mode.
  3. displayMode.streamEndTime = 4; // Sets the end time of the scaling mode.
  4. displayMode.mode = AliyunRunningModeFill; // Sets the scaling mode to padding or cropping.
  5. displayMode.targetStreamId = clip.streamId; // Sets the ID of the target stream to which the scaling mode applies.
  6. [self.editor applyRunningDisplayMode:displayMode];

Produce the video

  • Obtain the production instance.
  1. - (id<AliyunIExporter>)getExporter;
  • Start the production.
  1. - (int)startExport:(NSString *)outputPath;
  • Cancel the production.
  1. -(int)cancelExport;

The delegate object needs to implement the AliyunIExporterCallback protocol to monitor the production status. The following callbacks are provided:

  • Callback to be called when the production starts
  1. - (void)exporterDidStart;
  • Callback to be called when the production is completed
  1. /**
  2. @param outputPath The path of the output file.
  3. */
  4. - (void)exporterDidEnd:(NSString *)outputPath;
  • Callback to be called when the production is canceled
  1. - (void)exporterDidCancel;
  • Production progress callback
  1. /**
  2. @param progress 0-1
  3. */
  4. - (void)exportProgress:(float)progress;
  • Callback to be called when a production exception occurs
  1. /**
  2. @param errorCode The error code.
  3. */
  4. - (void)exportError:(int)errorCode;