iOS視頻直播初窺:高仿<喵播APP>

視頻直播初窺

視頻直播，能夠分爲 採集，前處理，編碼，傳輸, 服務器處理，解碼，渲染

• 採集: iOS系統由於軟硬件種類很少, 硬件適配性比較好, 因此比較簡單. 而Android端市面上機型衆多, 要作些機型的適配工做.PC端是最麻煩的, 各類奇葩攝像頭驅動.因此如今不少的中小型直播平臺, 都放棄了PC的直播, 更有一些直播平臺只作iOS端的視頻直播.

• 前處理: 美顏算法,視頻的模糊效果, 水印等都是在這個環節作. 目前iOS端最著名開源框架的毫無疑問就是GPUImage.其中內置了125種渲染效果, 還支持各類腳本自定義. 我高仿的喵播的美顏效果也是基於GPUImage的.

• 編碼: 重難點在於要在分辨率，幀率，碼率，GOP等參數設計上找到最佳平衡點。iOS8以後, Apple開放了VideoToolbox.framework, 能夠直接進行硬編解碼, 這也是爲何如今大多數直播平臺最低只支持到iOS8的緣由之一. iOS端硬件兼容性比較好, 能夠直接採起硬編碼. 而Android得硬編碼又是一大坑.

• 傳輸: 這塊通常都是交給CDN服務商. CDN只提供帶寬和服務器之間的傳輸, 發送端和接收端的網絡鏈接抖動緩存仍是要本身實現的.目前國內最大的CDN服務商應該是網宿.

• 服務器處理: 須要在服務器作一些流處理工做, 讓推送上來的流適配各個平臺各類不一樣的協議, 好比:RTMP,HLS,FLV...

• 解碼和渲染: 也就即音視頻的播放. 解碼毫無疑問也必需要硬解碼. iOS端兼容較好, Android依然大坑.這塊的難點在於音畫同步, 目前不少直播平臺這塊是硬傷.國內比較好的開源項目應該是B站開源的ijkplayer . 鬥魚就是基於ijkplayer 的, 本項目也是基於ijkplayer 的.

技術坑 : 降噪, 音頻解碼器, 藍牙適配, 回聲消除, 信令控制, 登陸, 鑑權, 權限管理, 狀態管理, 應用消息, 消息推送, 禮物系統, 即時聊天, 支付系統, 統計系統, 數據庫, 緩存, 分佈式文件存儲, 消息隊列, 運維繫統等等大小不一的坑等你來填!!!

資金坑 : 以帶寬爲例, 2萬人同時在線, 手機碼率在600KB, 每月的帶寬費用至少在30萬左右. 根據歡聚時代(YY)15年四季度財務報, 他們的帶寬成本爲人民幣1.611億元, 摺合每個月5000萬+. 人力成本+渠道支出和其餘支出就不詳談了.

社會坑: 還得每時每刻與各類黑暗勢力鬥爭, 包括色情, 廣告, 刷小號, 刷充值, 告侵權, DDos...(我反編譯喵播的官方APP, 他們的項目名就叫Shehui, O(∩_∩)O哈哈~)

項目下載地址

GitHub下載地址

前期準備

項目主要是基於ijkplayer 的. 最好是打包成framework. 本來我準備寫一個打包教程, 不事後來在簡書上發現了一篇特別詳細的打包blog, 分享給你們: http://www.jianshu.com/p/1f06b27b3ac0.

若是你根據教程打包失敗了(固然這種概率比較小), 我這還有一份我已經打包好的(Release版), 下載地址:
連接：http://pan.baidu.com/s/1eRVetdK 密碼：2dc0
下載後, 直接解壓便可.

項目文件結構

• Frameworks: 若是文件夾不存在, 點擊classes選擇Show in Finder, 新建一個便可, 將你打包的或者下載的framework拖入其中並拉進項目中. 你也能夠本身建一個文件夾, 把這個Frameworks直接delete便可

• Profile : 我的中心, 這裏面只有一個ProfileController. 由於總寫重複代碼, 都寫吐了, 這兒有興趣的本身寫一下吧, So easy...

• Network : 關於網絡鏈接的工具類. 關於網絡的實時監控, 網絡狀態的切換, 網絡請求的工具類都在這裏面.

• Other : 全局的常量. 固然你也能夠在裏面將文件結構更加細化.

• Home : 包含最新主播, 最熱直播, 關注的直播, 禮物排行榜等模塊. 還有最重要的視頻直播也在這裏面了.

• ShowTime :見名知意. 視頻直播的前處理, 智能美顏和H264硬編碼等都在這裏面.

• Main : UITabBarController和UINavigationController的配置

• Toos : 這兒命名有點不規範, 這裏面放置的都是項目用到的分類

• Login : 登陸模塊

• Resource : 項目用到的資源文件

項目詳解

• tip1: 判讀網絡類型.

  在觀看直播的時候, 咱們一般都是用WiFi或者3/4G(土豪級別的), 通常用戶在進行網絡切換的時候, 咱們都要給出友善的提示, 告訴TA: 您的網絡狀態切換到了XX狀態. 假設用戶從WiFi切換到4G, 你的應用也沒個提醒, 致使TA的流量歸零甚至欠了運營商一屁股的錢, 我想你的APP的用戶體驗也就歸零或者爲負了.

  咱們可使用蘋果的Reachability結合下面的代碼實時監聽網絡狀態的改變

1 typedef NS_ENUM(NSUInteger, NetworkStates) {
2     NetworkStatesNone, // 沒有網絡
3     NetworkStates2G, // 2G
4     NetworkStates3G, // 3G
5     NetworkStates4G, // 4G
6     NetworkStatesWIFI // WIFI
7 };

 1 // 判斷網絡類型
 2 + (NetworkStates)getNetworkStates
 3 {
 4     NSArray *subviews = [[[[UIApplication sharedApplication] valueForKeyPath:@"statusBar"] valueForKeyPath:@"foregroundView"] subviews];
 5     // 保存網絡狀態
 6     NetworkStates states = NetworkStatesNone;
 7     for (id child in subviews) {
 8         if ([child isKindOfClass:NSClassFromString(@"UIStatusBarDataNetworkItemView")]) {
 9             //獲取到狀態欄碼
10             int networkType = [[child valueForKeyPath:@"dataNetworkType"] intValue];
11             switch (networkType) {
12                 case 0:
13                    //無網模式
14                     states = NetworkStatesNone;
15                     break;
16                 case 1:
17                     states = NetworkStates2G;
18                     break;
19                 case 2:
20                     states = NetworkStates3G;
21                     break;
22                 case 3:
23                     states = NetworkStates4G;
24                     break;
25                 case 5:
26                 {
27                     states = NetworkStatesWIFI;
28                 }
29                     break;
30                 default:
31                     break;
32             }
33         }
34     }
35     //根據狀態選擇
36     return states;
37 }

tip2: 登陸模塊

若是你多運行幾回就會發現, 登陸模塊背景中播放的視頻是2個視頻每次隨機播放一個的.而且是無限重複的, 也就是說只要你一直呆着登陸界面, 就會單視頻循環播放當前的視頻. 這兒的登陸只是幾個按鈕, 沒有具體的登陸邏輯, 隨便點哪個按鈕均可以進入首頁.

咱們須要監聽視頻, 是否播放完成.

1 // 監聽視頻是否播放完成 

2 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(didFinish) name:IJKMPMoviePlayerPlaybackDidFinishNotification object:nil]; 

• 若是播放完成了, 讓IJKFFMoviePlayerController再次play便可 

1 - (void)didFinish
2 {
3     // 播放完以後, 繼續重播
4     [self.player play];
5 }

• tip3: 首頁

首頁

這種效果相信不少人都看到過或者作過.我簡單說一下個人作法(不必定是最佳的, 只是提供一個思路)

一個父控制器HomeViewController+三個子控制器(最熱/最新/關注. 每一個控制器各自管理本身的業務邏輯, 高內聚低耦合). 重寫HomeViewController的loadView, 將self.view替換成UIScrollView. 將三個子控制器的view添加到UIScrollView上便可. 其餘的效果實現, 請參照個人代碼, 都有詳細的中文註釋.

• tip4: 直播(面向觀衆端)
  這個是整個項目的重點之一了.這種直播的佈局, 應該是比較主流的了. 我下載的好多直播類APP都是這個項目佈局, 包括YY也是這種界面佈局.這個裏面涉及的東西比較多了, 三言兩語真說不清.

  簡單說一下已經實現的效果:
  A: 主播的直播
  B: 關聯主播的視頻直播, 默認是隻有界面, 沒有聲音的. 點擊該視圖能夠切換到此主播
  C: 下拉切換另外一個主播, 這個功能是很常見的. 作法是直播控制器是一個UICollectionViewController, 只有一個cell, 且cell.frame就是self.collectionViewb.bounds. 咱們進入直播控制器的時候, 實際上是傳進去一個關聯主播數組, 每次下拉的時候, 就加載數組裏面的主播
  D. 查看觀衆席的觀衆詳情
  E. 查看主播詳情
  F. 足跡: 粒子動畫, 後面詳解
  G. 彈幕: 點擊最下方的工具欄第一個按鈕能夠開啓/關閉彈幕, 後面詳解
  ...

• tip5: 粒子動畫實現遊客足跡
  粒子動畫的layer是添加到播放器的view上面的. 下面代碼有詳細的註釋

 1 CAEmitterLayer *emitterLayer = [CAEmitterLayer layer];
 2 // 發射器在xy平面的中心位置
 3 emitterLayer.emitterPosition = CGPointMake(self.moviePlayer.view.frame.size.width-50,self.moviePlayer.view.frame.size.height-50);
 4 // 發射器的尺寸大小
 5 emitterLayer.emitterSize = CGSizeMake(20, 20);
 6 // 渲染模式
 7 emitterLayer.renderMode = kCAEmitterLayerUnordered;
 8 // 開啓三維效果
 9 //    _emitterLayer.preservesDepth = YES;
10 NSMutableArray *array = [NSMutableArray array];
11 // 建立粒子
12 for (int i = 0; i<10; i++) {
13     // 發射單元
14     CAEmitterCell *stepCell = [CAEmitterCell emitterCell];
15     // 粒子的建立速率，默認爲1/s
16     stepCell.birthRate = 1;
17     // 粒子存活時間
18     stepCell.lifetime = arc4random_uniform(4) + 1;
19     // 粒子的生存時間容差
20     stepCell.lifetimeRange = 1.5;
21     // 顏色
22     // fire.color=[[UIColor colorWithRed:0.8 green:0.4 blue:0.2 alpha:0.1]CGColor];
23     UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"good%d_30x30", i]];
24     // 粒子顯示的內容
25     stepCell.contents = (id)[image CGImage];
26     // 粒子的名字
27     //            [fire setName:@"step%d", i];
28     // 粒子的運動速度
29     stepCell.velocity = arc4random_uniform(100) + 100;
30     // 粒子速度的容差
31     stepCell.velocityRange = 80;
32     // 粒子在xy平面的發射角度
33     stepCell.emissionLongitude = M_PI+M_PI_2;;
34     // 粒子發射角度的容差
35     stepCell.emissionRange = M_PI_2/6;
36     // 縮放比例
37     stepCell.scale = 0.3;
38     [array addObject:stepCell];
39 }
40 
41 emitterLayer.emitterCells = array;
42 [self.moviePlayer.view.layer insertSublayer:emitterLayer below:self.catEarView.layer];

tip6: 彈幕
彈幕使用的也是一個第三方輪子BarrageRenderer . 這個開源項目的文檔都是中文的, 用法也是很簡單的.

基本配置

1 _renderer = [[BarrageRenderer alloc] init];
2 // 設置彈幕的顯示區域. 基於父控件的.
3 _renderer.canvasMargin = UIEdgeInsetsMake(ALinScreenHeight * 0.3, 10, 10, 10);
4 [self.contentView addSubview:_renderer.view];

• 彈幕配置

   

   1 #pragma mark - 彈幕描述符生產方法
   2 /// 生成精靈描述 - 過場文字彈幕
   3 - (BarrageDescriptor *)walkTextSpriteDescriptorWithDirection:(NSInteger)direction
   4 {
   5     BarrageDescriptor * descriptor = [[BarrageDescriptor alloc]init];
   6     descriptor.spriteName = NSStringFromClass([BarrageWalkTextSprite class]);
   7     descriptor.params[@"text"] = self.danMuText[arc4random_uniform((uint32_t)self.danMuText.count)];
   8     descriptor.params[@"textColor"] = Color(arc4random_uniform(256), arc4random_uniform(256), arc4random_uniform(256));
   9     descriptor.params[@"speed"] = @(100 * (double)random()/RAND_MAX+50);
  10     descriptor.params[@"direction"] = @(direction);
  11     descriptor.params[@"clickAction"] = ^{
  12         UIAlertView *alertView = [[UIAlertView alloc]initWithTitle:@"提示" message:@"彈幕被點擊" delegate:nil cancelButtonTitle:@"取消" otherButtonTitles:nil];
  13         [alertView show];
  14     };
  15     return descriptor;
  16 }

  最後一步, 千萬要記得start

    1 [_renderer start]; 

 

tip7: 智能美顏效果
如今的直播平臺, 美顏是標配. 否則絕大多數的主播都是無法看的.美顏算法須要用到GPU編程, 須要懂圖像處理的人. 圖像處理這一塊我不是很熟悉, 相關的文獻也是看得雲裏霧裏的. 因此, 依然使用開源的輪子: GPUImage . 這個開源框架有近1.3W+star(7月5日數據), 真不是蓋的, 內置125種濾鏡效果, 沒有你想不到, 只有你不會用. 個人項目中都有詳細的用法, 仍是很簡單的. 在這裏摘抄一份其.h文件的註釋. 一方面方便你們修改我項目中的美顏效果, 另外一方面也是作個備份.(具體出處我真忘了, 若是有人找到了源地址連接, 能夠聯繫我加上)

  1 #import "GLProgram.h"
  2 
  3 // Base classes
  4 #import "GPUImageOpenGLESContext.h"
  5 #import "GPUImageOutput.h"
  6 #import "GPUImageView.h"
  7 #import "GPUImageVideoCamera.h"
  8 #import "GPUImageStillCamera.h"
  9 #import "GPUImageMovie.h"
 10 #import "GPUImagePicture.h"
 11 #import "GPUImageRawDataInput.h"
 12 #import "GPUImageRawDataOutput.h"
 13 #import "GPUImageMovieWriter.h"
 14 #import "GPUImageFilterPipeline.h"
 15 #import "GPUImageTextureOutput.h"
 16 #import "GPUImageFilterGroup.h"
 17 #import "GPUImageTextureInput.h"
 18 #import "GPUImageUIElement.h"
 19 #import "GPUImageBuffer.h"
 20 
 21 // Filters
 22 #import "GPUImageFilter.h"
 23 #import "GPUImageTwoInputFilter.h"
 24 
 25 
 26 #pragma mark - 調整顏色 Handle Color
 27 
 28 #import "GPUImageBrightnessFilter.h"                //亮度
 29 #import "GPUImageExposureFilter.h"                  //曝光
 30 #import "GPUImageContrastFilter.h"                  //對比度
 31 #import "GPUImageSaturationFilter.h"                //飽和度
 32 #import "GPUImageGammaFilter.h"                     //伽馬線
 33 #import "GPUImageColorInvertFilter.h"               //反色
 34 #import "GPUImageSepiaFilter.h"                     //褐色（懷舊）
 35 #import "GPUImageLevelsFilter.h"                    //色階
 36 #import "GPUImageGrayscaleFilter.h"                 //灰度
 37 #import "GPUImageHistogramFilter.h"                 //色彩直方圖，顯示在圖片上
 38 #import "GPUImageHistogramGenerator.h"              //色彩直方圖
 39 #import "GPUImageRGBFilter.h"                       //RGB
 40 #import "GPUImageToneCurveFilter.h"                 //色調曲線
 41 #import "GPUImageMonochromeFilter.h"                //單色
 42 #import "GPUImageOpacityFilter.h"                   //不透明度
 43 #import "GPUImageHighlightShadowFilter.h"           //提亮陰影
 44 #import "GPUImageFalseColorFilter.h"                //色彩替換（替換亮部和暗部色彩）
 45 #import "GPUImageHueFilter.h"                       //色度
 46 #import "GPUImageChromaKeyFilter.h"                 //色度鍵
 47 #import "GPUImageWhiteBalanceFilter.h"              //白平橫
 48 #import "GPUImageAverageColor.h"                    //像素平均色值
 49 #import "GPUImageSolidColorGenerator.h"             //純色
 50 #import "GPUImageLuminosity.h"                      //亮度平均
 51 #import "GPUImageAverageLuminanceThresholdFilter.h" //像素色值亮度平均，圖像黑白（有相似漫畫效果）
 52 
 53 #import "GPUImageLookupFilter.h"                    //lookup 色彩調整
 54 #import "GPUImageAmatorkaFilter.h"                  //Amatorka lookup
 55 #import "GPUImageMissEtikateFilter.h"               //MissEtikate lookup
 56 #import "GPUImageSoftEleganceFilter.h"              //SoftElegance lookup
 57 
 58 
 59 
 60 
 61 #pragma mark - 圖像處理 Handle Image
 62 
 63 #import "GPUImageCrosshairGenerator.h"              //十字
 64 #import "GPUImageLineGenerator.h"                   //線條
 65 
 66 #import "GPUImageTransformFilter.h"                 //形狀變化
 67 #import "GPUImageCropFilter.h"                      //剪裁
 68 #import "GPUImageSharpenFilter.h"                   //銳化
 69 #import "GPUImageUnsharpMaskFilter.h"               //反遮罩銳化
 70 
 71 #import "GPUImageFastBlurFilter.h"                  //模糊
 72 #import "GPUImageGaussianBlurFilter.h"              //高斯模糊
 73 #import "GPUImageGaussianSelectiveBlurFilter.h"     //高斯模糊，選擇部分清晰
 74 #import "GPUImageBoxBlurFilter.h"                   //盒狀模糊
 75 #import "GPUImageTiltShiftFilter.h"                 //條紋模糊，中間清晰，上下兩端模糊
 76 #import "GPUImageMedianFilter.h"                    //中間值，有種稍微模糊邊緣的效果
 77 #import "GPUImageBilateralFilter.h"                 //雙邊模糊
 78 #import "GPUImageErosionFilter.h"                   //侵蝕邊緣模糊，變黑白
 79 #import "GPUImageRGBErosionFilter.h"                //RGB侵蝕邊緣模糊，有色彩
 80 #import "GPUImageDilationFilter.h"                  //擴展邊緣模糊，變黑白
 81 #import "GPUImageRGBDilationFilter.h"               //RGB擴展邊緣模糊，有色彩
 82 #import "GPUImageOpeningFilter.h"                   //黑白色調模糊
 83 #import "GPUImageRGBOpeningFilter.h"                //彩色模糊
 84 #import "GPUImageClosingFilter.h"                   //黑白色調模糊，暗色會被提亮
 85 #import "GPUImageRGBClosingFilter.h"                //彩色模糊，暗色會被提亮
 86 #import "GPUImageLanczosResamplingFilter.h"         //Lanczos重取樣，模糊效果
 87 #import "GPUImageNonMaximumSuppressionFilter.h"     //非最大抑制，只顯示亮度最高的像素，其餘爲黑
 88 #import "GPUImageThresholdedNonMaximumSuppressionFilter.h" //與上相比，像素丟失更多
 89 
 90 #import "GPUImageSobelEdgeDetectionFilter.h"        //Sobel邊緣檢測算法(白邊，黑內容，有點漫畫的反色效果)
 91 #import "GPUImageCannyEdgeDetectionFilter.h"        //Canny邊緣檢測算法（比上更強烈的黑白對比度）
 92 #import "GPUImageThresholdEdgeDetectionFilter.h"    //閾值邊緣檢測（效果與上差異不大）
 93 #import "GPUImagePrewittEdgeDetectionFilter.h"      //普瑞維特(Prewitt)邊緣檢測(效果與Sobel差很少，貌似更平滑)
 94 #import "GPUImageXYDerivativeFilter.h"              //XYDerivative邊緣檢測，畫面以藍色爲主，綠色爲邊緣，帶彩色
 95 #import "GPUImageHarrisCornerDetectionFilter.h"     //Harris角點檢測，會有綠色小十字顯示在圖片角點處
 96 #import "GPUImageNobleCornerDetectionFilter.h"      //Noble角點檢測，檢測點更多
 97 #import "GPUImageShiTomasiFeatureDetectionFilter.h" //ShiTomasi角點檢測，與上差異不大
 98 #import "GPUImageMotionDetector.h"                  //動做檢測
 99 #import "GPUImageHoughTransformLineDetector.h"      //線條檢測
100 #import "GPUImageParallelCoordinateLineTransformFilter.h" //平行線檢測
101 
102 #import "GPUImageLocalBinaryPatternFilter.h"        //圖像黑白化，並有大量噪點
103 
104 #import "GPUImageLowPassFilter.h"                   //用於圖像加亮
105 #import "GPUImageHighPassFilter.h"                  //圖像低於某值時顯示爲黑
106 
107 
108 #pragma mark - 視覺效果 Visual Effect
109 
110 #import "GPUImageSketchFilter.h"                    //素描
111 #import "GPUImageThresholdSketchFilter.h"           //閥值素描，造成有噪點的素描
112 #import "GPUImageToonFilter.h"                      //卡通效果（黑色粗線描邊）
113 #import "GPUImageSmoothToonFilter.h"                //相比上面的效果更細膩，上面是粗曠的畫風
114 #import "GPUImageKuwaharaFilter.h"                  //桑原(Kuwahara)濾波,水粉畫的模糊效果；處理時間比較長，慎用
115 
116 #import "GPUImageMosaicFilter.h"                    //黑白馬賽克
117 #import "GPUImagePixellateFilter.h"                 //像素化
118 #import "GPUImagePolarPixellateFilter.h"            //同心圓像素化
119 #import "GPUImageCrosshatchFilter.h"                //交叉線陰影，造成黑白網狀畫面
120 #import "GPUImageColorPackingFilter.h"              //色彩丟失，模糊（相似監控攝像效果）
121 
122 #import "GPUImageVignetteFilter.h"                  //暈影，造成黑色圓形邊緣，突出中間圖像的效果
123 #import "GPUImageSwirlFilter.h"                     //漩渦，中間造成捲曲的畫面
124 #import "GPUImageBulgeDistortionFilter.h"           //凸起失真，魚眼效果
125 #import "GPUImagePinchDistortionFilter.h"           //收縮失真，凹面鏡
126 #import "GPUImageStretchDistortionFilter.h"         //伸展失真，哈哈鏡
127 #import "GPUImageGlassSphereFilter.h"               //水晶球效果
128 #import "GPUImageSphereRefractionFilter.h"          //球形折射，圖形倒立
129 
130 #import "GPUImagePosterizeFilter.h"                 //色調分離，造成噪點效果
131 #import "GPUImageCGAColorspaceFilter.h"             //CGA色彩濾鏡，造成黑、淺藍、紫色塊的畫面
132 #import "GPUImagePerlinNoiseFilter.h"               //柏林噪點，花邊噪點
133 #import "GPUImage3x3ConvolutionFilter.h"            //3x3卷積，高亮大色塊變黑，加亮邊緣、線條等
134 #import "GPUImageEmbossFilter.h"                    //浮雕效果，帶有點3d的感受
135 #import "GPUImagePolkaDotFilter.h"                  //像素圓點花樣
136 #import "GPUImageHalftoneFilter.h"                  //點染,圖像黑白化，由黑點構成原圖的大體圖形
137 
138 
139 #pragma mark - 混合模式 Blend
140 
141 #import "GPUImageMultiplyBlendFilter.h"             //一般用於建立陰影和深度效果
142 #import "GPUImageNormalBlendFilter.h"               //正常
143 #import "GPUImageAlphaBlendFilter.h"                //透明混合,一般用於在背景上應用前景的透明度
144 #import "GPUImageDissolveBlendFilter.h"             //溶解
145 #import "GPUImageOverlayBlendFilter.h"              //疊加,一般用於建立陰影效果
146 #import "GPUImageDarkenBlendFilter.h"               //加深混合,一般用於重疊類型
147 #import "GPUImageLightenBlendFilter.h"              //減淡混合,一般用於重疊類型
148 #import "GPUImageSourceOverBlendFilter.h"           //源混合
149 #import "GPUImageColorBurnBlendFilter.h"            //色彩加深混合
150 #import "GPUImageColorDodgeBlendFilter.h"           //色彩減淡混合
151 #import "GPUImageScreenBlendFilter.h"               //屏幕包裹,一般用於建立亮點和鏡頭眩光
152 #import "GPUImageExclusionBlendFilter.h"            //排除混合
153 #import "GPUImageDifferenceBlendFilter.h"           //差別混合,一般用於建立更多變更的顏色
154 #import "GPUImageSubtractBlendFilter.h"             //差值混合,一般用於建立兩個圖像之間的動畫變暗模糊效果
155 #import "GPUImageHardLightBlendFilter.h"            //強光混合,一般用於建立陰影效果
156 #import "GPUImageSoftLightBlendFilter.h"            //柔光混合
157 #import "GPUImageChromaKeyBlendFilter.h"            //色度鍵混合
158 #import "GPUImageMaskFilter.h"                      //遮罩混合
159 #import "GPUImageHazeFilter.h"                      //朦朧加暗
160 #import "GPUImageLuminanceThresholdFilter.h"        //亮度閾
161 #import "GPUImageAdaptiveThresholdFilter.h"         //自適應閾值
162 #import "GPUImageAddBlendFilter.h"                  //一般用於建立兩個圖像之間的動畫變亮模糊效果
163 #import "GPUImageDivideBlendFilter.h"               //一般用於建立兩個圖像之間的動畫變暗模糊效果
164 
165 
166 #pragma mark - 尚不清楚
167 #import "GPUImageJFAVoroniFilter.h"
168 #import "GPUImageVoroniConsumerFilter.h"

tip8: H264硬編碼
若是使用ijkplayer 使用硬解碼, 一句代碼便可.

1 // 開啓硬解碼
2 [option setPlayerOptionValue:@"1" forKey:@"videotoolbox"];

硬編碼的應用場景: 咱們要將主播的視頻數據傳送給服務器

經過攝像頭來採集圖像，而後將採集到的圖像，經過硬編碼的方式進行編碼，最後編碼後的數據將其組合成H264的碼流經過網絡傳播。

攝像頭採集圖像, iOS系統提供了AVCaptureSession來採集攝像頭的圖像數據. 項目中我是直接使用 GPUImage 中的GPUImageVideoCamera, 直接設置GPUImageVideoCamera的代理便可, 在其代理方法- (void)willOutputSampleBuffer:(CMSampleBufferRef)sampleBuffer;進行數據編碼便可.

切記一點: 不論是系統自帶的AVCaptureSession仍是GPUImageVideoCamera採集到的數據都是未通過編碼的CMSampleBuffer.

而後將採集到的數據, 用iOS開放的VideoToolbox進行硬編碼. 關於VideoToolbox硬編解碼網上不少教程, 固然最好是看Apple的官方文檔, 若是隻是硬編碼, 看個人項目便可.

關鍵的編碼函數(來自YOLO直播負責人的開源項目 BeautifyFaceDemo )

 1 void didCompressH264(void *outputCallbackRefCon, void *sourceFrameRefCon, OSStatus status, VTEncodeInfoFlags infoFlags,
 2                      CMSampleBufferRef sampleBuffer )
 3 {
 4     if (status != 0) return;
 5     // 採集的未編碼數據是否準備好
 6     if (!CMSampleBufferDataIsReady(sampleBuffer))
 7     {
 8         NSLog(@"didCompressH264 data is not ready ");
 9         return;
10     }
11     ALinH264Encoder* encoder = (__bridge ALinH264Encoder*)outputCallbackRefCon;
12 
13     bool keyframe = !CFDictionaryContainsKey((CFArrayGetValueAtIndex(CMSampleBufferGetSampleAttachmentsArray(sampleBuffer, true), 0)), kCMSampleAttachmentKey_NotSync);
14 
15     if (keyframe) // 關鍵幀
16     {
17         CMFormatDescriptionRef format = CMSampleBufferGetFormatDescription(sampleBuffer);
18         size_t sparameterSetSize, sparameterSetCount;
19         const uint8_t *sparameterSet;
20         OSStatus statusCode = CMVideoFormatDescriptionGetH264ParameterSetAtIndex(format, 0, &sparameterSet, &sparameterSetSize, &sparameterSetCount, 0 );
21         if (statusCode == noErr)
22         {
23             size_t pparameterSetSize, pparameterSetCount;
24             const uint8_t *pparameterSet;
25             OSStatus statusCode = CMVideoFormatDescriptionGetH264ParameterSetAtIndex(format, 1, &pparameterSet, &pparameterSetSize, &pparameterSetCount, 0 );
26             if (statusCode == noErr)
27             {
28                 encoder->sps = [NSData dataWithBytes:sparameterSet length:sparameterSetSize];
29                 encoder->pps = [NSData dataWithBytes:pparameterSet length:pparameterSetSize];
30                 NSLog(@"sps:%@ , pps:%@", encoder->sps, encoder->pps);
31             }
32         }
33     }
34 
35     CMBlockBufferRef dataBuffer = CMSampleBufferGetDataBuffer(sampleBuffer);
36     size_t length, totalLength;
37     char *dataPointer;
38     OSStatus statusCodeRet = CMBlockBufferGetDataPointer(dataBuffer, 0, &length, &totalLength, &dataPointer);
39     if (statusCodeRet == noErr) {
40 
41         size_t bufferOffset = 0;
42         static const int AVCCHeaderLength = 4;
43         while (bufferOffset < totalLength - AVCCHeaderLength)
44         {
45             uint32_t NALUnitLength = 0;
46             memcpy(&NALUnitLength, dataPointer + bufferOffset, AVCCHeaderLength);
47             NALUnitLength = CFSwapInt32BigToHost(NALUnitLength);
48             NSData *data = [[NSData alloc] initWithBytes:(dataPointer + bufferOffset + AVCCHeaderLength) length:NALUnitLength];
49             bufferOffset += AVCCHeaderLength + NALUnitLength;
50             NSLog(@"sendData-->> %@ %lu", data, bufferOffset);
51         }
52 
53     }
54 
55 }

感觸

雖然說這個項目是個山寨的, 高仿的, 可是依然已經很龐大了. 具體的細節仍是須要你們本身去看個人項目源碼. 短短几千字還真說不清這麼多的知識點. blog的文章名字說了是初窺, 還真的只是初窺, 視頻直播裏面的坑太多. 且行且珍惜...

tip: 本文理論知識部分, 採集自網絡. 請記住一句話talk is cheap show me the code, 重點在於Demo項目自己. 理論部分我只是一個搬運工和總結者...

項目編譯環境

Xcode7(及以上)
最好是將項目跑在真機上. 有些地方模擬器是不支持的, 也看不到任何效果的, 好比硬編碼/智能美顏等, 這些功能模塊, 我作了限制的, 須要真機狀態才能進行.

項目下載地址

GitHub下載地址
請star和fork. 後續的bug會持續更新到github上的.
有問題能夠在簡書給我留言/私信, 或者微博(簡書我的上首頁有個人微博)私信我.

文／Monkey_ALin（簡書做者） 原文連接：http://www.jianshu.com/p/b8db6c142aad 著做權歸做者全部，轉載請聯繫做者得到受權，並標註「簡書做者」。