iOS 直播技术及Demo
来源:互联网 发布:淘宝1元包邮商品 编辑:程序博客网 时间:2024/05/16 17:23
要过年了,新年快乐,今天写一些关于iOS直播技术相关知识,及详细Demo介绍,首先请下载Demo
Demo下载地址(点击跳转下载)
一.直播介绍
1.1.直播现状
近年来,直播越来越火,但直播技术却对软件开发人员技术要求很高,因为直播中运用到的技术难点非常之多,视频/音频处理,图形处理,视频/音频压缩,CDN分发,即时通讯等技术,个人很难开发出来。但现在已经有了各个领域的大神,封装出了各种牛逼的框架,我们只需站在大神的肩膀上,直播技术相对就容易许多。废话少说,现在开始介绍直播开发。
1.2.直播App架构
采集端将采集到的音视频数据通过推流地址推送到服务器,播放端再通过拉流地址将音视频数据拉到本地播放。
1.2.1.主要功能
- 采集端(主播)
- 音频采集
- 视频采集
- 音频编码压缩
- 视频编码压缩
- 把音视频封装成FLV,TS文件
- 服务器
- 数据分发CDN
- 鉴黄:鉴黄师
- 截屏:显示主播画面
- 录制视频
- 实时转码
- 播放端
- 从FLV,TS中分离音视频数据
- 音视频解码
- 播放
- 聊天互动
1.2.2.主要技术
- 采集端
- AVFoundation框架:数据采集
- GPUImage框架:美颜处理
- FFmoeg框架:音频压缩
- libremp框架:推流
- 服务器
- SNS
- BMS
- nginx
- 播放端
- ijkplayer框架:音视频播放
- FFmpeg框架:视频解码
- VideoToolbox框架:视频硬解码
- AudioToolbox框架:音频硬解码
- 推流
- RTMP
- 拉流
- FLV
- RTMP
- HLS
二.直播技术
2.1.直播App技术点
本文主要使用了三个协议:
- 推流:LFLiveKit
- 播放:ijkplayer
- 服务器:nginx+rtmp+ffmpeg
2.2.1 推流 LFLiveKit框架
LFLiveKit:框架支持RTMP,由Adobe公司开发。github下载地址(点击跳转)
- 已经集成了GPUImage美颜
- 支持后台录制
- 支持h264,AAC硬编码
- 动态改变速率
- RTMP传输等
LFLiveKit库里已经集成GPUImage框架用于美颜功能,GPUImage基于OpenGl开发,纯OC语言框架,封装好了各种滤镜同时也可以编写自定义的滤镜,其本身内置了多达125种常见的滤镜效果。
首先LFLiveKit支持rtmp,flv两种流类型,LFLiveSession是整个库文件的入口:
- LFLiveSession:是整个sdk核心,提供对外部的主要接口。其主要功能有:管理推流开关,管理音视频录制及渲染,管理录制渲染后的音视频编吗,管理编吗后的数据上传,管理音视频的基础配置,回调推流状态和异常上报等。
- LFLiveAudioConfiguration:音频配置,配置相关音频信息(音频质量,码率,采样率,声道数)
- LFLiveVideoConfiguration:视频配置,配置相关音频基本信息(视频质量,码率,帧数,分辨率)和应用配置如最大最小帧率等。
- LFVideoCapture:视频管理类,管理视频的输入和输出。同时处理业务需求如:美颜,亮度,水印等效果。用了一个第三方:GPUIImage处理渲染效果
- LFAudioCapture:音频管理,管理音频的输入开关。这一块儿没有多大的定制,应用的原生的API即可。
- LFH264VideoEncoder,LFHardwareVideoEncoder:视频编码类,分别对应8.0以前和8.0以后的两种设备的视频编码类。都遵守LFVideoEncoding协议,并设置LFStreamSocketDelegate协议给session管理
- LFHardwareAudioEncoder:音频编码类,遵守LFVideoEncoding协议,并设置LFStreamSocketDelegate协议给session管理
- LFFrame:数据信息的基类,作为上传到服务器数据的基本模型
- LFVideoFrame:视频信息,作为上传到服务器视频数据的模型
- LFAudioFrame:音频信息,作为上传到服务器音频数据的模型
- LFLiveStreamInfo:推流信息:推流地址(目前主要应用rtmp推流);流状态;音视频配置信息;异常信息
- LFStreamRTMPSocket:数据上传管理类:开关数据上传,回调连接状态和异常。遵循LFStreamSocket协议,并设置LFStreamSocketDelegate给session管理
- LFLiveDebug:调试信息:这个是开发时候的内部表示,主要用于记录调试作用。
- LFStreamingBuffer:本地采样:通过本地采样监控缓冲区,可实现相关切换帧率码率等策略
除此以外,还有,LiveVideoCoreSDK框架(实现了美颜,滤镜功能,只要填写RTMP地址即可),PLCameraStreamingKit框架等,用来实现推流,这里就不一一介绍了。
2.2.2 播放 ijkplayer框架
ijkplayer:是基于FFmpeg的跨平台播放器框架,由B站开发。目前已被多个主流直播App集成使用。github下载地址(点击跳转)
斗鱼就是基于ijkplayer 的, 本项目也是基于ijkplayer 的.
2.2.3 服务器 nginx+rtmp+ffmpeg框架
1.打开终端, 查看是否已经安装了Homebrew, 直接终端输入命令
man brew
如果Mac已经安装了, 会显示一些命令的帮助信息. 此时输入Q退出即可, 直接进入第二步.
反之, 如果没有安装,执行命令
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
如果安装后, 想要卸载
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"
2.安装nginx
先clone nginx项目到本地
brew tap homebrew/nginx
执行安装:
brew install nginx-full --with-rtmp-module
此时, nginx和rtmp模块就安装好了
输入命令:
nginx
在浏览器里打开http://localhost:8080
如果出现下图, 则表示安装成功
安装成功
如果终端上提示
nginx: [emerg] bind() to 0.0.0.0:8080 failed (48: Address already in use)nginx: [emerg] bind() to 0.0.0.0:8080 failed (48: Address already in use)nginx: [emerg] bind() to 0.0.0.0:8080 failed (48: Address already in use)nginx: [emerg] bind() to 0.0.0.0:8080 failed (48: Address already in use).....
则表示8080端口被占用了, 查看端口PID
lsof -i tcp:8080
根据端口PID, kill掉(这儿的9603换成你自己8080端口的PID)
kill 9603
然后重新执行nginx, 打开http://localhost:8080
3.配置nginx和ramp
首先我们查看nginx安装到哪了
brew info nginx-full
如图, 找到nginx.conf文件所在位置
nginx.conf
通过vim或者点击Finder->前往->前往文件夹->输入/usr/local/etc/nginx/nginx.conf->用记事本工具(推荐Sublime Text)打开nginx.conf.
直接滚到最后一行, 在最后一个}(即最后的空白处, 没有任何{})后面添加
# 在http节点后面加上rtmp配置:rtmp { server { listen 1935; application rtmplive { live on; record off; } }}
然后重启nginx(其中的1.10.1要换成你自己安装的nginx版本号, 查看版本号用nginx -v命令即可)
/usr/local/Cellar/nginx-full/1.10.1/bin/nginx -s reload
昨天, 就在执行这段命令的时候, 坑出现了.(如果你命令执行成功, 重启成功了, 没有没有任何异常, 请直接跳转到下一步)
执行命令的时候, 报异常
nginx: [emerg] unknown directive “rtmp” in /usr/local/etc/nginx/nginx.conf:119
rtmp成了未知指令. brew list查看所有安装的模块, 才发现是自己手动敲命令的时候, 将nginx-full变成了nginx -full.
上解决方案:
卸载nginx
brew uninstall nginx
再次安装nginx
brew install nginx-full --with-rtmp-module
安装ffmpeg
执行命令
brew install ffmpeg
安装ffmpeg时间就要长一点了. 如果速度过慢, 建议翻墙. 不过也才50多M的东西, 耐心一点就好. 等待的时间里, 再安装一个支持rtmp协议的视频播放器VLC
ffmpeg推流
自己准备一个视频文件, 执行推流命令
ffmpeg -re -i /Users/sunlin/Desktop/11.mp4 -vcodec libx264 -acodec aac -strict -2 -f flv rtmp://localhost:1935/rtmplive/room
将视频推流到服务器后,打开VLC,然后File->open network->输入:
rtmp://localhost:1935/rtmplive/room
测试效果
三.直播Demo
3.1前期准备
项目主要是基于ijkplayer 的. 最好是打包成framework. 参考: http://www.jianshu.com/p/1f06b27b3ac0. 或者直接下载:
链接:https://github.com/Bilibili/ijkplayer
另外安装LFLiveKit,链接:https://github.com/LaiFengiOS/LFLiveKit,下载后, 直接解压即可.
3.2项目文件结构
- Frameworks: 如果文件夹不存在, 点击classes选择Show in Finder, 新建一个即可, 将你打包的或者下载的framework拖入其中并拉进项目中. 你也可以自己建一个文件夹, 把这个Frameworks直接delete即可
- Profile : 个人中心, 这里面只有一个ProfileController.本Demo没具体编写,请自由发挥
- Network : 关于网络连接的工具类. 关于网络的实时监控, 网络状态的切换, 网络请求的工具类都在这里面.
- Other : 全局的常量. 当然你也可以在里面将文件结构更加细化.
- Home : 包含最新主播, 最热直播, 关注的直播, 礼物排行榜等模块. 还有最重要的视频直播也在这里面了.
- ShowTime : 视频直播的前处理, 智能美颜和H264硬编码等都在这里面.
- Main : UITabBarController和UINavigationController的配置
- Toos : 封装的一些工具类
- Login : 登录模块
- Resource : 项目用到的资源文件
3.3项目详解
3.3.1, Frameworks.框架
LFLiveKit + ijkplayer
3.3.2,Profile : 个人中心
自由发挥
3.3.3,Network : 判读网络类型.
在观看直播的时候, 我们通常都是用WiFi或者3/4G(土豪级别的), 一般用户在进行网络切换的时候, 我们都要给出友善的提示, 告诉TA: 您的网络状态切换到了XX状态. 假设用户从WiFi切换到4G, 你的应用也没个提醒, 导致TA的流量归零甚至欠了运营商一屁股的钱, 我想你的APP的用户体验也就归零或者为负了.
我们可以使用苹果的Reachability结合下面的代码实时监听网络状态的改变
typedef NS_ENUM(NSUInteger, NetworkStates) { NetworkStatesNone, // 没有网络 NetworkStates2G, // 2G NetworkStates3G, // 3G NetworkStates4G, // 4G NetworkStatesWIFI // WIFI};// 判断网络类型+ (NetworkStates)getNetworkStates{ NSArray *subviews = [[[[UIApplication sharedApplication] valueForKeyPath:@"statusBar"] valueForKeyPath:@"foregroundView"] subviews]; // 保存网络状态 NetworkStates states = NetworkStatesNone; for (id child in subviews) { if ([child isKindOfClass:NSClassFromString(@"UIStatusBarDataNetworkItemView")]) { //获取到状态栏码 int networkType = [[child valueForKeyPath:@"dataNetworkType"] intValue]; switch (networkType) { case 0: //无网模式 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; } } } //根据状态选择 return states;}
3.3.4, Other : 全局的常量
#pragma mark - Frame相关// 屏幕宽/高#define ALinScreenWidth [UIScreen mainScreen].bounds.size.width#define ALinScreenHeight [UIScreen mainScreen].bounds.size.height// 首页的选择器的宽度#define Home_Seleted_Item_W 60#define DefaultMargin 10#pragma mark - 颜色// 颜色相关#define Color(r,g,b) [UIColor colorWithRed:(r) green:(g) blue:(b) alpha:1.0]#define KeyColor Color(0.05, 0.83, 0.73)#pragma mark - 通知// 当前没有关注的主播, 去看热门主播#define kNotifyToseeBigWorld @"kNotifyToseeBigWorld"// 当前的直播控制器即将消失#define kNotifyLiveWillDisappear @"kNotifyLiveWillDisappear"// 点击了用户#define kNotifyClickUser @"kNotifyClickUser"// 自动刷新最新主播界面#define kNotifyRefreshNew @"kNotifyRefreshNew"#pragma mark - 其他// 上一次刷新的时间#define kLastRefreshDate @"kLastRefreshDate"
3.3.5,Home : 包含最新主播, 最热直播, 关注的直播, 礼物排行榜等模块. 还有最重要的视频直播也在这里面了.
首页
- ALinLiveCollectionViewController:直播播放ViewController
- ALinWebViewController:排行榜ViewController
- HomeViewController:项目主页ViewController
- ALinCareViewController:我的关注ViewController
- ALinHotViewController:热播ViewController
- ALinNewStarViewController:最新主播ViewController
这种效果相信很多人都看到过或者做过.我简单说一下我的做法(不一定是最佳的, 只是提供一个思路)
一个父控制器HomeViewController+三个子控制器(最热/最新/关注. 每个控制器各自管理自己的业务逻辑, 高内聚低耦合). 重写HomeViewController的loadView, 将self.view替换成UIScrollView. 将三个子控制器的view添加到UIScrollView上即可. 其他的效果实现, 请参照我的代码, 都有详细的中文注释.
tip4: 直播(面向观众端)
这个是整个项目的重点之一了.这种直播的布局, 应该是比较主流的了. 我下载的好多直播类APP都是这个项目布局, 包括YY也是这种界面布局.这个里面涉及的东西比较多了, 三言两语真说不清.
简单说一下已经实现的效果:
- 主播的直播
- 关联主播的视频直播, 默认是只有界面, 没有声音的. 点击该视图可以切换到此主播
- 下拉切换另一个主播, 这个功能是很常见的. 做法是直播控制器是一个UICollectionViewController, 只有一个cell, 且cell.frame就是self.collectionViewb.bounds. 我们进入直播控制器的时候, 其实是传进去一个关联主播数组, 每次下拉的时候, 就加载数组里面的主播
- 查看观众席的观众详情
- 查看主播详情
- 足迹: 粒子动画, 后面详解
- 弹幕: 点击最下方的工具栏第一个按钮可以开启/关闭弹幕, 后面详解
…
这里就不一一介绍了,只介绍主要技术点,有以下三点:
A, 粒子动画实现游客足迹
粒子动画的layer是添加到播放器的view上面的. 下面代码有详细的注释
CAEmitterLayer *emitterLayer = [CAEmitterLayer layer];// 发射器在xy平面的中心位置emitterLayer.emitterPosition = CGPointMake(self.moviePlayer.view.frame.size.width-50,self.moviePlayer.view.frame.size.height-50);// 发射器的尺寸大小emitterLayer.emitterSize = CGSizeMake(20, 20);// 渲染模式emitterLayer.renderMode = kCAEmitterLayerUnordered;// 开启三维效果// _emitterLayer.preservesDepth = YES;NSMutableArray *array = [NSMutableArray array];// 创建粒子for (int i = 0; i<10; i++) { // 发射单元 CAEmitterCell *stepCell = [CAEmitterCell emitterCell]; // 粒子的创建速率,默认为1/s stepCell.birthRate = 1; // 粒子存活时间 stepCell.lifetime = arc4random_uniform(4) + 1; // 粒子的生存时间容差 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]]; // 粒子显示的内容 stepCell.contents = (id)[image CGImage]; // 粒子的名字 // [fire setName:@"step%d", i]; // 粒子的运动速度 stepCell.velocity = arc4random_uniform(100) + 100; // 粒子速度的容差 stepCell.velocityRange = 80; // 粒子在xy平面的发射角度 stepCell.emissionLongitude = M_PI+M_PI_2;; // 粒子发射角度的容差 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];
B, 弹幕
弹幕使用的也是一个第三方轮子BarrageRenderer . 这个开源项目的文档都是中文的, 用法也是很简单的.
基本配置
_renderer = [[BarrageRenderer alloc] init];// 设置弹幕的显示区域. 基于父控件的._renderer.canvasMargin = UIEdgeInsetsMake(ALinScreenHeight * 0.3, 10, 10, 10);[self.contentView addSubview:_renderer.view];
弹幕配置
#pragma mark - 弹幕描述符生产方法/// 生成精灵描述 - 过场文字弹幕- (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:@"弹幕被点击" delegate:nil cancelButtonTitle:@"取消" otherButtonTitles:nil]; [alertView show]; }; return descriptor;}
最后一步, 千万要记得start
[_renderer start];
C, 智能美颜效果
现在的直播平台, 美颜是标配. 不然绝大多数的主播都是没法看的.美颜算法需要用到GPU编程, 需要懂图像处理的人. 图像处理这一块我不是很熟悉, 相关的文献也是看得云里雾里的. 所以, 依然使用开源的轮子: GPUImage . 这个开源框架有近1.3W+star(7月5日数据), 真不是盖的, 内置125种滤镜效果, 没有你想不到, 只有你不会用. 我的项目中都有详细的用法, 还是很简单的. 在这里摘抄一份其.h文件的注释. 一方面方便大家修改我项目中的美颜效果, 另一方面也是做个备份.(具体出处我真忘了, 如果有人找到了源地址链接, 可以联系我加上)
#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 - 调整颜色 Handle Color#import "GPUImageBrightnessFilter.h" //亮度#import "GPUImageExposureFilter.h" //曝光#import "GPUImageContrastFilter.h" //对比度#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" //色调曲线#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 色彩调整#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" //扩展边缘模糊,变黑白#import "GPUImageRGBDilationFilter.h" //RGB扩展边缘模糊,有色彩#import "GPUImageOpeningFilter.h" //黑白色调模糊#import "GPUImageRGBOpeningFilter.h" //彩色模糊#import "GPUImageClosingFilter.h" //黑白色调模糊,暗色会被提亮#import "GPUImageRGBClosingFilter.h" //彩色模糊,暗色会被提亮#import "GPUImageLanczosResamplingFilter.h" //Lanczos重取样,模糊效果#import "GPUImageNonMaximumSuppressionFilter.h" //非最大抑制,只显示亮度最高的像素,其他为黑#import "GPUImageThresholdedNonMaximumSuppressionFilter.h" //与上相比,像素丢失更多#import "GPUImageSobelEdgeDetectionFilter.h" //Sobel边缘检测算法(白边,黑内容,有点漫画的反色效果)#import "GPUImageCannyEdgeDetectionFilter.h" //Canny边缘检测算法(比上更强烈的黑白对比度)#import "GPUImageThresholdEdgeDetectionFilter.h" //阈值边缘检测(效果与上差别不大)#import "GPUImagePrewittEdgeDetectionFilter.h" //普瑞维特(Prewitt)边缘检测(效果与Sobel差不多,貌似更平滑)#import "GPUImageXYDerivativeFilter.h" //XYDerivative边缘检测,画面以蓝色为主,绿色为边缘,带彩色#import "GPUImageHarrisCornerDetectionFilter.h" //Harris角点检测,会有绿色小十字显示在图片角点处#import "GPUImageNobleCornerDetectionFilter.h" //Noble角点检测,检测点更多#import "GPUImageShiTomasiFeatureDetectionFilter.h" //ShiTomasi角点检测,与上差别不大#import "GPUImageMotionDetector.h" //动作检测#import "GPUImageHoughTransformLineDetector.h" //线条检测#import "GPUImageParallelCoordinateLineTransformFilter.h" //平行线检测#import "GPUImageLocalBinaryPatternFilter.h" //图像黑白化,并有大量噪点#import "GPUImageLowPassFilter.h" //用于图像加亮#import "GPUImageHighPassFilter.h" //图像低于某值时显示为黑#pragma mark - 视觉效果 Visual Effect#import "GPUImageSketchFilter.h" //素描#import "GPUImageThresholdSketchFilter.h" //阀值素描,形成有噪点的素描#import "GPUImageToonFilter.h" //卡通效果(黑色粗线描边)#import "GPUImageSmoothToonFilter.h" //相比上面的效果更细腻,上面是粗旷的画风#import "GPUImageKuwaharaFilter.h" //桑原(Kuwahara)滤波,水粉画的模糊效果;处理时间比较长,慎用#import "GPUImageMosaicFilter.h" //黑白马赛克#import "GPUImagePixellateFilter.h" //像素化#import "GPUImagePolarPixellateFilter.h" //同心圆像素化#import "GPUImageCrosshatchFilter.h" //交叉线阴影,形成黑白网状画面#import "GPUImageColorPackingFilter.h" //色彩丢失,模糊(类似监控摄像效果)#import "GPUImageVignetteFilter.h" //晕影,形成黑色圆形边缘,突出中间图像的效果#import "GPUImageSwirlFilter.h" //漩涡,中间形成卷曲的画面#import "GPUImageBulgeDistortionFilter.h" //凸起失真,鱼眼效果#import "GPUImagePinchDistortionFilter.h" //收缩失真,凹面镜#import "GPUImageStretchDistortionFilter.h" //伸展失真,哈哈镜#import "GPUImageGlassSphereFilter.h" //水晶球效果#import "GPUImageSphereRefractionFilter.h" //球形折射,图形倒立#import "GPUImagePosterizeFilter.h" //色调分离,形成噪点效果#import "GPUImageCGAColorspaceFilter.h" //CGA色彩滤镜,形成黑、浅蓝、紫色块的画面#import "GPUImagePerlinNoiseFilter.h" //柏林噪点,花边噪点#import "GPUImage3x3ConvolutionFilter.h" //3x3卷积,高亮大色块变黑,加亮边缘、线条等#import "GPUImageEmbossFilter.h" //浮雕效果,带有点3d的感觉#import "GPUImagePolkaDotFilter.h" //像素圆点花样#import "GPUImageHalftoneFilter.h" //点染,图像黑白化,由黑点构成原图的大致图形#pragma mark - 混合模式 Blend#import "GPUImageMultiplyBlendFilter.h" //通常用于创建阴影和深度效果#import "GPUImageNormalBlendFilter.h" //正常#import "GPUImageAlphaBlendFilter.h" //透明混合,通常用于在背景上应用前景的透明度#import "GPUImageDissolveBlendFilter.h" //溶解#import "GPUImageOverlayBlendFilter.h" //叠加,通常用于创建阴影效果#import "GPUImageDarkenBlendFilter.h" //加深混合,通常用于重叠类型#import "GPUImageLightenBlendFilter.h" //减淡混合,通常用于重叠类型#import "GPUImageSourceOverBlendFilter.h" //源混合#import "GPUImageColorBurnBlendFilter.h" //色彩加深混合#import "GPUImageColorDodgeBlendFilter.h" //色彩减淡混合#import "GPUImageScreenBlendFilter.h" //屏幕包裹,通常用于创建亮点和镜头眩光#import "GPUImageExclusionBlendFilter.h" //排除混合#import "GPUImageDifferenceBlendFilter.h" //差异混合,通常用于创建更多变动的颜色#import "GPUImageSubtractBlendFilter.h" //差值混合,通常用于创建两个图像之间的动画变暗模糊效果#import "GPUImageHardLightBlendFilter.h" //强光混合,通常用于创建阴影效果#import "GPUImageSoftLightBlendFilter.h" //柔光混合#import "GPUImageChromaKeyBlendFilter.h" //色度键混合#import "GPUImageMaskFilter.h" //遮罩混合#import "GPUImageHazeFilter.h" //朦胧加暗#import "GPUImageLuminanceThresholdFilter.h" //亮度阈#import "GPUImageAdaptiveThresholdFilter.h" //自适应阈值#import "GPUImageAddBlendFilter.h" //通常用于创建两个图像之间的动画变亮模糊效果#import "GPUImageDivideBlendFilter.h" //通常用于创建两个图像之间的动画变暗模糊效果#pragma mark - 尚不清楚#import "GPUImageJFAVoroniFilter.h"#import "GPUImageVoroniConsumerFilter.h"
3.3.6, ShowTime : 视频直播的前处理, 智能美颜和H264硬编码等都在这里面.
美颜已在上一块介绍,下面介绍一下H264硬编码。如果使用ijkplayer 使用硬解码, 一句代码即可.
// 开启硬解码[option setPlayerOptionValue:@"1" forKey:@"videotoolbox"];
硬编码的应用场景: 我们要将主播的视频数据传送给服务器
通过摄像头来采集图像,然后将采集到的图像,通过硬编码的方式进行编码,最后编码后的数据将其组合成H264的码流通过网络传播。
摄像头采集图像, iOS系统提供了AVCaptureSession来采集摄像头的图像数据. 项目中我是直接使用 GPUImage 中的GPUImageVideoCamera, 直接设置GPUImageVideoCamera的代理即可, 在其代理方法- (void)willOutputSampleBuffer:(CMSampleBufferRef)sampleBuffer;进行数据编码即可.
切记一点: 不管是系统自带的AVCaptureSession还是GPUImageVideoCamera采集到的数据都是未经过编码的CMSampleBuffer.
然后将采集到的数据, 用iOS开放的VideoToolbox进行硬编码. 关于VideoToolbox硬编解码网上很多教程, 当然最好是看Apple的官方文档, 如果只是硬编码, 看我的项目即可.
关键的编码函数(来自YOLO直播负责人的开源项目 BeautifyFaceDemo )
void didCompressH264(void *outputCallbackRefCon, void *sourceFrameRefCon, OSStatus status, VTEncodeInfoFlags infoFlags, CMSampleBufferRef sampleBuffer ){ if (status != 0) return; // 采集的未编码数据是否准备好 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) // 关键帧 { 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); } }}
3.3.7, Main : UITabBarController和UINavigationController的配置
// 主界面#import "HomeViewController.h"// 个人中心界面#import "ProfileController.h"// 直播推流界面#import "ShowTimeViewController.h"// 自定义导航控制器#import "ALinNavigationController.h"// UIDevice扩展,判断当前是否是模拟器状态#import "UIDevice+SLExtension.h"// AVFoundation框架#import <AVFoundation/AVFoundation.h>
其次,注意判断直播界面,开启摄像头与麦克风
// 判断是否选定为直播界面 if ([tabBarController.childViewControllers indexOfObject:viewController] == tabBarController.childViewControllers.count-2) { // 判断是否是模拟器 if ([[UIDevice deviceVersion] isEqualToString:@"iPhone Simulator"]) { [self showInfo:@"请用真机进行测试, 此模块不支持模拟器测试"]; return NO; } // 判断是否有摄像头 if(![UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]){ [self showInfo:@"您的设备没有摄像头或者相关的驱动, 不能进行直播"]; return NO; } // 判断是否有摄像头权限 AVAuthorizationStatus authorizationStatus = [AVCaptureDevice authorizationStatusForMediaType:AVMediaTypeVideo]; if (authorizationStatus == AVAuthorizationStatusRestricted|| authorizationStatus == AVAuthorizationStatusDenied) { [self showInfo:@"app需要访问您的摄像头。\n请启用摄像头-设置/隐私/摄像头"]; return NO; } // 开启麦克风权限 AVAudioSession *audioSession = [AVAudioSession sharedInstance]; if ([audioSession respondsToSelector:@selector(requestRecordPermission:)]) { [audioSession performSelector:@selector(requestRecordPermission:) withObject:^(BOOL granted) { if (granted) { return YES; } else { [self showInfo:@"app需要访问您的麦克风。\n请启用麦克风-设置/隐私/麦克风"]; return NO; } }]; } // 跳转直播推流界面 ShowTimeViewController *showTimeVc = [UIStoryboard storyboardWithName:NSStringFromClass([ShowTimeViewController class]) bundle:nil].instantiateInitialViewController; [self presentViewController:showTimeVc animated:YES completion:nil]; return NO; }
3.3.8, Toos : 封装的一些工具类
- UIImage+ALinExtension:图片处理,包括生成一张高斯模糊的图片,根据颜色生成一张图片,生成圆角的图片
- UIImageView+Extension:生成Gif 动画
- UIViewController+SLExtension:设置是否显示加载GIF动画
- SLTopWindow:window窗口设置
- ALinRefreshGifHeader:继承自MJRefreshGifHeader,设置刷新动画样式
- UIDevice+SLExtension:获取设备版本号
- UIView+SLExtension:设置View的基本参数
- UIViewController+SLHUD:设置ViewController页面加载样式
3.3.9, Login : 登录模块
如果你多运行几次就会发现, 登录模块背景中播放的视频是2个视频每次随机播放一个的.并且是无限重复的, 也就是说只要你一直呆着登录界面, 就会单视频循环播放当前的视频. 这儿的登录只是几个按钮, 没有具体的登录逻辑, 随便点哪一个按钮都可以进入首页.
我们需要监听视频, 是否播放完成.
// 监听视频是否播放完成 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(didFinish) name:IJKMPMoviePlayerPlaybackDidFinishNotification object:nil];如果播放完成了, 让IJKFFMoviePlayerController再次play即可- (void)didFinish{ // 播放完之后, 继续重播 [self.player play];}
3.3.10, Resource : 项目用到的资源文件
一些基本设置
四,项目编译环境
Xcode7(及以上)
最好是将项目跑在真机上. 有些地方模拟器是不支持的, 也看不到任何效果的, 比如硬编码/智能美颜等, 这些功能模块, 我做了限制的, 需要真机状态才能进行.
至此,完结,预祝各位新年快乐,新的一年,新的开始,不断前进!
- iOS 直播技术及Demo
- ios 视频播放/直播demo
- iOS 直播技术平台
- iOS 直播技术文档
- HTTP Live Streaming直播(iOS直播)技术分析与实现
- HTTP Live Streaming直播(iOS直播)技术分析与实现
- HTTP Live Streaming直播(iOS直播)技术分析与实现
- HTTP Live Streaming直播(iOS直播)技术分析与实现
- HTTP Live Streaming直播(iOS直播)技术分析与实现
- HTTP Live Streaming直播(iOS直播)技术分析与实现
- HTTP Live Streaming直播(iOS直播)技术分析与实现
- HTTP Live Streaming直播(iOS直播)技术分析与实现
- HTTP Live Streaming直播(iOS直播)技术分析与实现
- HTTP Live Streaming直播(iOS直播)技术分析与实现
- HTTP Live Streaming直播(iOS直播)技术分析与实现
- HTTP Live Streaming直播(iOS直播)技术分析与实现
- HTTP Live Streaming直播(iOS直播)技术分析与实现
- HTTP Live Streaming直播(iOS直播)技术分析与实现
- jquery学习(一)hello world
- nginx配置文件解析
- 超过1M的网络动图添加到微信表情包
- python生成验证码,文字转换为图片
- Windows下的Python安装
- iOS 直播技术及Demo
- mysql和oracle默认表存储结构的不同
- VCL线程的同步方法 Synchronize(用消息来同步)
- AVPlayerViewController定制
- 媒体实录:百度林元庆第一时间解读百度大脑VS.最强大脑第一场
- docker 容器防火墙设置
- 类的三个特征 ==== 封装、继承、多态
- HTTP摘要认证
- JAVA中关于equals的重写