一人一天，如何开发一个抖音级的短视频？_文化 & 方法_安浩雄



 写点什么

7 月，抖音全球日活跃用户 1.5 亿，月活跃用户突破 5 亿，其活跃程度及用户粘性概括为「抖音五分钟，人间两小时」。毫无疑问抖音是 2018 年最火应用之一。抖音的火爆，不仅意味着垂直短视频可以获得爆发式增长，综合平台嵌入短视频，更能极大提高用户活跃度。

当前短视频技术渐进成熟，然而要快速上线短视频，除了必备的 Android、iOS 开发经验，更重要的是选择一个接口清晰、功能丰富、包体小的 SDK 接入。今天我将基于七牛云短视频 SDK，手把手教你一天打造一个抖音级的短视频平台。

流程列表
开发一个短视频最主要的流程分为 3 个，下面我将分步教你实现这 3 个流程下的各个功能点，功能点 API 可按需调用：
视频拍摄
a.启动拍摄
b.给拍摄添加背景音乐
c.开始拍摄
d.添加美颜
e.添加滤镜
f.添加人脸贴纸
g.分段变速拍摄
h.结束拍摄
视频编辑
a.开始编辑
b.添加背景音乐
c.添加文字特效
d.添加抖音特效
视频导出

开发前准备

下载Demo
下载短视频SDK

视频拍摄

2.1 启动拍摄

首先包含七牛短视频 SDK 头文件 PLShortVideoKit.h ：

#import <PLShortVideoKit/PLShortVideoKit.h>

复制代码

然后添加一个 PLShortVideoRecorder 属性：

@property (nonatomic,strong) PLShortVideoRecorder *shortVideoRecorder;

复制代码

创建音视频的采集和编码配置对象，这里我们使用默认配置，开发者可以根据自己的需求修改配置：

PLSVideoConfiguration *videoConfiguration = [PLSVideoConfiguration defaultConfiguration];
PLSAudioConfiguration *audioConfiguration = [PLSAudioConfiguration defaultConfiguration];

复制代码

创建拍摄 shortVideoRecorder 对象：

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

复制代码

添加摄像头预览视图:

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

复制代码

至此，基本配置完成，我们可以启动摄像头预览:

[self.shortVideoRecorder startCaptureSession];

复制代码

2.2 给拍摄添加背景音乐

在开始录制之前，我们可以添加背景音乐：

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

复制代码

背景音乐只能在开始录制之前添加，一旦录制开始了，不能再添加，此时只有删除已经录制的视频文件，才能添加背景音乐。

2.3 开始拍摄

录制的视频存放路径由 SDK 内部自动生成：

[self.shortVideoRecorder startRecording];

复制代码

开发者也可以自己传入录制的视频存放路径：

[self.shortVideoRecorder startRecording:customFileURL];

复制代码

2.4 添加美颜

七牛短视频 SDK 提供了美颜功能，开发者只需要一个简单的参数设置即可以打开美颜功能：

[self.shortVideoRecorder setBeautifyModeOn:YES];

复制代码

2.5 添加滤镜

七牛短视频 SDK 内部提供了 30 多种滤镜格式，开发者使用滤镜需要在工程中包含 PLShortVideoKit.bundle，这里面存放了滤镜的图片资源，开发者还可以添加自己的滤镜图片。

初始化滤镜:

// 初始化滤镜self.filter = [[PLSFilter alloc] init];
// 设置滤镜色彩图片路径NSString *bundlePath = [NSBundle mainBundle].bundlePath;NSString *colorImagePath = [bundlePath stringByAppendingString:@"/PLShortVideoKit.bundle/colorFilter/candy/filter.png"];self.filter.colorImagePath = colorImagePath;

复制代码

在短视频数据回调方法中，我们可以用上面初始化好的滤镜：

- (CVPixelBufferRef)shortVideoRecorder:(PLShortVideoRecorder *)recorder cameraSourceDidGetPixelBuffer:(CVPixelBufferRef)pixelBuffer {    // 进行滤镜处理    pixelBuffer = [self.filter process:pixelBuffer];
    return pixelBuffer;}

复制代码

2.6 添加人脸贴纸

七牛短视频 SDK 没有提供人脸识别的贴纸功能，但是我们 SDK 能很容易的接入友商的贴纸功能，我们以添加涂图的贴纸举例说明

包含涂图的头文件:

#import <TuSDKVideo/TuSDKVideo.h>#import "StickerScrollView.h"

复制代码

增加贴纸添加器和贴纸选择 view:

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

复制代码

初始化贴纸添加的实例:

self.filterProcessor = [[TuSDKFilterProcessor alloc] initWithFormatType:kCVPixelFormatType_32BGRA isOriginalOrientation:NO];self.filterProcessor.outputPixelFormatType = lsqFormatTypeBGRA;// TuSDKFilterProcessor 默认不启用贴纸，这里需要主动启用贴纸功能[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;

复制代码

选择贴纸。在贴纸选择的回调，处理贴纸：

- (void)clickStickerViewWith:(TuSDKPFStickerGroup *)stickGroup {    if (!stickGroup) {        // 为nil时 移除已有贴纸组；        [_filterProcessor removeMediaEffectsWithType:TuSDKMediaEffectDataTypeSticker];    } else {    // 选中了某个贴纸，将其添加到 filterProcessor 中    [self.filterProcessor showGroupSticker:stickGroup];          }}

复制代码

贴纸选择完成之后，我们可以将贴纸应用到视频录制中。和滤镜处理类似，在短视频拍摄的视频数据回调中，应用贴纸：

- (CVPixelBufferRef)shortVideoRecorder:(PLShortVideoRecorder *)recorder cameraSourceDidGetPixelBuffer:(CVPixelBufferRef)pixelBuffer {    // 进行滤镜处理    pixelBuffer = [self.filter process:pixelBuffer];
    // TuSDK 进行贴纸处理    pixelBuffer =  [self.filterProcessor syncProcessPixelBuffer:pixelBuffer];    [self.filterProcessor destroyFrameData];
    return pixelBuffer;}

复制代码

2.7 分段变速拍摄

如果想拍摄的视频以快速或者慢速播放，可以设置拍摄速率：

self.shortVideoRecorder.recoderRate = PLSVideoRecoderRateTopFast;

复制代码

2.8 结束拍摄

如果要结束某一段视频的录制，可以调用停止录制方法：

[self.shortVideoRecorder stopRecording];

复制代码

调用停止录制之后，保存的视频会通过录制完成回调返回出来:

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

复制代码

停止音视频采集。如果不再需要拍摄视频，可以调用停止采集方法来结束拍摄:

[self.shortVideoRecorder stopCaptureSession];

复制代码

视频编辑

3.1 开始编辑

编辑类 PLShortVideoEditor 支持渲染音视频、水印、滤镜、背景音乐、MV 特效等功能

初始化和启动编辑：

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 添加背景音乐

添加背景音乐

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

复制代码

调节背景音乐音量

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

复制代码

3.3 添加文字特效

添加文字的逻辑和添加贴纸使用的是同一个逻辑，用户可以使用七牛短视频 Demo 中已经包装好的添加文字、贴纸的类 PLSStickerView:

PLSStickerView *stickerView = [[PLSStickerView alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];            
// 以字典的形式，保存 stickerView 信息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 添加抖音特效

七牛短视频 SDK 没有集成特效，但是和人脸贴纸一样，可以轻松的接入第三方的特效。下面我们还以添加涂图的特效为例，演示特效的添加方式

首先，初始化特效添加器：

self.filterProcessor = [[TuSDKFilterProcessor alloc] initWithFormatType:kCVPixelFormatType_32BGRA isOriginalOrientation:isOriginalOrientation];self.filterProcessor.delegate = self;self.filterProcessor.mediaEffectDelegate = self;// 默认关闭动态贴纸功能，即关闭人脸识别功能self.filterProcessor.enableLiveSticker = NO;

复制代码

添加灵魂出窍特效：

TuSDKMediaSceneEffectData *effectData = [[TuSDKMediaSceneEffectData alloc] initWithEffectsCode:@"LiveSoulOut01"];
effectData.atTimeRange = [TuSDKTimeRange makeTimeRangeWithStart:kCMTimeZero end:CMTimeMake(INTMAX_MAX, 1)];
[self.filterProcessor addMediaEffect:effectData];

复制代码

应用特效。在短视频编辑视频数据回调里面，将特效应用，以便预览特效效果：

- (CVPixelBufferRef)shortVideoEditor:(PLShortVideoEditor *)editor didGetOriginPixelBuffer:(CVPixelBufferRef)pixelBuffer timestamp:(CMTime)timestamp {    // 应用特效    pixelBuffer = [self.filterProcessor syncProcessPixelBuffer:pixelBuffer frameTime:timestamp];    [self.filterProcessor destroyFrameData];
    return pixelBuffer;}

复制代码

视频导出

上面我们的短视频编辑就完成了，现在我们将编辑的视频使用 PLSAVAssetExportSession

导出来保存到本地相册

初始化视频导出器:

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];
// 将导出信息设置到 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;

复制代码

设置导出视频相关 block:

__weak typeof(self) weakSelf = self;
[exportSession setCompletionBlock:^(NSURL *url) {   NSLog(@"视频已保存到相册中");}];
[exportSession setFailureBlock:^(NSError *error) {  NSLog(@"导出视频失败");}];
[exportSession setProcessingBlock:^(float progress) {   NSLog(@"视频导出完成百分比: %f", process);}];

复制代码

实现 PLSAVAssetExportSessionDelegate 的视频数据回调方法，进行特效处理：

- (CVPixelBufferRef)assetExportSession:(PLSAVAssetExportSession *)assetExportSession didOutputPixelBuffer:(CVPixelBufferRef)pixelBuffer timestamp:(CMTime)timestamp {
    // 特效处理      pixelBuffer = [self.filterProcessor syncProcessPixelBuffer:pixelBuffer frameTime:timestamp];    [self.filterProcessor destroyFrameData];
    return pixelBuffer;}

复制代码

总结

以上操作就是使用七牛短视频 SDK 快速完成一个类似抖音短视频应用的介绍。七牛云短视频还提供了很多功能点，如：

录制阶段

实时滤镜、实时美颜、自动横竖屏控制、AR 特效拍摄、分段倍速拍摄、素材视频合拍、录屏功能、View 录制、贴纸功能、背景音乐、大眼/瘦脸

编辑阶段

实时水印、视频拼接、时光倒流、分段特效、MV 特效、贴纸功能、大眼/瘦脸、多视频合并、视频切割、多音效、倍速处理、视频旋转、配音

这些功能的具体使用在这就不多加描述，了解详情可至七牛云短视频 SDK 文档查看。

短视频虽说可以一天开发快速上线，但是在实际过程中，还是会有很多坑的，最通用的点即为兼容性和性能：

兼容性：现在手机类型众多，尤其是 Android 端，机型多、Android 系统各版本间存在差异，且不同厂家对 Android 原生系统做了或多或少的修改，某些功能点在少数手机上变得不再可用。因此开发过程中需要多测试不同机型和不同版本的系统，避免产品上线之后少数用户抱怨功能点不好用、用不了甚至是 crash 等严重问题。
性能：由于 4G 网络的普及，用户对视频的清晰度要求越来越高，这要求视频需要较高的分辨率。移动终端处理能力有限，而处理高分辨的视频，是很耗内存和 CPU 的，尤其是一些低端手机配置很低，在短视频录制或者编辑阶段添加滤镜、MV 特效等处理中很容易出现丢帧或者保存出来的视频画面模糊。因此对视频帧的缩放、剪裁、加滤镜、加 MV 等处理尽量使用 GPU 来做，这些要求对 OpenGL 有较深的认识。

2018 年短视频的风会继续的刮，但形式不仅仅局限于泛娱乐平台，越来越多的综合平台将嵌入短视频，提高用户活跃率和应用打开率，从而搭建平台内的垂直短视频，迎来短视频 2.0 时代。开发者们可基于以上实践实现拍摄、编辑功能，帮助短视频产品快速上线。

本文转载自公众号七牛云（ID：qiniutek）。

原文链接：

https://mp.weixin.qq.com/s/avZg5MkFDpDdRrSWPR81Hg