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

七牛雲發表於2018-09-17



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

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，低功耗不發熱 · 相容主流機型，穩定高可用 · 開放清晰介面，方便功能定製 · 全自研核心播放器，視訊流暢無卡頓

牛人說

「牛人說」專欄致力於技術人思想的發現，其中包括技術實踐、技術乾貨、技術見解、成長心得，還有一切值得被發現的內容。我們希望集合最優秀的技術人，挖掘獨到、犀利、具有時代感的聲音。

相關文章