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

時間  2019-11-16
標籤 一人 一天 1天 如何 開發 一個 音級 視頻 简体版
原文   原文鏈接

git

7 月，抖音全球日活躍用戶 1.5 億，月活躍用戶突破 5 億，其活躍程度及用戶粘性歸納爲「抖音五分鐘，人間兩小時」。毫無疑問抖音是 2018 年最火應用之一。抖音的火爆，不只意味着垂直短視頻能夠得到爆發式增加，綜合平臺嵌入短視頻，更能極大提升用戶活躍度。github

當前短視頻技術漸進成熟，然而要快速上線短視頻，除了必備的 Android、iOS 開發經驗，更重要的是選擇一個接口清晰、功能豐富、包體小的 SDK 接入。今天我將基於七牛雲短視頻 SDK，手把手教你一天打造一個抖音級的短視頻平臺。bash

流程列表

開發一個短視頻最主要的流程分爲 3 個，下面我將分步教你實現這 3 個流程下的各個功能點，功能點 API 可按需調用：網絡

視頻拍攝 a.啓動拍攝 b.給拍攝添加背景音樂 c.開始拍攝 d.添加美顏 e.添加濾鏡 f.添加人臉貼紙 g.分段變速拍攝 h.結束拍攝ide

視頻編輯 a.開始編輯 b.添加背景音樂 c.添加文字特效 d.添加抖音特效oop

視頻導出性能

開發前準備

• 下載Demo （github.com/anhaoxiong/…測試

• 下載短視頻 SDK（github.com/pili-engine…ui

視頻拍攝

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

牛人說

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程