效果圖
由于
licecap錄制的GIF失幀太嚴(yán)重, 都模糊掉了, 再放兩張高清截圖
png1
png2
前言
今年三月份，斗魚獲騰訊領(lǐng)投的1億美元融資的消息被各大平臺(tái)報(bào)道轉(zhuǎn)載痪宰，在電競(jìng)、泛娛樂已是熱門投資的當(dāng)下，網(wǎng)絡(luò)直播平臺(tái)自然也獲得了各界的關(guān)注贸铜。盜用兩張關(guān)于游戲直播的趨勢(shì)圖
這還僅僅是游戲直播這塊的蛋糕.直播行業(yè)的競(jìng)爭(zhēng)會(huì)越來越激烈, 不管是主播還是直播平臺(tái)都面臨著激烈的競(jìng)爭(zhēng), 當(dāng)然直播行業(yè)也會(huì)越來越規(guī)范, 直播元素也越來越多.
視頻直播初窺
視頻直播堡纬，可以分為 采集，前處理蒿秦，編碼烤镐，傳輸, 服務(wù)器處理，解碼棍鳖，渲染
采集: iOS系統(tǒng)因?yàn)檐浻布N類不多, 硬件適配性比較好, 所以比較簡(jiǎn)單. 而Android端市面上機(jī)型眾多, 要做些機(jī)型的適配工作.PC端是最麻煩的, 各種奇葩攝像頭驅(qū)動(dòng).所以現(xiàn)在很多的中小型直播平臺(tái), 都放棄了PC的直播, 更有一些直播平臺(tái)只做iOS端的視頻直播.
前處理: 美顏算法,視頻的模糊效果, 水印等都是在這個(gè)環(huán)節(jié)做. 目前iOS端最著名開源框架的毫無疑問就是
GPUImage.其中內(nèi)置了125種渲染效果, 還支持各種腳本自定義. 我高仿的喵播的美顏效果也是基于GPUImage的.編碼: 重難點(diǎn)在于要在分辨率炮叶，幀率，碼率渡处，GOP等參數(shù)設(shè)計(jì)上找到最佳平衡點(diǎn)镜悉。iOS8之后,
Apple開放了VideoToolbox.framework, 可以直接進(jìn)行硬編解碼, 這也是為什么現(xiàn)在大多數(shù)直播平臺(tái)最低只支持到iOS8的原因之一. iOS端硬件兼容性比較好, 可以直接采取硬編碼. 而Android得硬編碼又是一大坑.傳輸: 這塊一般都是交給
CDN服務(wù)商.CDN只提供帶寬和服務(wù)器之間的傳輸, 發(fā)送端和接收端的網(wǎng)絡(luò)連接抖動(dòng)緩存還是要自己實(shí)現(xiàn)的.目前國(guó)內(nèi)最大的CDN服務(wù)商應(yīng)該是網(wǎng)宿.服務(wù)器處理: 需要在服務(wù)器做一些流處理工作, 讓推送上來的流適配各個(gè)平臺(tái)各種不同的協(xié)議, 比如:RTMP,HLS,FLV...
解碼和渲染: 也就即音視頻的播放. 解碼毫無疑問也必須要硬解碼. iOS端兼容較好, Android依然大坑.這塊的難點(diǎn)在于音畫同步, 目前很多直播平臺(tái)這塊是硬傷.國(guó)內(nèi)比較好的開源項(xiàng)目應(yīng)該是B站開源的<a >ijkplayer </a>.
斗魚就是基于<a >ijkplayer </a>的, 本項(xiàng)目也是基于<a >ijkplayer </a>的.
技術(shù)坑 : 降噪, 音頻解碼器, 藍(lán)牙適配, 回聲消除, 信令控制, 登錄, 鑒權(quán), 權(quán)限管理, 狀態(tài)管理, 應(yīng)用消息, 消息推送, 禮物系統(tǒng), 即時(shí)聊天, 支付系統(tǒng), 統(tǒng)計(jì)系統(tǒng), 數(shù)據(jù)庫, 緩存, 分布式文件存儲(chǔ), 消息隊(duì)列, 運(yùn)維系統(tǒng)等等大小不一的坑等你來填!!!
資金坑 : 以帶寬為例, 2萬人同時(shí)在線, 手機(jī)碼率在600KB, 每個(gè)月的帶寬費(fèi)用至少在30萬左右. 根據(jù)歡聚時(shí)代(YY)15年四季度財(cái)務(wù)報(bào), 他們的帶寬成本為人民幣1.611億元, 折合每月5000萬+. 人力成本+渠道支出和其他支出就不詳談了.
社會(huì)坑: 還得每時(shí)每刻與各種黑暗勢(shì)力斗爭(zhēng), 包括色情, 廣告, 刷小號(hào), 刷充值, 告侵權(quán), DDos...(我反編譯
喵播的官方APP, 他們的項(xiàng)目名就叫Shehui, O(∩_∩)O哈哈~)
項(xiàng)目下載地址
<a >GitHub下載地址</a>
前期準(zhǔn)備
項(xiàng)目主要是基于<a >ijkplayer </a>的. 最好是打包成framework. 原本我準(zhǔn)備寫一個(gè)打包教程, 不過后來在簡(jiǎn)書上發(fā)現(xiàn)了一篇特別詳細(xì)的打包blog, 分享給大家: <a href="http://www.reibang.com/p/1f06b27b3ac0">http://www.reibang.com/p/1f06b27b3ac0</a>.
如果你根據(jù)教程打包失敗了(當(dāng)然這種幾率比較小), 我這還有一份我已經(jīng)打包好的(Release版), 下載地址:
鏈接：http://pan.baidu.com/s/1eRVetdK 密碼：2dc0
下載后, 直接解壓即可.
項(xiàng)目文件結(jié)構(gòu)
Frameworks: 如果文件夾不存在, 點(diǎn)擊
classes選擇Show in Finder, 新建一個(gè)即可, 將你打包的或者下載的framework拖入其中并拉進(jìn)項(xiàng)目中. 你也可以自己建一個(gè)文件夾, 把這個(gè)Frameworks直接delete即可Profile : 個(gè)人中心, 這里面只有一個(gè)
ProfileController. 因?yàn)榭倢懼貜?fù)代碼, 都寫吐了, 這兒有興趣的自己寫一下吧, So easy...Network : 關(guān)于網(wǎng)絡(luò)連接的工具類. 關(guān)于網(wǎng)絡(luò)的實(shí)時(shí)監(jiān)控, 網(wǎng)絡(luò)狀態(tài)的切換, 網(wǎng)絡(luò)請(qǐng)求的工具類都在這里面.
Other : 全局的常量. 當(dāng)然你也可以在里面將文件結(jié)構(gòu)更加細(xì)化.
Home : 包含最新主播, 最熱直播, 關(guān)注的直播, 禮物排行榜等模塊. 還有最重要的視頻直播也在這里面了.
ShowTime :見名知意. 視頻直播的前處理, 智能美顏和H264硬編碼等都在這里面.
Main :
UITabBarController和UINavigationController的配置Toos : 這兒命名有點(diǎn)不規(guī)范, 這里面放置的都是項(xiàng)目用到的分類
Login : 登錄模塊
Resource : 項(xiàng)目用到的資源文件
項(xiàng)目詳解
- tip1: 判讀網(wǎng)絡(luò)類型.
在觀看直播的時(shí)候, 我們通常都是用WiFi或者3/4G(土豪級(jí)別的), 一般用戶在進(jìn)行網(wǎng)絡(luò)切換的時(shí)候, 我們都要給出友善的提示, 告訴TA: 您的網(wǎng)絡(luò)狀態(tài)切換到了XX狀態(tài). 假設(shè)用戶從WiFi切換到4G, 你的應(yīng)用也沒個(gè)提醒, 導(dǎo)致TA的流量歸零甚至欠了運(yùn)營(yíng)商一屁股的錢, 我想你的APP的用戶體驗(yàn)也就歸零或者為負(fù)了.
我們可以使用蘋果的Reachability結(jié)合下面的代碼實(shí)時(shí)監(jiān)聽網(wǎng)絡(luò)狀態(tài)的改變
typedef NS_ENUM(NSUInteger, NetworkStates) {
NetworkStatesNone, // 沒有網(wǎng)絡(luò)
NetworkStates2G, // 2G
NetworkStates3G, // 3G
NetworkStates4G, // 4G
NetworkStatesWIFI // WIFI
};
// 判斷網(wǎng)絡(luò)類型
+ (NetworkStates)getNetworkStates
{
NSArray *subviews = [[[[UIApplication sharedApplication] valueForKeyPath:@"statusBar"] valueForKeyPath:@"foregroundView"] subviews];
// 保存網(wǎng)絡(luò)狀態(tài)
NetworkStates states = NetworkStatesNone;
for (id child in subviews) {
if ([child isKindOfClass:NSClassFromString(@"UIStatusBarDataNetworkItemView")]) {
//獲取到狀態(tài)欄碼
int networkType = [[child valueForKeyPath:@"dataNetworkType"] intValue];
switch (networkType) {
case 0:
//無網(wǎng)模式
states = NetworkStatesNone;
break;
case 1:
states = NetworkStates2G;
break;
case 2:
states = NetworkStates3G;
break;
case 3:
states = NetworkStates4G;
break;
case 5:
{
states = NetworkStatesWIFI;
}
break;
default:
break;
}
}
}
//根據(jù)狀態(tài)選擇
return states;
}
- tip2: 登錄模塊
如果你多運(yùn)行幾次就會(huì)發(fā)現(xiàn), 登錄模塊背景中播放的視頻是2個(gè)視頻每次隨機(jī)播放一個(gè)的.并且是無限重復(fù)的, 也就是說只要你一直呆著登錄界面, 就會(huì)單視頻循環(huán)播放當(dāng)前的視頻. 這兒的登錄只是幾個(gè)按鈕, 沒有具體的登錄邏輯, 隨便點(diǎn)哪一個(gè)按鈕都可以進(jìn)入首頁.
我們需要監(jiān)聽視頻, 是否播放完成.
// 監(jiān)聽視頻是否播放完成
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(didFinish) name:IJKMPMoviePlayerPlaybackDidFinishNotification object:nil];
如果播放完成了, 讓IJKFFMoviePlayerController再次play即可
- (void)didFinish
{
// 播放完之后, 繼續(xù)重播
[self.player play];
}
- tip3: 首頁
這種效果相信很多人都看到過或者做過.我簡(jiǎn)單說一下我的做法(不一定是最佳的, 只是提供一個(gè)思路)
一個(gè)父控制器
HomeViewController+三個(gè)子控制器(最熱/最新/關(guān)注. 每個(gè)控制器各自管理自己的業(yè)務(wù)邏輯, 高內(nèi)聚低耦合). 重寫HomeViewController的loadView, 將self.view替換成UIScrollView. 將三個(gè)子控制器的view添加到UIScrollView上即可. 其他的效果實(shí)現(xiàn), 請(qǐng)參照我的代碼, 都有詳細(xì)的中文注釋.
- tip4: 直播(面向觀眾端)
這個(gè)是整個(gè)項(xiàng)目的重點(diǎn)之一了.這種直播的布局, 應(yīng)該是比較主流的了. 我下載的好多直播類APP都是這個(gè)項(xiàng)目布局, 包括YY也是這種界面布局.這個(gè)里面涉及的東西比較多了, 三言兩語真說不清.
簡(jiǎn)單說一下已經(jīng)實(shí)現(xiàn)的效果:
A: 主播的直播
B: 關(guān)聯(lián)主播的視頻直播, 默認(rèn)是只有界面, 沒有聲音的. 點(diǎn)擊該視圖可以切換到此主播
C: 下拉切換另一個(gè)主播, 這個(gè)功能是很常見的. 做法是直播控制器是一個(gè)UICollectionViewController, 只有一個(gè)cell, 且cell.frame就是self.collectionViewb.bounds. 我們進(jìn)入直播控制器的時(shí)候, 其實(shí)是傳進(jìn)去一個(gè)關(guān)聯(lián)主播數(shù)組, 每次下拉的時(shí)候, 就加載數(shù)組里面的主播
D. 查看觀眾席的觀眾詳情
E. 查看主播詳情
F. 足跡: 粒子動(dòng)畫, 后面詳解
G. 彈幕: 點(diǎn)擊最下方的工具欄第一個(gè)按鈕可以開啟/關(guān)閉彈幕, 后面詳解
...
- tip5: 粒子動(dòng)畫實(shí)現(xiàn)游客足跡
粒子動(dòng)畫的layer是添加到播放器的view上面的. 下面代碼有詳細(xì)的注釋
CAEmitterLayer *emitterLayer = [CAEmitterLayer layer];
// 發(fā)射器在xy平面的中心位置
emitterLayer.emitterPosition = CGPointMake(self.moviePlayer.view.frame.size.width-50,self.moviePlayer.view.frame.size.height-50);
// 發(fā)射器的尺寸大小
emitterLayer.emitterSize = CGSizeMake(20, 20);
// 渲染模式
emitterLayer.renderMode = kCAEmitterLayerUnordered;
// 開啟三維效果
// _emitterLayer.preservesDepth = YES;
NSMutableArray *array = [NSMutableArray array];
// 創(chuàng)建粒子
for (int i = 0; i<10; i++) {
// 發(fā)射單元
CAEmitterCell *stepCell = [CAEmitterCell emitterCell];
// 粒子的創(chuàng)建速率，默認(rèn)為1/s
stepCell.birthRate = 1;
// 粒子存活時(shí)間
stepCell.lifetime = arc4random_uniform(4) + 1;
// 粒子的生存時(shí)間容差
stepCell.lifetimeRange = 1.5;
// 顏色
// fire.color=[[UIColor colorWithRed:0.8 green:0.4 blue:0.2 alpha:0.1]CGColor];
UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"good%d_30x30", i]];
// 粒子顯示的內(nèi)容
stepCell.contents = (id)[image CGImage];
// 粒子的名字
// [fire setName:@"step%d", i];
// 粒子的運(yùn)動(dòng)速度
stepCell.velocity = arc4random_uniform(100) + 100;
// 粒子速度的容差
stepCell.velocityRange = 80;
// 粒子在xy平面的發(fā)射角度
stepCell.emissionLongitude = M_PI+M_PI_2;;
// 粒子發(fā)射角度的容差
stepCell.emissionRange = M_PI_2/6;
// 縮放比例
stepCell.scale = 0.3;
[array addObject:stepCell];
}
emitterLayer.emitterCells = array;
[self.moviePlayer.view.layer insertSublayer:emitterLayer below:self.catEarView.layer];
-
tip6: 彈幕
彈幕使用的也是一個(gè)第三方輪子<a >BarrageRenderer </a>. 這個(gè)開源項(xiàng)目的文檔都是中文的, 用法也是很簡(jiǎn)單的.基本配置
_renderer = [[BarrageRenderer alloc] init];
// 設(shè)置彈幕的顯示區(qū)域. 基于父控件的.
_renderer.canvasMargin = UIEdgeInsetsMake(ALinScreenHeight * 0.3, 10, 10, 10);
[self.contentView addSubview:_renderer.view];
彈幕配置
#pragma mark - 彈幕描述符生產(chǎn)方法
/// 生成精靈描述 - 過場(chǎng)文字彈幕
- (BarrageDescriptor *)walkTextSpriteDescriptorWithDirection:(NSInteger)direction
{
BarrageDescriptor * descriptor = [[BarrageDescriptor alloc]init];
descriptor.spriteName = NSStringFromClass([BarrageWalkTextSprite class]);
descriptor.params[@"text"] = self.danMuText[arc4random_uniform((uint32_t)self.danMuText.count)];
descriptor.params[@"textColor"] = Color(arc4random_uniform(256), arc4random_uniform(256), arc4random_uniform(256));
descriptor.params[@"speed"] = @(100 * (double)random()/RAND_MAX+50);
descriptor.params[@"direction"] = @(direction);
descriptor.params[@"clickAction"] = ^{
UIAlertView *alertView = [[UIAlertView alloc]initWithTitle:@"提示" message:@"彈幕被點(diǎn)擊" delegate:nil cancelButtonTitle:@"取消" otherButtonTitles:nil];
[alertView show];
};
return descriptor;
}
最后一步, 千萬要記得start
[_renderer start];
- tip7: 智能美顏效果
現(xiàn)在的直播平臺(tái), 美顏是標(biāo)配. 不然絕大多數(shù)的主播都是沒法看的.美顏算法需要用到GPU編程, 需要懂圖像處理的人. 圖像處理這一塊我不是很熟悉, 相關(guān)的文獻(xiàn)也是看得云里霧里的. 所以, 依然使用開源的輪子:<a > GPUImage </a>. 這個(gè)開源框架有近1.3W+star(7月5日數(shù)據(jù)), 真不是蓋的, 內(nèi)置125種濾鏡效果, 沒有你想不到, 只有你不會(huì)用. 我的項(xiàng)目中都有詳細(xì)的用法, 還是很簡(jiǎn)單的. 在這里摘抄一份其.h文件的注釋. 一方面方便大家修改我項(xiàng)目中的美顏效果, 另一方面也是做個(gè)備份.(具體出處我真忘了, 如果有人找到了源地址鏈接, 可以聯(lián)系我加上)
#import "GLProgram.h"
// Base classes
#import "GPUImageOpenGLESContext.h"
#import "GPUImageOutput.h"
#import "GPUImageView.h"
#import "GPUImageVideoCamera.h"
#import "GPUImageStillCamera.h"
#import "GPUImageMovie.h"
#import "GPUImagePicture.h"
#import "GPUImageRawDataInput.h"
#import "GPUImageRawDataOutput.h"
#import "GPUImageMovieWriter.h"
#import "GPUImageFilterPipeline.h"
#import "GPUImageTextureOutput.h"
#import "GPUImageFilterGroup.h"
#import "GPUImageTextureInput.h"
#import "GPUImageUIElement.h"
#import "GPUImageBuffer.h"
// Filters
#import "GPUImageFilter.h"
#import "GPUImageTwoInputFilter.h"
#pragma mark - 調(diào)整顏色 Handle Color
#import "GPUImageBrightnessFilter.h" //亮度
#import "GPUImageExposureFilter.h" //曝光
#import "GPUImageContrastFilter.h" //對(duì)比度
#import "GPUImageSaturationFilter.h" //飽和度
#import "GPUImageGammaFilter.h" //伽馬線
#import "GPUImageColorInvertFilter.h" //反色
#import "GPUImageSepiaFilter.h" //褐色（懷舊）
#import "GPUImageLevelsFilter.h" //色階
#import "GPUImageGrayscaleFilter.h" //灰度
#import "GPUImageHistogramFilter.h" //色彩直方圖医瘫，顯示在圖片上
#import "GPUImageHistogramGenerator.h" //色彩直方圖
#import "GPUImageRGBFilter.h" //RGB
#import "GPUImageToneCurveFilter.h" //色調(diào)曲線
#import "GPUImageMonochromeFilter.h" //單色
#import "GPUImageOpacityFilter.h" //不透明度
#import "GPUImageHighlightShadowFilter.h" //提亮陰影
#import "GPUImageFalseColorFilter.h" //色彩替換（替換亮部和暗部色彩）
#import "GPUImageHueFilter.h" //色度
#import "GPUImageChromaKeyFilter.h" //色度鍵
#import "GPUImageWhiteBalanceFilter.h" //白平橫
#import "GPUImageAverageColor.h" //像素平均色值
#import "GPUImageSolidColorGenerator.h" //純色
#import "GPUImageLuminosity.h" //亮度平均
#import "GPUImageAverageLuminanceThresholdFilter.h" //像素色值亮度平均侣肄，圖像黑白（有類似漫畫效果）
#import "GPUImageLookupFilter.h" //lookup 色彩調(diào)整
#import "GPUImageAmatorkaFilter.h" //Amatorka lookup
#import "GPUImageMissEtikateFilter.h" //MissEtikate lookup
#import "GPUImageSoftEleganceFilter.h" //SoftElegance lookup
#pragma mark - 圖像處理 Handle Image
#import "GPUImageCrosshairGenerator.h" //十字
#import "GPUImageLineGenerator.h" //線條
#import "GPUImageTransformFilter.h" //形狀變化
#import "GPUImageCropFilter.h" //剪裁
#import "GPUImageSharpenFilter.h" //銳化
#import "GPUImageUnsharpMaskFilter.h" //反遮罩銳化
#import "GPUImageFastBlurFilter.h" //模糊
#import "GPUImageGaussianBlurFilter.h" //高斯模糊
#import "GPUImageGaussianSelectiveBlurFilter.h" //高斯模糊，選擇部分清晰
#import "GPUImageBoxBlurFilter.h" //盒狀模糊
#import "GPUImageTiltShiftFilter.h" //條紋模糊醇份，中間清晰稼锅，上下兩端模糊
#import "GPUImageMedianFilter.h" //中間值，有種稍微模糊邊緣的效果
#import "GPUImageBilateralFilter.h" //雙邊模糊
#import "GPUImageErosionFilter.h" //侵蝕邊緣模糊僚纷，變黑白
#import "GPUImageRGBErosionFilter.h" //RGB侵蝕邊緣模糊矩距，有色彩
#import "GPUImageDilationFilter.h" //擴(kuò)展邊緣模糊，變黑白
#import "GPUImageRGBDilationFilter.h" //RGB擴(kuò)展邊緣模糊怖竭，有色彩
#import "GPUImageOpeningFilter.h" //黑白色調(diào)模糊
#import "GPUImageRGBOpeningFilter.h" //彩色模糊
#import "GPUImageClosingFilter.h" //黑白色調(diào)模糊剩晴，暗色會(huì)被提亮
#import "GPUImageRGBClosingFilter.h" //彩色模糊，暗色會(huì)被提亮
#import "GPUImageLanczosResamplingFilter.h" //Lanczos重取樣侵状，模糊效果
#import "GPUImageNonMaximumSuppressionFilter.h" //非最大抑制赞弥，只顯示亮度最高的像素，其他為黑
#import "GPUImageThresholdedNonMaximumSuppressionFilter.h" //與上相比趣兄，像素丟失更多
#import "GPUImageSobelEdgeDetectionFilter.h" //Sobel邊緣檢測(cè)算法(白邊绽左，黑內(nèi)容，有點(diǎn)漫畫的反色效果)
#import "GPUImageCannyEdgeDetectionFilter.h" //Canny邊緣檢測(cè)算法（比上更強(qiáng)烈的黑白對(duì)比度）
#import "GPUImageThresholdEdgeDetectionFilter.h" //閾值邊緣檢測(cè)（效果與上差別不大）
#import "GPUImagePrewittEdgeDetectionFilter.h" //普瑞維特(Prewitt)邊緣檢測(cè)(效果與Sobel差不多艇潭，貌似更平滑)
#import "GPUImageXYDerivativeFilter.h" //XYDerivative邊緣檢測(cè)拼窥，畫面以藍(lán)色為主，綠色為邊緣蹋凝，帶彩色
#import "GPUImageHarrisCornerDetectionFilter.h" //Harris角點(diǎn)檢測(cè)鲁纠，會(huì)有綠色小十字顯示在圖片角點(diǎn)處
#import "GPUImageNobleCornerDetectionFilter.h" //Noble角點(diǎn)檢測(cè)，檢測(cè)點(diǎn)更多
#import "GPUImageShiTomasiFeatureDetectionFilter.h" //ShiTomasi角點(diǎn)檢測(cè)鳍寂，與上差別不大
#import "GPUImageMotionDetector.h" //動(dòng)作檢測(cè)
#import "GPUImageHoughTransformLineDetector.h" //線條檢測(cè)
#import "GPUImageParallelCoordinateLineTransformFilter.h" //平行線檢測(cè)
#import "GPUImageLocalBinaryPatternFilter.h" //圖像黑白化诫硕，并有大量噪點(diǎn)
#import "GPUImageLowPassFilter.h" //用于圖像加亮
#import "GPUImageHighPassFilter.h" //圖像低于某值時(shí)顯示為黑
#pragma mark - 視覺效果 Visual Effect
#import "GPUImageSketchFilter.h" //素描
#import "GPUImageThresholdSketchFilter.h" //閥值素描硫眯，形成有噪點(diǎn)的素描
#import "GPUImageToonFilter.h" //卡通效果（黑色粗線描邊）
#import "GPUImageSmoothToonFilter.h" //相比上面的效果更細(xì)膩，上面是粗曠的畫風(fēng)
#import "GPUImageKuwaharaFilter.h" //桑原(Kuwahara)濾波,水粉畫的模糊效果课竣；處理時(shí)間比較長(zhǎng)梁厉，慎用
#import "GPUImageMosaicFilter.h" //黑白馬賽克
#import "GPUImagePixellateFilter.h" //像素化
#import "GPUImagePolarPixellateFilter.h" //同心圓像素化
#import "GPUImageCrosshatchFilter.h" //交叉線陰影，形成黑白網(wǎng)狀畫面
#import "GPUImageColorPackingFilter.h" //色彩丟失，模糊（類似監(jiān)控?cái)z像效果）
#import "GPUImageVignetteFilter.h" //暈影，形成黑色圓形邊緣专酗，突出中間圖像的效果
#import "GPUImageSwirlFilter.h" //漩渦，中間形成卷曲的畫面
#import "GPUImageBulgeDistortionFilter.h" //凸起失真盗扇，魚眼效果
#import "GPUImagePinchDistortionFilter.h" //收縮失真祷肯，凹面鏡
#import "GPUImageStretchDistortionFilter.h" //伸展失真，哈哈鏡
#import "GPUImageGlassSphereFilter.h" //水晶球效果
#import "GPUImageSphereRefractionFilter.h" //球形折射疗隶，圖形倒立
#import "GPUImagePosterizeFilter.h" //色調(diào)分離佑笋，形成噪點(diǎn)效果
#import "GPUImageCGAColorspaceFilter.h" //CGA色彩濾鏡，形成黑抽减、淺藍(lán)允青、紫色塊的畫面
#import "GPUImagePerlinNoiseFilter.h" //柏林噪點(diǎn)橄碾，花邊噪點(diǎn)
#import "GPUImage3x3ConvolutionFilter.h" //3x3卷積卵沉，高亮大色塊變黑，加亮邊緣法牲、線條等
#import "GPUImageEmbossFilter.h" //浮雕效果史汗，帶有點(diǎn)3d的感覺
#import "GPUImagePolkaDotFilter.h" //像素圓點(diǎn)花樣
#import "GPUImageHalftoneFilter.h" //點(diǎn)染,圖像黑白化，由黑點(diǎn)構(gòu)成原圖的大致圖形
#pragma mark - 混合模式 Blend
#import "GPUImageMultiplyBlendFilter.h" //通常用于創(chuàng)建陰影和深度效果
#import "GPUImageNormalBlendFilter.h" //正常
#import "GPUImageAlphaBlendFilter.h" //透明混合,通常用于在背景上應(yīng)用前景的透明度
#import "GPUImageDissolveBlendFilter.h" //溶解
#import "GPUImageOverlayBlendFilter.h" //疊加,通常用于創(chuàng)建陰影效果
#import "GPUImageDarkenBlendFilter.h" //加深混合,通常用于重疊類型
#import "GPUImageLightenBlendFilter.h" //減淡混合,通常用于重疊類型
#import "GPUImageSourceOverBlendFilter.h" //源混合
#import "GPUImageColorBurnBlendFilter.h" //色彩加深混合
#import "GPUImageColorDodgeBlendFilter.h" //色彩減淡混合
#import "GPUImageScreenBlendFilter.h" //屏幕包裹,通常用于創(chuàng)建亮點(diǎn)和鏡頭眩光
#import "GPUImageExclusionBlendFilter.h" //排除混合
#import "GPUImageDifferenceBlendFilter.h" //差異混合,通常用于創(chuàng)建更多變動(dòng)的顏色
#import "GPUImageSubtractBlendFilter.h" //差值混合,通常用于創(chuàng)建兩個(gè)圖像之間的動(dòng)畫變暗模糊效果
#import "GPUImageHardLightBlendFilter.h" //強(qiáng)光混合,通常用于創(chuàng)建陰影效果
#import "GPUImageSoftLightBlendFilter.h" //柔光混合
#import "GPUImageChromaKeyBlendFilter.h" //色度鍵混合
#import "GPUImageMaskFilter.h" //遮罩混合
#import "GPUImageHazeFilter.h" //朦朧加暗
#import "GPUImageLuminanceThresholdFilter.h" //亮度閾
#import "GPUImageAdaptiveThresholdFilter.h" //自適應(yīng)閾值
#import "GPUImageAddBlendFilter.h" //通常用于創(chuàng)建兩個(gè)圖像之間的動(dòng)畫變亮模糊效果
#import "GPUImageDivideBlendFilter.h" //通常用于創(chuàng)建兩個(gè)圖像之間的動(dòng)畫變暗模糊效果
#pragma mark - 尚不清楚
#import "GPUImageJFAVoroniFilter.h"
#import "GPUImageVoroniConsumerFilter.h"
- tip8: H264硬編碼
如果使用<a >ijkplayer </a>使用硬解碼, 一句代碼即可.
// 開啟硬解碼
[option setPlayerOptionValue:@"1" forKey:@"videotoolbox"];
硬編碼的應(yīng)用場(chǎng)景: 我們要將主播的視頻數(shù)據(jù)傳送給服務(wù)器
通過攝像頭來采集圖像拒垃，然后將采集到的圖像停撞，通過硬編碼的方式進(jìn)行編碼，最后編碼后的數(shù)據(jù)將其組合成H264的碼流通過網(wǎng)絡(luò)傳播悼瓮。
攝像頭采集圖像, iOS系統(tǒng)提供了AVCaptureSession來采集攝像頭的圖像數(shù)據(jù). 項(xiàng)目中我是直接使用<a > GPUImage </a>中的GPUImageVideoCamera, 直接設(shè)置GPUImageVideoCamera的代理即可, 在其代理方法- (void)willOutputSampleBuffer:(CMSampleBufferRef)sampleBuffer;進(jìn)行數(shù)據(jù)編碼即可.
切記一點(diǎn): 不管是系統(tǒng)自帶的
AVCaptureSession還是GPUImageVideoCamera采集到的數(shù)據(jù)都是未經(jīng)過編碼的CMSampleBuffer.
然后將采集到的數(shù)據(jù), 用iOS開放的VideoToolbox進(jìn)行硬編碼. 關(guān)于VideoToolbox硬編解碼網(wǎng)上很多教程, 當(dāng)然最好是看Apple的官方文檔, 如果只是硬編碼, 看我的項(xiàng)目即可.
關(guān)鍵的編碼函數(shù)(來自YOLO直播負(fù)責(zé)人的開源項(xiàng)目<a > BeautifyFaceDemo </a>)
void didCompressH264(void *outputCallbackRefCon, void *sourceFrameRefCon, OSStatus status, VTEncodeInfoFlags infoFlags,
CMSampleBufferRef sampleBuffer )
{
if (status != 0) return;
// 采集的未編碼數(shù)據(jù)是否準(zhǔn)備好
if (!CMSampleBufferDataIsReady(sampleBuffer))
{
NSLog(@"didCompressH264 data is not ready ");
return;
}
ALinH264Encoder* encoder = (__bridge ALinH264Encoder*)outputCallbackRefCon;
bool keyframe = !CFDictionaryContainsKey((CFArrayGetValueAtIndex(CMSampleBufferGetSampleAttachmentsArray(sampleBuffer, true), 0)), kCMSampleAttachmentKey_NotSync);
if (keyframe) // 關(guān)鍵幀
{
CMFormatDescriptionRef format = CMSampleBufferGetFormatDescription(sampleBuffer);
size_t sparameterSetSize, sparameterSetCount;
const uint8_t *sparameterSet;
OSStatus statusCode = CMVideoFormatDescriptionGetH264ParameterSetAtIndex(format, 0, &sparameterSet, &sparameterSetSize, &sparameterSetCount, 0 );
if (statusCode == noErr)
{
size_t pparameterSetSize, pparameterSetCount;
const uint8_t *pparameterSet;
OSStatus statusCode = CMVideoFormatDescriptionGetH264ParameterSetAtIndex(format, 1, &pparameterSet, &pparameterSetSize, &pparameterSetCount, 0 );
if (statusCode == noErr)
{
encoder->sps = [NSData dataWithBytes:sparameterSet length:sparameterSetSize];
encoder->pps = [NSData dataWithBytes:pparameterSet length:pparameterSetSize];
NSLog(@"sps:%@ , pps:%@", encoder->sps, encoder->pps);
}
}
}
CMBlockBufferRef dataBuffer = CMSampleBufferGetDataBuffer(sampleBuffer);
size_t length, totalLength;
char *dataPointer;
OSStatus statusCodeRet = CMBlockBufferGetDataPointer(dataBuffer, 0, &length, &totalLength, &dataPointer);
if (statusCodeRet == noErr) {
size_t bufferOffset = 0;
static const int AVCCHeaderLength = 4;
while (bufferOffset < totalLength - AVCCHeaderLength)
{
uint32_t NALUnitLength = 0;
memcpy(&NALUnitLength, dataPointer + bufferOffset, AVCCHeaderLength);
NALUnitLength = CFSwapInt32BigToHost(NALUnitLength);
NSData *data = [[NSData alloc] initWithBytes:(dataPointer + bufferOffset + AVCCHeaderLength) length:NALUnitLength];
bufferOffset += AVCCHeaderLength + NALUnitLength;
NSLog(@"sendData-->> %@ %lu", data, bufferOffset);
}
}
}
感觸
雖說這個(gè)項(xiàng)目是個(gè)山寨的, 高仿的, 但是依然已經(jīng)很龐大了. 具體的細(xì)節(jié)還是需要大家自己去看我的項(xiàng)目源碼. 短短幾千字還真說不清這么多的知識(shí)點(diǎn). blog的文章名字說了是初窺, 還真的只是初窺, 視頻直播里面的坑太多. 且行且珍惜...
tip: 本文理論知識(shí)部分, 采集自網(wǎng)絡(luò). 請(qǐng)記住一句話
talk is cheap show me the code, 重點(diǎn)在于Demo項(xiàng)目本身. 理論部分我只是一個(gè)搬運(yùn)工和總結(jié)者...
項(xiàng)目編譯環(huán)境
Xcode7(及以上)
最好是將項(xiàng)目跑在真機(jī)上. 有些地方模擬器是不支持的, 也看不到任何效果的, 比如硬編碼/智能美顏等, 這些功能模塊, 我做了限制的, 需要真機(jī)狀態(tài)才能進(jìn)行.
項(xiàng)目下載地址
<a >GitHub下載地址</a>
請(qǐng)star和fork. 后續(xù)的bug會(huì)持續(xù)更新到github上的.
有問題可以在簡(jiǎn)書給我留言/私信, 或者微博(簡(jiǎn)書個(gè)人上首頁有我的微博)私信我.
7月9日凌晨更新: 項(xiàng)目已經(jīng)集成視頻直播推流
blog地址詳解<a href="http://www.reibang.com/p/8ea016b2720e">快速集成iOS基于RTMP的視頻推流</a>
聯(lián)系我
<a >github</a>
<a >微博</a>
<a href="http://www.reibang.com/users/9723687edfb5/latest_articles">簡(jiǎn)書</a>
