一人一天，如何開發一個抖音級的短視訊？

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 （ github.com/anhaoxiong/…
• 下載短視訊 SDK（ github.com/pili-engine…
視訊拍攝
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 時代。開發者們可基於以上實踐實現拍攝、編輯功能，幫助短視訊產品快速上線。
七牛雲短視訊 SDK 拍攝+編輯+處理+上傳+儲存+分發加速+播放於一體，助力短視訊快速上線！
· 包體小至 1.1M，低功耗不發熱 · 相容主流機型，穩定高可用 · 開放清晰介面，方便功能定製 · 全自研核心播放器，視訊流暢無卡頓
牛人說
「牛人說」專欄致力於技術人思想的發現，其中包括技術實踐、技術乾貨、技術見解、成長心得，還有一切值得被發現的內容。我們希望集合最優秀的技術人，挖掘獨到、犀利、具有時代感的聲音。