美文网首页常用技术收集iOS开发部落ios进阶
一步步搭建视频直播系统,基于LFLiveKit+ijkplaye

一步步搭建视频直播系统,基于LFLiveKit+ijkplaye

作者: lixuCoding | 来源:发表于2016-10-12 17:29 被阅读4963次

本文主要使用的三个技术:

  • 推流:LFLiveKit
  • 播放:ijkplayer
  • 服务器:nginx+rtmp+ffmpeg

有了这三点技术就可以完成一个简约的直播系统。效果图如下(右边的是用模拟器设备运行播放的,中间的是用VLC播放器播放的,当前在用手机推流直播)。

效果图.gif

一、推流

LFLiveKit:框架支持RTMP,由Adobe公司开发。github地址https://github.com/LaiFengiOS/LFLiveKit

LFLiveKit库里已经集成GPUImage框架用于美颜功能,GPUImage基于OpenGl开发,纯OC语言框架,封装好了各种滤镜同时也可以编写自定义的滤镜,其本身内置了多达125种常见的滤镜效果。

1.将项目下载到本地。

2.根据README.md文件集成,如下截图:

screen1.png

终端cd 到LFLiveKitDemo后,再输入vim Podfile后,文件直接自动补全如下

source 'https://github.com/CocoaPods/Specs.git'
platform :ios,'7.0'

target “LFLiveKitDemo” do
    pod 'LFLiveKit', :path => '../.'
end

注意:须将“LFLiveKitDemo”的中文引号改为英文引号。同时删掉, :path => '../.'

3.运行LFLiveKitDemo。

1)会有如下报错代码,将其注释

videoConfiguration.outputImageOrientation = UIInterfaceOrientationLandscapeLeft;
videoConfiguration.autorotate = NO;

2)再次运行代码会有报错,修改后如下

            _videoCamera.outputImageOrientation = statusBar;
//            if (statusBar != UIInterfaceOrientationPortrait && statusBar != UIInterfaceOrientationPortraitUpsideDown) {
//                @throw [NSException exceptionWithName:@"当前设置方向出错" reason:@"LFLiveVideoConfiguration landscape error" userInfo:nil];
//            } else {
//            }

3)再次运行便可成功推流。

4.百度里下载支持rtmp协议的视频播放器VLC,以确保我的直播已被推到服务器。

打开VLC,然后点击工具栏File - Open Network... ,然后输入的URL是LFLivePreview.m文件里stream.url值如下:

LFLiveStreamInfo *stream = [LFLiveStreamInfo new];
stream.url = @"rtmp://live.hkstv.hk.lxdns.com:1935/live/stream153";
[_self.session startLive:stream];

请注意这是LFLiveKit的公用服务器地址,别人也可以拉流获取看到你的直播。将在最后介绍在自己电脑中搭建自己的服务器,再也不怕被别人偷看了。

5.将LFLiveKit集成到自己的项目

新建项目名为LXPlayerLive,将Podfile里填写为

source 'https://github.com/CocoaPods/Specs.git'
platform :ios,'7.0'

target "LXPlayerLive" do
    pod 'LFLiveKit'
end

将LFLivePreview、UIControl+YYAdd、UIView+Add这三个类的.h与.m文件拖入项目中,运行无误后做如下修改
1)改为竖屏直播,配置如下图


screen3.png

2)注释掉ViewController.m里的代码

//- (UIInterfaceOrientationMask)supportedInterfaceOrientations {
//    return UIInterfaceOrientationMaskLandscape;
//}
//
//- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation {
//    return YES;
//}

3)修改LFLivePreview.m的对应代码videoSize的值为

videoConfiguration.videoSize = CGSizeMake(360, 640);

二、播放

ijkplayer:是基于FFmpeg的跨平台播放器框架,由B站开发。目前已被多个主流直播App集成使用。github地址:https://github.com/Bilibili/ijkplayer
若不愿运行源demo(配置时间较久),可以直接跳到第四步集成IJKMediaFramework库。

1.查看README.md,找到Build iOS,如下截图:

screen4.png

2.根据介绍进行终端命令行操作,截图如下:

screen5.png

继续执行如下命令(时间稍长)

cd ios
./compile-ffmpeg.sh clean
./compile-ffmpeg.sh all

3.运行IJKMediaDemo示例项目

成功后找到拉流的关键代码用于自己项目集成。在app界面上点击Online Samples,再点击任意一个cell即可播放。从而在demo中可追踪到IJKMoviePlayerViewController类,即是播放的类。

4.在自己项目LXPlayerLive中使用IJKMediaFramework.framework库播放

按照如上的步骤便可集成好ijkplayer,但是下载ffmpeg与编译,执行脚本时间太长也麻烦,所以有大神将其集成为了一个IJKMediaFramework.framework库,直接添加即可使用,免去上面步骤中的麻烦。(下载地址忘记了,有Debug与Release版本)
1)注意:一定先把IJKMediaFramework.framework复制到项目文件夹中,别拖到项目中,然后在Build Phases -> Link Binary with Libraries -> Add这个位置添加IJKMediaFramework库
2)根据screen4.png截图中的提示,再添加相应的13个库。

5.集成代码

实例demo中的播放界面用的mediaControl自己感觉很丑就不使用其相关代码了,将其余代码全部复制到自己项目的播放控制器中。集成的核心代码如下:

    [IJKFFMoviePlayerController checkIfFFmpegVersionMatch:YES];
    // [IJKFFMoviePlayerController checkIfPlayerVersionMatch:YES major:1 minor:0 micro:0];

    IJKFFOptions *options = [IJKFFOptions optionsByDefault];

    self.player = [[IJKFFMoviePlayerController alloc] initWithContentURL:self.url withOptions:options];
    self.player.view.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
    self.player.view.frame = self.view.bounds;
    self.player.scalingMode = IJKMPMovieScalingModeAspectFit;
    self.player.shouldAutoplay = YES;

    self.view.autoresizesSubviews = YES;
    [self.view addSubview:self.player.view];

此处的self.url暂时还使用LFLiveKit的开发者提供的免费公用直播推流服务器地址(在播放时常常看到别的程序员的直播,偷笑)。

三、服务器搭建

nginx+rtmp+ffmpeg:在本地搭建服务器,免去开通第三方直播的流量费用。
现在我们的项目中集成了推流的所用的LFLiveKit,播放所需的ijkplayer,便可用手机做推流直播,模拟器做拉流播放。

1.安装Homebrew

因为安装nginx+rtmp+ ffmpeg需要Homebrew。使用命令man brew查看是否装有Homebrew,若没有自行再百度安装即可,我的由于之前装过ReactNative的环境需要Homebrew,因此会提示一个帮助信息(证明已经安装有了),然后输入Q即可退出。

2.安装nginx

分别键入如下命令

brew tap homebrew/nginx
brew install nginx-full --with-rtmp-module
nginx
brew info nginx-full

此时在终点末尾查找nginx.conf文件的位置,如下图


screen6.png

然后进入进入/usr/local/etc/nginx/nginx.conf文件里,在最后一行添加如下代码

rtmp {
    server {
        listen 1935;
        application rtmplive {
            live on;
            record off;
        }
    }
}

3.重启nginx

nginx -v 查看版本号后再执行

/usr/local/Cellar/nginx-full/1.10.1/bin/nginx -s reload

将上面的1.10.1换成你刚才输出的版本号。

4.安装ffmpeg

键入如下命令(时间较长)。

brew install ffmpeg

5.到此已完成nginx的服务器搭建

可将项目中所用的推流与拉流的URL由rtmp://live.hkstv.hk.lxdns.com:1935/live/stream153换成rtmp://192.168.15.122:1935/rtmplive/room
注意:
1.将192.168.15.122换成自己电脑的ip地址,端口号1935别改。
2.必须保证推流与拉流的设备与此电脑使用的是同一个局域网。

四、总结

本文主要分享如何使用第三方框架的经验,从源码到集成,没作代码解析。一个完整的直播系统需要涉及到的技术主要包括以下方面:
1.采集、2.滤镜处理、3.编码、4.推流、5.CDN分发、6.拉流、7.解码、8.播放、9.聊天互动。
其中1~4由LFLiveKit完成(2由GPUImage完成),5就是搭建的本地服务器,6~8由ijkplayer完成。

源码请点击github地址下载。

抓取了映客、喵播、斗鱼等的直播接口用在了此demo上的地址是github地址

运行LXPlayerLive源码会报错,因缺少IJKMediaFramework库,文件太大不能上传到Github,请另外下载IJKMediaFramework按照上面的方法添加到我的demo中。项目用了pods,所以还需执行 pod install。
再次运行如果报错如下:


screen7.png

需设置 General>Deployment Info> Deployment Target 为8.0

相关文章

网友评论

  • GhostClock:我也成功了,感谢博主带路
    GhostClock:不过现在感觉延时特别大,大概在4-5秒的延时,就算在同一个局域网内,延时也很大
  • 清风醉人_007:两台手机测试了一下,只有7秒左右的延迟,666
  • iOS_July:最开始遇到failed to read rtmp packet header的问题,后来发现自己没有搭建服务器,然后本地推流了一个桌面上的视频,LVC能播放。然后替换了一个url,出现了
    ERROR: PILI_RTMP_Connect0, failed to connect socket. 60 (Operation timed out)
    ,看了您的文章之后,我发现我的url,并不是我的IP地址,但是局域网肯定是统一的,所以我大致知道原因了,今晚回家再试试
  • 40d73f9a3097:大神,您好,感谢分享这么详细的技术贴,技术小白的我都能看懂,想请教个问题,我在自己电脑上用:nginx+rtmp 搭一个服务器,用视频编码器推流到自己搭的服务器上,然后用支持rtmp协议的播放器播放,视频数据只会存储在自己电脑上,对吗?别人没有rtmp地址就无法看到视频,编码器软件不会存储视频数据,对吗?
  • da0b9d293728:膜拜:smiley:
  • 糖加一勺丶:挖个坟,请问这套直播框架理论的并发量大概是多少?或者提高并发量有那些方法?
  • Android最强王者:楼主,棒哟👏,交个朋友😄
  • 时光追寻:楼主,您好,我有个问题想要问一下,现在我在一台手机上面推流,另一台手机拉流,当拉流的手机发出一个指令后,拉流的手机也进行推流,原来推流的手机收到指令之后也进行拉流,为什么,开始拉流的手机拉流就会卡住不动,这是什么原因呢,就是两个手机间同时进行推流和拉流????????
  • TigerNong:还有如果是手机,不管是推流还是拉流都无法连接!
  • TigerNong:楼主,你好!我使用了你的方式在本地搭建了服务器,然后通过终端来打开电脑的设摄像头进行获取数据进行推流,然后再用自己ijkplayer来进行拉流,这个是可以的!但是再使用LXPlayerLive来进行推流时,总是报host down 或者是operation time out ,这个算是我服务器没有搭好吗?还是其他什么问题,请教一下!
  • 进击的小恶魔:怎么都说是Adobe公司开发的呢?难道不是优酷土豆旗下的来疯直播的开源框架吗?
    shengshenger:@shengshenger RTMP是由Adobe公司开发
    shengshenger:框架支持RTMP,由Adobe公司开发
  • 路漫漫其修远兮Wzt:最近在自学ffmpeg,里面有推流的知识;网上找资料时,来到了这里,按照本文方法,实现真机推流,模拟器拉流,成功实现视频直播。楼主好厉害,谢谢分享...
  • kkkore:楼主大大,您好。我有几个问题想向您请教一下。
    1、我在VLC上第一屏的进入很慢,以及播放的卡顿十分严重,造成这个的原因是因为网络的问题吗?
    2、尝试接入了第三方服务商提供的推流地址、进入第一屏的进入很慢,有约10-15s左右的滞后。是因为没有使用对方提供的SDK接入,缺少请求参数的原因吗?
    3、如果要做成正常的联网直播,就是将本地的rtmp地址给替换掉,是这样吗?
    问题可能很白痴,请见谅。 :pray:
    3f270e490cb7:@App开发LiXu 推送+播放,换成这个试试 https://github.com/daniulive/SmarterStreaming
    开源的,坑太多了,延迟是控制不下来啊
    kkkore:@App开发LiXu :+1: 3Q~~~
    lixuCoding:@kkkore 都会有延迟的,太久的话是服务器和网络都有影响。可以咨询第三方平台的客服。是的,换个地址就可以播放其他资源。我也就研究到了这个地步:smile:
  • starfox寒流:用原来的rtmp地址可以,用本地的rtmp地址就不行了。 并且本地视频推流测试成功的。。。
    lixuCoding:@starfox寒流 你试试推流本地视频到服务器,在看看能不能拉流
    starfox寒流:@App开发LiXu 确实是这样设置的 ,检查了半天。。。但是就是没╮(╯_╰)╭
    lixuCoding:@starfox寒流 保证手机与电脑在同一个网断,保证端口没被占用,建议用模拟器拉流,手机推流
  • 97b2fbdd1da5:屌爆了
  • cad229f4dad4:ERROR: PILI_RTMP_Connect0, failed to connect socket. 60 (Operation timed out) 一直连不上,在同一个局域网
    TigerNong:我也遇到这个问题,请问你是怎么解决的?
    starfox寒流:@ning50 解决没
  • 98d7f207bf2d:为什么自己写的画面显示是偏移90°,怎么设置成跟你项目中的那样?
    lixuCoding:@叶阳浩 videoConfiguration.videoSize = CGSizeMake(360, 640);设置没
    98d7f207bf2d:是我表达错了,是我在竖屏情况下,打开摄像头捕获到的画面是旋转了90°
    lixuCoding:@叶阳浩 你那是用的横屏录制,我文章里有提到,如何更改的
  • liyaoyao: 楼主,请问出现nginx: [emerg] bind() to 0.0.0.0:8080 failed (48: Address already in use) 这个问题怎么解决 ?我用killall -9 nginx 这个杀掉进程,但是提示没有找到,然后也没找到其他的占用8080端口 的进程
    lixuCoding:@liyaoyao 呃呃,我也遇到过,忘记咋搞的了,你就开一个设备连接电脑,别的都关掉,用模拟器拉流试试
    liyaoyao:@App开发LiXu 我试了然后打印的是jenkins的进程,然后我把这个kill掉之后再查就没有这个进程,我再启动nginx,依然提示8080被占,我再查看,发现jenkins那个进程又被打开了
    lixuCoding:@liyaoyao 用命令 lsof -i tcp:8080查看id,在 kill id
  • 2a392233fc62:地址换自己电脑的IP 但是输出 Connection refused 是什么原因?
    lixuCoding:@noaicooder 关掉所有nginx,再重启,
    lixuCoding:@noaicooder 你先确定是服务器集成出的问题,还是播放器的问题
  • 2a392233fc62:都是干货啊 :heart_eyes:
  • 帅气的华子:太棒了
  • 巴图鲁:膜拜
    lixuCoding:@巴图鲁 :stuck_out_tongue_winking_eye: 进这样的文章的您不是程序员?
    巴图鲁:@巴图鲁 😂我十分佩服程序员的
    Thebloodelves:@巴图鲁 厉害了我的哥 :fearful:
  • Flynn_Lee:楼主很棒
    lixuCoding:@Flynn_Lee 还在学习之路上摸索 :smile:
  • 码代码的李二狗:请问我设置了本地服务器之后如何检测成功推流到服务器呢,照着做的可是播放端无法访问,谢谢
    码代码的李二狗:@App开发LiXu 用LFLiveKit提供的地址也不能正常播放 我想弱弱的问一句 是直接播放推流的地址吗 stream.url??
    lixuCoding:@LJR三门外天晴 执行命令 ffmpeg -re -i /Users/lixu/Documents/Resouce/MP4/video.mp4 -vcodec libx264 -acodec aac -strict -2 -f flv rtmp://localhost:1935/rtmplive/room 这是推流本地视频到服务器,将本地视频路径换成你的任意一个视频路径,然后用VLC播放器打开rtmp://localhost:1935/rtmplive/room能播放证明本地服务器是安装成功的,那就考虑是集成出的问题了
    lixuCoding:@LJR三门外天晴 你推流拉流用LFLiveKit提供的地址能正常直播和播放吗
  • 2fcfe08c6c1f:不错哦
  • Zoros:收藏。明天仔细看看!:smile:

本文标题:一步步搭建视频直播系统,基于LFLiveKit+ijkplaye

本文链接:https://www.haomeiwen.com/subject/eokiyttx.html