【如何快速的开发一个完整的iOS直播app】(播放篇)

逃离我推掉我的手 2022-06-16 13:36 176阅读 0赞

效果

直播.gif

一、基本知识

README.md文件：框架的描述文件，描述这个框架怎么使用

编译语言:程序在被执行之前，需要一个专门的编译过程，把程序编译成为机器语言的文件，运行时不需要翻译，所以编译型语言的程序执行效率高，比如OC,C,C++

解释性语言:解释性语言的程序不需要编译，在运行程序的时候才翻译，每个语句都是执行的时候才翻译。这样解释性语言每执行一次就需要逐行翻译一次，效率比较低

解释性语言执行和编译语言执行的区别：

解释性语言一行一行的解析，如果有错误，就不会执行，直接执行下一行。

编译语言，只要有错，就不能编译，一行都不能执行。

脚本语言:属于解析语言，必须通过解释器解析，将其一条条的翻译成机器可识别的指令，并按程序顺序执行。

python：脚本语言，适合网络应用程序的开发，有利于开发效率，现在显得越来越强大

PHP：服务器端脚本语言，适合做动态网站

JS：作为客户端的脚本语言，在浏览中解释执行，

shell：操作系统脚本语言，一般指Unix/Linux中使用的命令行

编译语言，执行文件是二进制。脚本语言是解释执行的，执行文件是文本

shell解释器:shell是一个命令行解释器，相当于windows的cmd,处于内核和用户之间，负责把用户的指令传递给内核并且把执行结果回显给用户.

默认Unix都有shell,OS基于Unix,因此OS自带shell。

bash: bash是一种shell解释器版本，shell有很多种版本，就像人，也分不同国家的人。

牛程序员看到不爽的Shell解释器，就会自己重新写一套，慢慢形成了一些标准，常用的Shell解释器有这么几种，sh、bash、csh等

shell:通常我们说的shell,指的是shell脚本语言，而不是shell解释器。

在编写shell时，第一行一定要指明系统需要哪种shell解释器解释你的shell脚本，如：\#! /bin/bash，使用bash解析脚本语言

什么时候使用shell命令，比如有些系统命令经常需要用到，可以把命令封装到一个脚本文件，以后就不用再敲一遍了，直接执行脚本语言。

比如ijkplayer,就用脚本文件下载ffmpeg,因为下载ffmpeg需要执行很多命令，全部封装到脚本文件中。

在导入一些第三方框架的时候，经常需要用到一些命令，所以一般都会封装到一个脚本文件中，以后只要执行脚本，就会自动执行集成第三方框架的命令。

sh:sheel脚本文件后缀名

二、下载ijkPlayer

去到B站得github主页，找到ijkplayer项目，下载源码[ijkplayer下载地址][ijkplayer]

打开Demo，查看用法，一般学习第三方库，都是先查看Demo

![1240][]

Snip20160825\_4.png

三、编译ijkPlayer的步骤

1、找到ijkPlayerMediaDemo并运行

提示'libavformat/avformat.h' file not found

![1240 1][]

bug1.png

原因：因为libavformat是ffmpeg中的库，而ijkplayer是基于ffmpeg这个库的，因此需要导入ffmpeg

解决：查看ijkplayer的README.md，一般都会有说明。

![1240 2][]

执行脚本.png

init-ios.sh脚本的作用：下载ffmpeg源码

想了解脚本具体怎么做的，可以查看之前写的文章[带你走进脚本世界，ijkplayer之【init-ios.sh】脚本分析][ijkplayer_init-ios.sh]，全面剖析了init-ios.sh这个脚本做了哪些事情。

如何执行init-ios.sh脚本文件

步骤一：找到init-ios.sh脚本文件

![1240 3][]

找到init-ios.sh文件.png

步骤二：打开终端，cd进入到ijkplayer-master的目录中

![1240 4][]

进入init-ios.sh目录.png

注意是 cd 这个文件夹

![1240 5][]

cd ijkplayer-master.png

步骤三：输入./init-ios.sh，就会执行当前脚本了。

![1240 6][]

执行init-ios.sh.png

执行完脚本后，就会发现ijkplayer中有ffmpeg了

![1240 7][]

执行脚本后.png

2、下载好ffmpeg源码后，再次运行Demo

发现还是报'libavformat/avformat.h' file not found错误

原因:执行init-ios.sh，仅仅是下载源码，但是源码并没有参与编译，需要把源码编译成.a文件

Demo依赖于IJKMediaPlayer库

![1240 8][]

Demo源码.png

打开 IJKMediaPlayer库，查看下源码

![1240 9][]

IJKMediaPlayer工程位置.png

打开 IJKMediaPlayer库

![1240 10][]

IJKMediaPlayer源码.png

右击，发现FFMPEG中的库都是红的，表示不存在

![1240 11][]

Snip20160829\_23.png

解决:查看ijkplayer的README.md

![1240 12][]

编译ffmpeg.png

编译ffmpeg库

步骤一：进入到脚本文件的目录下

![1240 13][]

cd ios.png

步骤二：执行./compile-ffmpeg.sh clean

步骤二功能：删除一些文件和文件夹，为编译ffmpeg.sh做准备，在编译ffmpeg.sh的时候，会自动创建刚刚删除的那些文件，为避免文件名冲突，因此在编译ffmpeg.sh之前先删除等会会自动创建的文件夹或者文件

![1240 14][]

Snip20160828\_19.png

步骤三：执行./compile-ffmpeg.sh all,真正的编译各个平台的ffmpeg库，并生成所以平台的通用库.

![1240 15][]

执行./compile-ffmpeg.sh all

执行compile-ffmpeg.sh all前

![1240 16][]

编译前.png

执行compile-ffmpeg.sh all后

![1240 17][]

编译后.png

3.再次运行Demo,就能成功了,因为IJKMediaPlayer库获取到ffmpeg库了

编译完ffmpeg后，IJKMediaPlayer库中显示

![1240 18][]

成功获取到ffmpeg库.png

cmd+r,Demo运行成功

![1240 19][]

Demo运行成功.png

四、如何集成到ijkplayer到自己的项目中

注意：ijkplayer的README中的方法比较麻烦，不方便携带，不推荐。

![1240 20][]

Snip20160830\_9.png

1.推荐自己把IJKMediaPlayer打包成静态库,在导入到自己的项目中。

如何打包，请参考，[iOS中集成ijkplayer视频直播框架][iOS_ijkplayer]，写的非常不错，就不一一详细介绍了,但是只有发布版本的库。

我自己打包了ijkplayer两个版本库，分别用于调试和发布(DEBUG和Release),[点击下载][Link 1]

由于文件太大上传不了GitHUb,就上传到百度云了

2.直接把ijkplayer库拖入到自己的工程中，

调试的话，拖入调试版本的ijkplayer库，发布的话，拖入发布版本的ijkplayer库

![1240 21][]

Snip20160829\_5.png

3.导入ijkplayer依赖的库，具体可以查看ijkplayer的README

![1240 22][]

Snip20160829\_6.png

![1240 23][]

Snip20160829\_7.png

五、使用ijkplayer直播

1.ijkplayer用法简介

ijkplayer用法比较简单，其实只要有直播地址，就能直播了

注意：最好真机测试，模拟器测试比较卡,不流畅，真机就没有问题了

2.抓取数据

抓了很多直播app的数据，发现映客主播的质量是最高的。

映客主播url:[http://116.211.167.106/api/live/aggregation?uid=133825214&interest=1][http_116.211.167.106_api_live_aggregation_uid_133825214_interest_1]

uid=账号ID，这里是我的账号ID

interest=兴趣 ，1表示只查看女生，哈哈

上下拉刷新的接口没抓到，就一下加载200条数据，哈哈

\- (void)loadData\{

// 映客数据

urlNSString\*urlStr =@"http://116.211.167.106/api/live/aggregation?uid=133825214&interest=1";

// 请求数据

AFHTTPSessionManager \*mgr = \[AFHTTPSessionManager manager\];

mgr.responseSerializer = \[AFJSONResponseSerializer serializer\];    mgr.responseSerializer.acceptableContentTypes = \[NSSetsetWithObjects:@"text/plain",nil\];

\[mgr GET:urlStr parameters:nilprogress:nilsuccess:^(NSURLSessionDataTask\* \_Nonnull task,NSDictionary\* \_Nullable responseObject) \{

\_lives = \[YZLiveItem mj\_objectArrayWithKeyValuesArray:responseObject\[@"lives"\]\];

\[\_tableView reloadData\];

\} failure:^(NSURLSessionDataTask\* \_Nullable task,NSError\* \_Nonnull error) \{

NSLog(@"%@",error);

\}\];

3.获取拉流url,直播

IJKFFMoviePlayerController：用来做直播的类

\- (void)viewDidLoad \{

\[superviewDidLoad\];self.view.backgroundColor = \[UIColorwhiteColor\];

// 设置直播占位图片

NSURL\*imageUrl = \[NSURLURLWithString:\[NSStringstringWithFormat:@"http://img.meelive.cn/%@",\_live.creator.portrait\]\];

\[self.imageView sd\_setImageWithURL:imageUrl placeholderImage:nil\];

// 拉流地址

NSURL\*url = \[NSURLURLWithString:\_live.stream\_addr\];

// 创建IJKFFMoviePlayerController：专门用来直播，传入拉流地址就好了

IJKFFMoviePlayerController \*playerVc = \[\[IJKFFMoviePlayerController alloc\] initWithContentURL:url withOptions:nil\];

// 准备播放\[playerVc prepareToPlay\];

// 强引用，反正被销毁

\_player = playerVc;

playerVc.view.frame = \[UIScreenmainScreen\].bounds;

\[self.view insertSubview:playerVc.view atIndex:1\];\}

4.结束播放

界面不播放，一定要记得结束播放，否则会报内存溢出

![1240 24][]

内存bug.png

\-(void)viewWillDisappear:(BOOL)animated\{\[super viewWillDisappear:animated\];// 界面消失，一定要记得停止播放\[\_player pause\];\[\_player stop\];\}

结束语

后续还会更新更多有关直播的资料，希望做到教会每一个朋友从零开始做一款直播app，并且Demo也会慢慢完善.

Demo[点击下载][Link 2]

由于FFMPEG库比较大，大概100M。

本来想自己上传所有代码了，上传了1个小时，还没成功，就放弃了。

提供另外一种方案，需要你们自己导入IJKPlayer库

具体步骤：

下载Demo后，打开YZLiveApp.xcworkspace问题

![1240 25][]

打开YZLiveApp.xcworkspace问题

pod install就能解决

![1240 26][]

Snip20160830\_12.png

下载jkplayer库，[点击下载][Link 1]

把jkplayer直接拖入到与Classes同一级目录下，直接运行程序，就能成功了

![1240 27][]

拖入ijkplayer到与Classes同一级目录下.png

注意不需要打开工程，把jkplayer拖入到工程中，而是直接把jkplayer库拷贝到与Classes同一级目录下就可以了。

错误示范:不要向下面这样操作

![1240 28][]

Snip20160830\_14.png

[ijkplayer]: https://github.com/Bilibili/ijkplayer
[1240]: /images/20220616/71caa24b441a4cee94b6996ed4d4ca94.png
[1240 1]: /images/20220616/03d4a20f77b043adbac7dcb1266b8e8e.png
[1240 2]: /images/20220616/34bb72eb8a5245d28e401b7be9ba011d.png
[ijkplayer_init-ios.sh]: http://www.jianshu.com/p/9b0887596826
[1240 3]: /images/20220616/7b5670adf6124d8c945eafe307b1017e.png
[1240 4]: /images/20220616/8fbc4425964640ef92ed8e0d58de3013.png
[1240 5]: /images/20220616/ad3795d3453744c78c255eb089b0d8b2.png
[1240 6]: /images/20220616/b43fbf76e6284add9254d4266018bc08.png
[1240 7]: /images/20220616/f276f1192fb0401b99f3be62a2e8b31c.png
[1240 8]: /images/20220616/b36fda8ce34a43b394c44ccee7df1bfb.png
[1240 9]: /images/20220616/6d27e0dd0a0c4f75b7d5f41880cf3d3a.png
[1240 10]: /images/20220616/4f858f7103944ef8b8cebdb5441e93a7.png
[1240 11]: /images/20220616/c90631199e2c463f9598247bba5c30ee.png
[1240 12]: /images/20220616/88dc5f9c4734480eadf7f6cb0a7e7b3a.png
[1240 13]: /images/20220616/5c5264e6d3ee480db4ea2c8bb7a2b562.png
[1240 14]: /images/20220616/6d761f971fc44586a230643b8e6d1f1c.png
[1240 15]: /images/20220616/307ce1ef684945c58645cf188628321b.png
[1240 16]: /images/20220616/b69991f9e09f44478d8d72366be16917.png
[1240 17]: /images/20220616/4813029c9f4a4002b74079afe17282b7.png
[1240 18]: /images/20220616/7c0ae2acbf054a3684bc94e477ae3820.png
[1240 19]: /images/20220616/783b408a2fc7438e88c6fa7dae4abe4f.png
[1240 20]: /images/20220616/478e9b0cd5c642ae89869fa4d91f8868.png
[iOS_ijkplayer]: http://www.jianshu.com/p/1f06b27b3ac0
[Link 1]: https://pan.baidu.com/s/1skOF5DV
[1240 21]: /images/20220616/d5359acdb0c74b319ce490007200d523.png
[1240 22]: /images/20220616/e744cc62885b4c70b9c788cfce06c8f0.png
[1240 23]: /images/20220616/c291d8fd9cf3457fbe55cfa300799d41.png
[http_116.211.167.106_api_live_aggregation_uid_133825214_interest_1]: http://116.211.167.106/api/live/aggregation?uid=133825214&interest=1
[1240 24]: /images/20220616/65521e09ef044dc8b98e5f0cbd1455c9.png
[Link 2]: https://github.com/iThinkerYZ/YZLiveAppDemo.git
[1240 25]: /images/20220616/0a62a14a35194e9f8a2e19744deb7bac.png
[1240 26]: /images/20220616/f28bf486306247698fabf43374b1eab6.png
[1240 27]: /images/20220616/d1dad1d268a741ba8d6a8d1a134bd201.png
[1240 28]: /images/20220616/08acb05868e54882a404995cd462683e.png