一步步搭建视频直播系统,基于LFLiveKit+ijkplayer+rtmp(iOS端)

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

  • 推流: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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容

  • 一.简述总体内容 1.直播流程介绍 2.Mac搭建nginx+rtmp服务器(模拟推流拉流) 3.简单的集成推流拉...
    IIronMan阅读 7,628评论 10 64
  • 最近学习的总结!首先来介绍下简单的推流.iOS 直播 —— 推流推流,就是将采集到的音频,视频数据通过流媒体协议发...
    HotRay阅读 816评论 0 4
  • 摘抄:快速集成iOS基于RTMP的视频推流摘抄:iOS中集成ijkplayer视频直播框架 Mac搭建nginx+...
    NJ_墨阅读 581评论 0 1
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,431评论 25 707
  • *推流,就是将采集到的音频,视频数据通过流媒体协议发送到流媒体服务器。*推流前的工作:采集,处理,编码压缩*推流中...
    贝勒老爷阅读 1,373评论 3 23