In July, The global daily active users of Douyin reached 150 million and monthly active users exceeded 500 million. Its level of activity and user engagement can be summarized as “Five minutes for Douyin, two hours for the world”. There is no doubt that Tiktok is one of the hottest apps of 2018. The popularity of Douyin not only means that vertical short videos can achieve explosive growth, but also integrated platform embedded short videos can greatly improve user activity.

At present, short video technology is gradually mature, but to quickly launch short video, in addition to the necessary Android and iOS development experience, it is more important to choose a clear interface, rich functions, small package SDK access. Today, I will teach you how to build a short video platform of shaking tone level one day based on qiniuyun short video SDK.

Process list

The main process of developing a short video is divided into three parts. Below, I will teach you step by step to realize each function point under these three processes. Function point API can be called as required:

A. Start shooting B. Add background music c. Start shooting D. Add face e. Add filter F. Add face sticker g. Speed change h. The end

A. Start editing B. Add background music C. Add text effects D. Add tiktok effects

Video export

Pre-development preparation

• Download Demo (github.com/anhaoxiong/…

• Download the short video SDK (github.com/pili-engine…

Video shooting

2.1 Start shooting

Plshortvideokit.h:

#import <PLShortVideoKit/PLShortVideoKit.h>

Then add a PLShortVideoRecorder property:

@property (nonatomic,strong) PLShortVideoRecorder *shortVideoRecorder;

Create audio and video collection and encoding configuration objects, here we use the default configuration, developers can modify the configuration according to their own needs:

PLSVideoConfiguration *videoConfiguration = [PLSVideoConfiguration defaultConfiguration];

PLSAudioConfiguration *audioConfiguration = [PLSAudioConfiguration defaultConfiguration];

Create shot shortVideoRecorder object:

self.shortVideoRecorder = [[PLShortVideoRecorder alloc] initWithVideoConfiguration:videoConfiguration audioConfiguration:audioConfiguration]; self.shortVideoRecorder.delegate = self;

Add camera preview view:

[self.view addSubview:self.shortVideoRecorder.previewView];

Now that the basic configuration is complete, we can launch the camera preview:

[self.shortVideoRecorder startCaptureSession];

2.2 Add background music to the shooting

Before we start recording, we can add background music:

NSURL *audioURL = [NSURL fileURLWithString:@”PATH TO AUDIO”]; [self.shortVideoRecorder mixAudio:audioURL];

Background music can be added only before the recording starts. Once the recording starts, background music cannot be added. In this case, background music can be added only after the recorded video file is deleted.

2.3 Start Shooting

The path to the recorded video is automatically generated by the SDK:

[self.shortVideoRecorder startRecording];

Developers can also own incoming record video store path: [self. ShortVideoRecorder startRecording: customFileURL];

2.4 Adding beauty

Qiniu short video SDK provides the beauty function, developers only need a simple parameter setting to open the beauty function:

[self.shortVideoRecorder setBeautifyModeOn:YES];

2.5 Adding filters

Qiniu short video SDK provides more than 30 filter formats. Developers need to include PLShortVideoKit. Bundle in the project to use the filter, which stores the image resources of the filter, and developers can also add their own filter images.

Initialize the filter:

Self. filter = [[PLSFilter alloc] init];

NSString *bundlePath = [NSBundle mainBundle]. BundlePath; NSString *colorImagePath = [bundlePath stringByAppendingString:@”/PLShortVideoKit.bundle/colorFilter/candy/filter.png”]; self.filter.colorImagePath = colorImagePath;

In the short video data callback method, we can use the filter initialized above:

– (CVPixelBufferRef)shortVideoRecorder:(PLShortVideoRecorder *)recorder CameraSourceDidGetPixelBuffer: CVPixelBufferRef pixelBuffer {/ / filter processing pixelBuffer = [self. Filter process: pixelBuffer];

return pixelBuffer; }

2.6 Adding face stickers

Qiniu short video SDK does not provide the sticker function of face recognition, but our SDK can easily access the sticker function of friends. We take the sticker of adding pictures as an example

Header file containing painted image:

#import <TuSDKVideo/TuSDKVideo.h> #import “StickerScrollView.h”

Add sticker addler and sticker selection to view:

@property (nonatomic, strong) TuSDKFilterProcessor *filterProcessor; @property (nonatomic, strong) StickerScrollView *stickerView;

Initializing a sticker instance:

self.filterProcessor = [[TuSDKFilterProcessor alloc] initWithFormatType:kCVPixelFormatType_32BGRA isOriginalOrientation:NO]; self.filterProcessor.outputPixelFormatType = lsqFormatTypeBGRA; [self.filterProcessor setEnableLiveSticker:YES]; // TuSDKFilterProcessor does not enable stickers by default.

self.stickerView = [[StickerScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 300)]; self.stickerView.stickerDelegate = self; self.stickerView.cameraStickerType = lsqCameraStickersTypeSquare;

Choose stickers. In the callback of the sticker selection, handle the sticker:

– (void)clickStickerViewWith:(TuSDKPFStickerGroup *)stickGroup { if (! StickGroup) {// Remove existing stickGroup when nil; [_filterProcessor removeMediaEffectsWithType:TuSDKMediaEffectDataTypeSticker]; } else {/ / selected a sticker, add it to the filterProcessor [self. FilterProcessor showGroupSticker: stickGroup]; }}

Once the sticker selection is complete, we can apply the sticker to the video recording. Similar to filter processing, in the video data callback of a short video shot, a sticker is applied:

– (CVPixelBufferRef)shortVideoRecorder:(PLShortVideoRecorder *)recorder CameraSourceDidGetPixelBuffer: CVPixelBufferRef pixelBuffer {/ / filter processing pixelBuffer = [self. Filter process: pixelBuffer];

/ / TuSDK stickers processing pixelBuffer = [self. FilterProcessor syncProcessPixelBuffer: pixelBuffer]; [self.filterProcessor destroyFrameData];

return pixelBuffer; }

2.7 Segmented variable speed shooting

If you want to shoot a video at a fast or slow speed, you can set the shooting rate:

self.shortVideoRecorder.recoderRate = PLSVideoRecoderRateTopFast;

2.8 Ending the Shooting

To end the recording of a video, call the stop recording method:

[self.shortVideoRecorder stopRecording];

After the call to stop recording, the saved video is returned via the recording completion callback:

– (void)shortVideoRecorder:(PLShortVideoRecorder *)recorder didFinishRecordingToOutputFileAtURL:(NSURL *)fileURL fileDuration:(CGFloat)fileDuration totalDuration:(CGFloat)totalDuration {

}

Stop audio and video collection. If the video is no longer needed, you can call the stop collection method to end the shooting:

[self.shortVideoRecorder stopCaptureSession];

Video editing

3.1 Starting Editing

Editing class PLShortVideoEditor supports rendering audio and video, watermark, filter, background music, MV effects and other functions

Initialize and start edits:

self.shortVideoEditor = [[PLShortVideoEditor alloc] initWithAsset:asset videoSize:CGSizeZero]; self.shortVideoEditor.delegate = self; self.shortVideoEditor.loopEnabled = YES; [self.view addSubview:self.shortVideoEditor.preview];

[self.shortVideoEditor startEditing];

3.2 Add background music

Add background music

[the self shortVideoEditor addMusic: musicURL timeRange: timeRange volume: 1.0];

Adjust the volume of background music

[the self shortVideoEditor updateMusic: timeRange volume: 0.5];

3.3 Adding text effects

The logic for adding text is the same as that for adding stickers. Users can use the PLSStickerView class that has been wrapped up in the seven Cows short video Demo to add text and stickers:

PLSStickerView *stickerView = [[PLSStickerView alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];

NSMutableDictionary *stickerSettings = [[NSMutableDictionary alloc] init]; stickerSettings[PLSStickerKey] = stickerView; stickerSettings[PLSSizeKey] = [NSValue valueWithCGSize:viewSize]; stickerSettings[PLSPointKey] = [NSValue valueWithCGPoint:viewPoint]; CGFloat rotation = atan2f(transform.b, transform.a); rotation = rotation * (180 / M_PI); stickerSettings[PLSRotationKey] = [NSNumber numberWithFloat:rotation];

[self.stickerSettingsArray addObject:stickerSettings];

3.4 Adding Tiktok Effects

Qiniu short video SDK does not integrate special effects, but like face stickers, it can easily access third-party special effects. Here we also take the special effects of painting as an example to demonstrate how special effects can be added

First, initialize the effects additive:

self.filterProcessor = [[TuSDKFilterProcessor alloc] initWithFormatType:kCVPixelFormatType_32BGRA isOriginalOrientation:isOriginalOrientation]; self.filterProcessor.delegate = self; self.filterProcessor.mediaEffectDelegate = self; / / the default closed dynamic stickers function, namely close facial recognition self. FilterProcessor. EnableLiveSticker = NO;

Added out-of-body effects:

TuSDKMediaSceneEffectData *effectData = [[TuSDKMediaSceneEffectData alloc] initWithEffectsCode:@”LiveSoulOut01″];

effectData.atTimeRange = [TuSDKTimeRange makeTimeRangeWithStart:kCMTimeZero end:CMTimeMake(INTMAX_MAX, 1)];

[self.filterProcessor addMediaEffect:effectData];

Application effects. In the short video Edit video data callback, apply the effects to preview the effects:

– (CVPixelBufferRef)shortVideoEditor:(PLShortVideoEditor *)editor didGetOriginPixelBuffer:(CVPixelBufferRef)pixelBuffer Timestamp: (CMTime timestamp) {/ / application effects pixelBuffer = [self. FilterProcessor syncProcessPixelBuffer: pixelBuffer frameTime:timestamp]; [self.filterProcessor destroyFrameData];

return pixelBuffer; }

Video export

That completes our short video editing, and now we export the edited video using PLSAVAssetExportSession to save it to our local album

Initialize the video exporter:

NSMutableDictionary *outputSettings = [[NSMutableDictionary alloc] init]; NSMutableDictionary *movieSettings = [[NSMutableDictionary alloc] init]; NSMutableDictionary *backgroundAudioSettings = [NSMutableDictionary alloc] init]; NSMutableArray *stickerSettingsArray = [[NSMutableArray alloc] init]; NSMutableArray *audioSettingsArray = [[NSMutableArray alloc] init];

// Set the export information to outputSettings // do setting…

AVAsset *asset = movieSettings[PLSAssetKey]; PLSAVAssetExportSession *exportSession = [[PLSAVAssetExportSession alloc] initWithAsset:asset]; exportSession.outputFileType = PLSFileTypeMPEG4; exportSession.shouldOptimizeForNetworkUse = YES; exportSession.outputSettings = self.outputSettings; exportSession.delegate = self; exportSession.isExportMovieToPhotosAlbum = YES;

Set blocks related to exported videos:

__weak typeof(self) weakSelf = self;

[exportSession setCompletionBlock:^(NSURL * URL) {NSLog(@” Video saved to album “);}];

[exportSession setFailureBlock:^(NSError *error) {NSLog(@” Failed to export video “);}];

[exportSession setProcessingBlock:^(float Progress) {NSLog(@” Video export complete percentage: %f”, process);}];

Implement PLSAVAssetExportSessionDelegate video data correction method, special effects:

– (CVPixelBufferRef)assetExportSession:(PLSAVAssetExportSession *)assetExportSession didOutputPixelBuffer:(CVPixelBufferRef)pixelBuffer timestamp:(CMTime)timestamp {

/ / special effects pixelBuffer = [self filterProcessor syncProcessPixelBuffer: pixelBuffer frameTime: timestamp]; [self.filterProcessor destroyFrameData];

return pixelBuffer; }

conclusion

The above operation is to use qiniu short video SDK to quickly complete a similar douyin short video application introduction. Seven Niuyun short video also provides many function points, such as:

The recording phase

Real-time filter, real-time beauty, automatic vertical and horizontal screen control, AR special effects shooting, segmenting double speed shooting, material and video co-shooting, screen recording, View recording, sticker function, background music, big eyes/thin face

Edit stage

Real-time Watermarking, Video Splicing, time reversal, segmenting effects, MV effects, sticker function, Big eyes/Thin face, Multi-video merge, Video cutting, multi-sound, double speed processing, Video rotation, dubbing

The specific use of these functions in this will not be described more, for details can be viewed to the seven Niuyun short video SDK document.

Although short videos can be developed and put online quickly in a day, there are still many pits in the actual process. The most common points are compatibility and performance:

• Compatibility: There are many types of mobile phones, especially Android. There are many models and different versions of Android system. Besides, different manufacturers have made more or less modifications to the Android native system, so some function points are no longer available on a few mobile phones. Therefore, during the development process, it is necessary to test different models and different versions of the system, so as to avoid serious problems such as unavailability or failure of function points or even crash after the launch of the product by a few users.

• Performance: Due to the popularity of 4G networks, users have higher and higher requirements for video definition, which requires higher resolution of video. Mobile terminal processing capacity is limited, and processing high-resolution video, it is very memory and CPU consumption, especially some low-end mobile phone configuration is very low, in short video recording or editing stage to add filters, MV effects and other processing is easy to lose frames or saved video blurred. Therefore, video frame zooming, clipping, adding filters, adding MV and other processing as far as possible to use GPU to do, these requirements to have a deep understanding of OpenGL.

In 2018, the trend of short video will continue, but the form is not limited to pan-entertainment platforms. More and more comprehensive platforms will embed short video, improve user activity rate and application opening rate, so as to build vertical short video within the platform, ushering in the short video 2.0 era. Developers can implement shooting and editing functions based on the above practices to help short video products go online quickly.

Shooting + editing + processing + upload + storage + distribution acceleration + play in one, helping short video quickly online!

· Small package size to 1.1m, low power consumption and no heat · Compatible with mainstream models, stable and high availability · Open and clear interface, convenient function customization · Self-developed kernel player, smooth video without lag

People say

The Great Talk column is dedicated to the discovery of the minds of technical people, including technical practices, technical dry goods, technical insights, growth tips, and anything worth discovering. We hope to gather the best technical people to dig out the original, sharp and contemporary sound.