电竞微信内的录像直播电商会不会成为下一个直播+的风口?

会不断揭橥直播方面的材料 正在做直播的或对直播有趣味的可进直播互换群:183331015  共同学习探讨

电竞 1

是因为licecap录制的GIF失帧太严重, 都模糊掉了, 再放两张高清截图

png1

电竞 2

电竞 3

前言

现年三月份,斗鱼获腾讯领投的1亿比索融资的新闻被各大平台广播发表转发,在电竞、泛娱乐已是热门投资的即时,网络直播平台自然也博得了各界的钟情。盗用两张有关游戏直播的主旋律图

游戏直播规模

娱乐直播规模

那还仅仅是一日游直播那块的蛋糕.直播行业的竞争会更为火爆,
不管是主播照旧直播平台都面临着强烈的竞争, 当然直播行业也会越加规范,
直播元素也越加多.

录像直播初窥

视频直播,能够分成 采集,前处理,编码,传输, 服务器处理,解码,渲染

采访: 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 : 包蕴最新主播, 最热直播, 关心的直播, 礼物排名榜等模块.
还有最重点的视频直播也在那里面了.

Show提姆e :见名知意. 录像直播的前处理, 智能美颜和H264硬编码等都在那边面.

Main : UITabBarController和UINavigationController的配置

Toos : 那儿命名有点不专业, 这些中放置的都是系列用到的分类

Login : 登录模块

Resource : 项目用到的资源文件

项目详解

tip1: 判读网络类型.

在看到直播的时候, 大家常见都是用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;

}

tip2: 登录模块

要是你多运行五次就会意识,
登录模块背景中播放的录像是2个录像每一遍随机播放一个的.并且是最为重复的,
也就是说只要您平昔呆着登录界面, 就会单视频循环播放当下的视频.
这儿的报到只是多少个按钮, 没有切实可行的登录逻辑,
随便点哪一个按钮都可以进入首页.

俺们须求监听视频, 是否播放达成.

// 监听视频是否播放已毕

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

只要播放达成了, 让IJKFFMoviePlayerController再度play即可

– (void)didFinish

{

   // 播放完事后, 继续重放

   [self.player play];

}

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上边的. 上面代码有详细的注释

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];

tip6: 弹幕

弹幕使用的也是一个第三方轮子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];

tip7: 智能美颜功效

当今的直播平台, 美颜是标配.
不然绝大多数的主播都是迫于看的.美颜算法必要用到GPU编程,
须要懂图像处理的人. 图像处理这一块我不是很熟稔,
相关的文献也是看得云里雾里的. 所以, 依旧接纳开源的车轱辘: GPUImage .
那些开源框架有近1.3W+star(七月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 “GPUImageNon马克斯(Max)imumSuppressionFilter.h”    
//非最大抑制,只突显亮度最高的像素,其余为黑

#import “GPUImageThresholdedNon马克斯imumSuppressionFilter.h”
//与上相比较,像素丢失越来越多

#import “GPUImageSobelEdgeDetectionFilter.h”      
 //Sobel边缘检测算法(白边,黑内容,有点漫画的反色效果)

#import “GPUImageCannyEdgeDetectionFilter.h”      
 //Canny边缘检测算法(比上更了然的长短比较度)

#import “GPUImageThresholdEdgeDetectionFilter.h”  
 //阈值边缘检测(效果与上差别不大)

#import “GPUImagePrewittEdgeDetectionFilter.h”    
 //普瑞维特(Prewitt)边缘检测(效果与Sobel大概,貌似更平整)

#import “GPUImageXYDerivativeFilter.h”            
 //XYDerivative边缘检测,画面以粉红色为主,青色为边缘,带彩色

#import “GPUImageHarris(Rhys)(Harris)CornerDetectionFilter.h”    
//Harris(Rhys)(Harris)角点检测,会有灰色小十字突显在图纸角点处

#import “GPUImage诺Bell(Noble)CornerDetectionFilter.h”    
 //诺Bell(Noble)角点检测,检测点越多

#import “GPUImageShi汤姆(Tom)asiFeatureDetectionFilter.h”
//Shi汤姆asi角点检测,与上距离不大

#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”          
 //3×3卷积,高亮大色块变黑,加亮边缘、线条等

#import “GPUImageEmbossFilter.h”                  
 //浮雕效果,带有点3d的觉得

#import “GPUImagePolkaDotFilter.h”                  //像素圆点花样

#import “GPUImage哈尔(Hal)ftoneFilter.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”

tip8: H264硬编码

假如运用ijkplayer 使用硬解码, 一句代码即可.

// 开启硬解码

[option setPlayerOptionValue:@”1″ forKey:@”videotoolbox”];

硬编码的利用场景: 大家要将主播的录像数据传送给服务器

因而录像头来搜集图像,然后将征集到的图像,通过硬编码的章程展开编码,最后编码后的数量将其构成成H264的码流通过网络盛传。

视频头采集图像,  iOS系统提供了AVCaptureSession来收集视频头的图像数据.
项目中自己是一贯利用 GPUImage 中的GPUImageVideoCamera,
直接设置GPUImageVideoCamera的代理即可, 在其代理方法-
(void)willOutput山姆(Sam)pleBuffer:(CM萨姆pleBufferRef)sampleBuffer;进行数据编码即可.

纪事一点:
不管是系统自带的AVCaptureSession依然GPUImageVideoCamera采集到的数据都是未经过编码的CM山姆pleBuffer.

下一场将收集到的数量, 用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);

       }

   }

}

感触

固然如此那几个类型是个村寨的, 高仿的, 不过如故已经很巨大了.
具体的底细依然需求我们温馨去看自己的花色源码.
短短几千字还真说不清这么多的学识点. blog的稿子名字说了是初窥,
还确确实实只是初窥, 视频直播里面的坑太多. 且行且珍惜…

tip: 本文理论知识部分, 采集自网络. 请牢记一句话talk is cheap show me the
code, 重点在于Demo项目本身. 理论部分自己只是一个挑夫和计算者…

项目编译环境

Xcode7(及以上)

极端是将项目跑在真机上. 有些地方模拟器是不襄助的, 也看不到任何功能的,
比如硬编码/智能美颜等, 这一个功效模块, 我做了限定的, 必要真机状态才能举办.

© 文章权归作者所有 本文仅  转发

电竞 4

视频直播初窥:高仿<喵播APP>

电竞 5

转发小编 Monkey_ALin一文

效果图

就此要做微信内直播,推流端必须是有独立的App或桌面管理端,播放端方今只得利用HLS协议来播放。年前Bilibili团队开源了flv.js,是H5播放器内核,可以间接在HTML5上可以播放RTMP协和的流媒体。然则出于iOS
Safari不辅助MSE(Media Source
Extension),以及Android的微信X5浏览器直接把MSE的支撑砍掉,所以flv在微信上一向播放的可能微乎其微。所以,近年来而言,在微信上做直播,只好忍受10-15秒的推移了。
上面是直播关键技术的概貌,当然,仅仅是水到渠成那几个技术是不够的,作为直播应用的开发者,还索要形成应用层的一堆复杂逻辑,用户,礼物,名次等等,如若要加上电商的效率,这开发难度又要上一个多少级。
大家来探望做一个直播软件须要花怎么钱:
支出成本,一个产品兼UI+iOS开发+Android开发+Web前端开发+后端开发相应是最低配置了,开发周期最少3个月,根据总体是资深级的员工算,一个月的工钱大约在10万元。别想着3个月支付完了这个人就都无须了,假设没有产品的源源不断更新和爱护,一切都是白说。

会持续发表直播方面的材料 正在做直播的或对直播有趣味的可进直播交换群:183331015  共同学习切磋

编码后的录像须求先推流到服务器,方今通用的视频直播协议是RTMP,RTMP是Adobe集团提出的视频传输协议,在上传录像从前需求按照RTMP的渴求,将编码后的视频封装成FLV格式。

何以要在微信上做电商直播?
直播行业的光热照旧居高不下,近日中国的在线直播平台数量已达200家,各个互联网行业巨头纷繁投入直播行业,可以臆想,直播未来会化为每个公司的标配。
在秀场直播,出现了像映客,花椒,一直播等一批领头羊;在电竞游戏直播领域,有短期的YY,虎牙,战旗,近来也乘机直播行业的热烈,迎来了新的红利期。
在那一个领域,通过直播变现的首要路径依旧打赏,广告,电商直播成为了更加多互联网公司争相争夺的商海,因为它的表现目标性更强,必要更急于,市场更乐观。因而,在电商垂直领域,Tmall、蘑菇街、聚美优品等电商大亨也纷繁加盟。在竞争如此可以的直播市场,各大平台已基本到位布局,后来者居上想要杀出重围,九死平生。

  1. 其余一个阳台的发展都离不开“流量”,不少商店为了赢得用户,争取流量,不惜重金与各大平台厮杀,企图险中求胜,一旦资金链断裂,能存活下来的少之又少。而据悉微信的月活跃用户和流量,意味着相比较平时的运用类平台,做微信内直播,接入门槛更低。
    我们不妨纪念一下张小龙在2016.12.28在微信公开课上颁发的2016微信数据报告。微信平均日登陆用户已经达到了7.68亿,同比二〇一五年加强了35%。超越九成微信用户每一日都会利用微信,半数用户每天使用微信超过90分钟;视频通话总次数1亿次,其中80、90后是几度用户。拥有200位以上好友的微信用户数占比最高,61.4%用户每回打开微信必刷“朋友圈”;超过六成微信用户使用过微信生活服务,手机充值、买电影票、吃喝玩乐消费渗透率最高;运营者对群众号的投资,数量和金额均显然加强;公司号账号已达65万。朋友圈音讯流中,用户更关乎好友揭橥的生存情况,“转载内容”关切度较低,但也侵吞30%,只看不互相的用户,占比仅一成。公众号的营业中央中,个人与商家的比重约为1:3,领先六成的运营者对斯巴鲁平台有投资。微信扶助公司得到和劳务用户方面,潜力已被很好激活。近年来看这一天地的天花板还远远未到,接下去将跻身更高规模的发生期。
    2.乘机移动互联网的开拓进取,微信生态诞生了基于移动特性的广告情势。早期的敌人圈,除了文字和图表之外,没有任何的交换格局,但是两次三番,随着技术的进化,移动端用户增量爆发,出现了H5,以更有意思的办法开展传播和互动,在此之后,短录像迎来春风,二〇一五年六月,小咖秀的暴发,使短录像在逐一平台盛行起来,内容创业,成为新时期各大自媒体行业的流行词。微信也借着短录像的暴发,在二〇一六年1二月11日,宣布了足以大饱眼福相册中的视频功能。这种即拍即发的小视频,已经在一定水准上满意了奇特时刻现场直播的要求。因而,大家得以大胆预测,作为文字,图片,音频之外新的调换格局,将来,直播会成为微信内另一种新的内容格局。
    3.微信群众号平马普托已有超常70%是合作社或部门,剩余30%是个人创业,并基于微信展开了多量音信化投入,微信已经成了主要的创业孵化平台,电商直播可以给这个公司或创业者提供内容和流量变现的新渠道、新章程,直播成为集团标配不是白日梦。而提供移动直播服务的平台,不管从技术、营销、服务、内容,都足以衍生出更多的直播服务盈利。
    哪个人会在微信上做直播电商?
![](https://upload-images.jianshu.io/upload_images/1716566-752363a64503e5cc)



请点击此处输入图片描述  
1.传统微商  
微商兴起于2013年,带有强烈的社交色彩的移动电商销售模式呈现出爆发式增长,然而2014-2016年,经过各种打假、曝光后,微商在许多用户心中留下了“传销、三无产品”的刻板印象,市场整顿亟不可待。不少人在打算或正在进行微商过程中,受到不少来自亲朋好友的质疑,屏蔽,拉黑。2016年后,微商逐步迈入规范化、品牌化运营,但在“洗白”的道路上,仍然困难重重。根据某调查研究显示,用户不购买微商产品主要原因是对微商了解甚少。受益于品牌微商保障度及微商口碑积累,有四成用户有尝试意愿。而电商直播,可以快速地让微商打破刻板印象,以直观的形式,来证明自己的产品,向大众诠释对于微商的正确定义。  
2.公众号平台  
在过去的一年里,运营者对公众号的投资,数量和金额均明显增长,企业公众号从一个企业发声渠道演变为企业品牌传播、消费者维护及移动电商运营的综合渠道,而企业公众号的运营绝不仅限于分享,用户的沉淀,流量的转化,内容的变现才是企业的最终目的。借助微信内直播,公众号平台的内容输出又有了新的方式,与粉丝的互动更直接,更有趣,内容变现的渠道也随之而来。  
3.品牌商,服务商,实体店  
不同微商对活跃平台有所侧重,个人微商多活跃于微信,品牌型微商则依托第三方平台,例如微信公众号。微信内直播,可以通过内嵌公众号,纳入员工体系,一键搭建起属于企业的专属运营平台,既能产生内容,又方便运营和管理,提高用户的留存率和购买转化率。任何有展示和售卖需求的个人或商家都可以在微信内完成整个电商营销和交易的闭环。  
4.大型会议,活动  
对于一些时效性较强的大型活动,类似产品发布会,宣讲会,演唱会,展会,博览会,国际赛事,甚至公司年会等,B端企业对直播的需求日益紧迫。移动直播可以让企业无需依托设备、平台,便可在全球任何角落一键发起直播并实时参与互动。相比传统的渠道,比如灯箱,户外广告,直播所带来的场景化和实时互动,可以满足他们“拉进与C端距离”的营销需求,也更加有助于转化。  
现有直播分享至微信是怎么做的?  
可以看到,众多的直播软件都有支持分享直播到朋友圈的功能,然而在电商直播平台领域,如淘宝,蘑菇街,包括一众新兴的电商直播平台,都存在这样一些问题。  
1.内容单一,功能不齐全。没有充分利用微信生态内的交易闭环。微信用户无法完成在微信内从观看直播,到下单,到支付这样一整套的流程。  
2.商家没有一个固定的链接分享,也无法接入公众号,导致普通微信用户没有固定的进入店铺内浏览和下单的入口。  
3.几乎所有的直播软件,包括电商直播软件,都将首页设置为一个广场,多数热门排名掺水,网红占据了版面前排,而真正有营销需求的商家只能在广场中沉没。没有一个封闭的营销环境,粉丝和流量只能被那些热门排名所吸引,甚至从外链进入的用户,也可能会被转移到其他的商家。  
4.无法露出二维码,无法脱离直播场景后进行进一步的社交和维护。比较聪明的主播,会自己在小黑板上写下微信号,全程放在背后当背景,而大部分主播不会考虑到这些。如果能够跳脱直播场景,在微信群或公众号内与粉丝进行更紧密的互动,提高与粉丝的粘度,商家的可持续经营性就更强。  
在微信内的直播需要什么技术



![](https://upload-images.jianshu.io/upload_images/1716566-6e03af86c17bd70a)

直播技术近来早就趋于成熟,紧若是一个这么的长河:录像捕捉-编码-推流-转码-分发-拉流-播放。大家分别讲一下挨家挨户部分存在的技能须要。
录像捕捉须求硬件支撑,不管是统计机的视频头可以仍然手机的相机也好,也就是推流端必须存在于有捕捉视频的装备中,最通用而且不难的就是手机。

然而,在微信直播领域,我们来看了新的空子。

1.对准不一样规模和营销必要的用户,提供差距服务方式。
一、专属公司。对于有营销能力,有早晚粉丝规模的商家,他们对此直播而言,诉求越来越多的是品牌的树立,有规范独立的商店,更能有限支撑品牌形象。用户通过集团享受的直播链接进入页面,将不可以看出其余商家,没有广场概念,保障通过该集团享受带来的用户,任然停留在商店内,有限支持粉丝不流失,相当于一个专属定制应用。
二、广场商家。对于有放大要求,想要增添暴光几率的微商,他们的诉求直接省略,就是亟需能因此直播引发到越来越多的客户,升高他们的销量。店铺的入口和音信共享,通过分享链接进去的粉丝,不仅可以查阅当前供销社,也足以跳转至广场浏览其他铺面,在广场内,每一个商店都有彰显和被发觉的火候。
三、保留传统的直播实时互动形式,因为彼此才是直播的精髓,是直播与录像、小说、图片乃至电视机最大的分歧。互动的花样包含但不压制弹幕互动,评论区互动,礼物打赏,点赞等。
四、适应电商直播的特征,多样的优惠活动。商家可以任意创立活动,例如打折券,秒杀,限时折扣,拍卖,团购,拼团,分享得红包,付费观看直播,以适应更加多的降价手段和营销须要,基于行业的多样性,未来还有为数不少方可想像的上空。在直播进程中通过各个营销手法鼓励刺激用户主动分享,带来流量的裂变。
眼下早就有几家厂家初步关切微信内直播了,不过真的注意微信内直播电商的还并未出现,可是小编认为那是一个很好的机遇,只要产品得力,很有可能出现像微盟或者有赞那样的暴发性的产品出来。
豆佰直播是近年我们公司正在做的一款微信内直播的成品,适合微信公众号,微商和品牌商家做微信内的直播,并且可以边播边卖。
有趣味的意中人可以加微信公众号(doubuylive)通晓。
我们的app如今唯有iOS版本,有亟待的情侣可以下载试试,须要热切审核的同班可以加微信(doubuylive)找小i豆提前审核店铺。
豆佰直播官方主页:http://www.doubuy.tv

由此这么看来,一个月的固定花销是10万左右,流量起来未来开支就是接着流量走,即使不拿出100万左右的钱来做撑个半年,就别探讨着和谐开发了,而且就是拿出去这么多钱,没有找对适合的开发者,那也一律是徒劳。
什么的直播电商平台可以符合现今的必要呢?

服务器开销,幸亏现在还有各个云总计,可以节约不可胜道成本,可是细算下来也不少。以阿里云为例,3台ECS,1台RDS,应该是低于的配备了,一个月应该在600左右,后续按照用户量还必要继续增多服务器。然后开展OSS,直播服务,CDN,SLB,等等根据使用率收费的劳务,后续如若流量大,那块是费用的银元。

上传到服务器之后,服务器将收取的录像流举行分发,如若有多种格式须求的,还亟需转码后分发。一般而言,只必要转码成HLS格式,适合手机的web观望即可。方今各大云厂商已经交付了各样服务,推流,转码,CDN加速都早已是成熟的制品。

录像捕捉获得的是一帧帧图纸,如若直接用那么些格式传输的话,体积太大,于是在传输从前务要求先将录像编码。物理学家们早已提交了更进一步非凡的算法,对录像文件举办最大的缩减,而播放的历程又能尽可能裁减画质的损失。如今相比一般使用的编码格局是H.264,H.264/AVC项目意向创造一种录像正式。与旧专业相比较,它亦可在更低带宽下提供上乘视频(换言之,唯有MPEG-2,H.263或MPEG-4第2片段的一半带宽或更少),也不扩大太多设计复杂度使得无法得以完成或促成资产过高。另一目标是提供足够的八面见光以在各个应用、网络及系统中应用,包蕴高、低带宽,高、低录像分辨率,广播,DVD存储,RTP/IP网络,以及ITU-T多媒体公用电话系统。

电竞 6

1488704837.png

那般寓目端就有三种可能,一种是接济RTMP的播放器直接播放RTMP的流媒体,那样的录像延迟低,一般在2-4s左右,不过RTMP协议并不是所有地方都支持,手机浏览器Safari就不帮忙,由此一般的话使用RTMP来播放流媒体都是在App内部。此外一种是HLS的播放器,绝超过半数的播放器都协理的格式,尤其是Safari直接扶助(因为HLS本来就是Apple提出的情商),微信内的浏览器内核使用的是UIWebView(如今切换来了WKWebView),也是直接襄助HLS协议的流媒体,可是最大的缺陷就是延迟高,一般在10-15s左右。

发表评论

电子邮件地址不会被公开。 必填项已用*标注