In July, Douyin had 150 million global daily active users and 500 million monthly active users. The level of activity and user engagement can be summarized as “five minutes for douyin and two hours for human beings”. Tiktok was undoubtedly one of the most popular apps of 2018. The popularity of Douyin not only means that vertical short videos can achieve explosive growth, but also that integrated platforms can embed short videos, which can greatly improve user activity.

At present, short video technology is gradually maturing. However, in order to quickly launch short video, in addition to the necessary Android and iOS development experience, it is more important to choose an SDK with clear interface, rich functions and small package body. Today I will be based on the Seven cow Cloud short video SDK, hand in hand to teach you a day to build a douyin level short video platform.

Process list

The development of a short video is mainly divided into three processes, and I will teach you to implement each function point under the three processes step by step. Function point API can be called on demand:

Video shooting a. Start shooting B. Add background music to the shooting C. Start shooting D. Add beauty e. Add filter F. Add face sticker G. Segmenting variable speed shooting h. The end

Video editing 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

First contains seven cattle short video SDK header file plshortVideokit.h:

#import <PLShortVideoKit/PLShortVideoKit.h>
Copy the code

Then add a PLShortVideoRecorder property:

@property (nonatomic,strong) PLShortVideoRecorder *shortVideoRecorder;
Copy the code

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

PLSVideoConfiguration *videoConfiguration = [PLSVideoConfiguration defaultConfiguration];

PLSAudioConfiguration *audioConfiguration = [PLSAudioConfiguration defaultConfiguration];
Copy the code

Create the shooting shortVideoRecorder object:

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

Add a camera preview view:

[self.view addSubview:self.shortVideoRecorder.previewView];
Copy the code

At this point, the basic configuration is complete and we can launch the camera preview:

[self.shortVideoRecorder startCaptureSession];
Copy the code

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];
Copy the code

Background music can only be added before the recording starts. Once the recording starts, it cannot be added again. At this point, background music can only be added after deleting the recorded video file.

2.3 Start shooting

The storage path of the recorded video is automatically generated by the SDK:

[self.shortVideoRecorder startRecording];
Copy the code

Developers can also pass in the recorded video location themselves:

[self.shortVideoRecorder startRecording:customFileURL];
Copy the code

2.4 Add beauty

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

[self.shortVideoRecorder setBeautifyModeOn:YES];
Copy the code

2.5 Adding a Filter

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

Initialize the filter:

// 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;
Copy the code

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;
}
Copy the code

2.6 Add face stickers

Qiniu short video SDK does not provide the stickers function of face recognition, but our SDK can easily access the stickers function of friends. We will add the stickers with pictures as an example

Header file containing paint:

#import <TuSDKVideo/TuSDKVideo.h>
#import "StickerScrollView.h"
Copy the code

To add stickers and stickers select View:

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

Initialize the added instance of the sticker:

self.filterProcessor = [[TuSDKFilterProcessor alloc] initWithFormatType:kCVPixelFormatType_32BGRA isOriginalOrientation:NO]; self.filterProcessor.outputPixelFormatType = lsqFormatTypeBGRA; // TuSDKFilterProcessor is disabled by default. You need to enable the sticker function [self.filterProcessor]setEnableLiveSticker:YES];

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

Select stickers. In the sticker selection callback, 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]; }}Copy the code

After the stickers are selected, we can apply the stickers to the video recording. Similar to the filter processing, in the video data callback of a short video shot, apply the sticker:

- (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;
}
Copy the code

2.7 Segmental variable speed shooting

If you want the video to play fast or slow, you can set the shooting speed:

self.shortVideoRecorder.recoderRate = PLSVideoRecoderRateTopFast;
Copy the code

2.8 Finish shooting

If you want to end the recording of a video, you can call the stop recording method:

[self.shortVideoRecorder stopRecording];
Copy the code

After calling stop recording, the saved video is returned by the recording completion callback:

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

}
Copy the code

Stop audio and video capture. If you no longer need to shoot the video, you can call the stop capture method to end the shooting:

[self.shortVideoRecorder stopCaptureSession];
Copy the code

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 editing:

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];
Copy the code

3.2 Adding Background Music

Add background Music

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

Adjust the volume of background music

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

3.3 Adding text effects

The logic for adding text is the same as for adding stickers. You can use PLSStickerView, which is already wrapped in the short video Demo:

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];Copy the code

3.4 Adding tiktok effects

Qiniu short video SDK does not have integrated effects, but like face stickers, it can easily access third-party effects. Let’s also show you how to add a special effect by using the example of adding a paint

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;Copy the code

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];
Copy the code

Apply special effects. In the short video editing 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;
}
Copy the code

Video export

With our short video editing done above, we will now export the edited video to our local album using PLSAVAssetExportSession

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 exported 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;
Copy the code

Set the related block for exporting video:

__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(@"Percentage of video export completed: % F", process);
}];
Copy the code

Implement PLSAVAssetExportSessionDelegate video data correction method, special effects:

- (CVPixelBufferRef)assetExportSession:(PLSAVAssetExportSession *)assetExportSession DidOutputPixelBuffer :(CVPixelBufferRef)pixelBuffer timestamp:(CMTime)timestamp {// pixelBuffer = [self.filterProcessor syncProcessPixelBuffer:pixelBuffer frameTime:timestamp]; [self.filterProcessor destroyFrameData];return pixelBuffer;
}
Copy the code

conclusion

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

The recording phase

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

Edit stage

Real-time watermarking, video splicing, time back, segmenting special effects, MV special effects, sticker function, big eyes/thin face, multi-video merge, video cutting, multi-sound effects, double speed processing, video rotation, dubbing

The specific use of these functions in this will not be described more, to learn more details can be viewed in the short video SDK documentation qiniuyun.

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

• Compatibility: There are so many types of phones, especially Android, there are so many models, there are so many different Versions of Android, and different manufacturers have made more or less changes to the original Android system, some feature points are no longer available on a few phones. Therefore, it is necessary to test different models and different versions of the system in the development process, so as to avoid the serious problems such as unusability, unusability and even crash of a few users after the launch of the product.

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

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

Shoot + edit + processing + upload + storage + distribution speed + play in the new Gym’s SDK gleason, which helps fast online short video!

· The package body is as small as 1.1m, low power consumption and no heat consumption · Compatible with mainstream models, stable and high availability · Open and clear interface, convenient function customization · All self-developed core player, smooth video without jam

People say

The column is devoted to the discovery of technical people’s thoughts, including technical practices, technical dry goods, technical insights, growth experiences, and anything worth discovering. We hope to gather the best technical people to find unique, sharp, with the sense of The Times.