关键词:
那假如自己搭建一个直播平台,该如何下手呢?莫慌,本文就给大家详细介绍如何搭建一个 iOS 系统的直播 App?
1 流程熟悉
1.1 选择协议
想要实现直播 App ,我们得先知道如何播放从服务器传来的视频数据。
目前,主流视频直播网站使用的协议多为 RTMP(Real Time Messaging Protocol) 和 HLS(HTTP Live Streaming) 。因为 RTMP 延迟较低,更适合用来作直播的协议,而 HLS 则更适合点播。
这里我们就使用 RTMP 来做一个直播 App。
1.2 步骤
搭建一个直播 App ,只需要 5 个步骤:
-
-
集成 ijkplayer
-
搭建 UI
-
集成云巴 SDK
-
横屏实现弹幕
2 流程实现
2.1 部署视频源
现在,市面上有非常多提供视频源的第三方服务,这里我们选择了 阿里云音视频解决方案。具体的部署过程可以参考 阿里云的文档 ,这里不细说,文档讲得很清楚。
部署完后,我们就拿到了视频源地址:"rtmp://live.lettuceroot.com/yunba/live-demo"。
2.2 集成 ijkplayer
2.2.1 集成
部署完视频后,我们继续接下来的操作。
因为 iOS 自带的 AVplayer 不支持 rtmp 格式的视频流播放,所以我们需要使用第三方库。
GitHub 中开源又常见的 rtmp 流播放器中,较为成熟的是 bilibili 开源的 ijkplayer。
它基于 ffmpeg,支持 Android 和 iOS,视频流和本地视频的播放都很强大。这里我们讲怎么集成 ijkplayer 来播放 rtmp 视频流。
为了方便开发者集成,我们已经将 ijkplayer 工程编译成了 framework 并放在了 云盘(密码:rb9q)内。
我们将下载好的 framework 文件拖入我们的 project 中,然后在 (图1)
中往下翻,点 Linked Frameworks and libraries 中按 + 号(图2)
添加下面这些依赖库(图3)
我们的集成就完成了。
2.2.2 代码
我们在 ViewController 中加上代码:
var player: IJKFFMoviePlayerController!
接下来,我们在 ViewController 的 viewDidLoad 中添加如下代码:
let options = IJKFFOptions.byDefault() let url = URL(string: "rtmp://live.lettuceroot.com/yunba/live-demo") player = IJKFFMoviePlayerController(contentURL: url, with: options) let autoresize = UIViewAutoresizing.flexibleWidth.rawValue | UIViewAutoresizing.flexibleHeight.rawValue player.view.autoresizingMask = UIViewAutoresizing(rawValue: autoresize) player.scalingMode = .aspectFit player.shouldAutoplay = true view.autoresizesSubviews = true view.addSubview(player.view)
最后再在 viewWillAppear 中添加:
player.prepareToPlay()
我们运行模拟器,就可以看到视频了。(图4)
因为代码中已经添加了屏幕适应,当我们旋转模拟器时,就能看到视频自动地适应了屏幕。
2.3 构建聊天室
2.3.1 搭建 UI
当然,这里只有视频是不够的,我们还需要弹幕。
竖屏状态下,因为视频以 16:9 的比例适应屏幕,没有足够的空间显示弹幕,所以我们做了一个类似聊天室的页面。
我们以播放视频的 View 举例,搭建一个直播 UI。我们打开 main.storyboard 。
我们先将一个 View 放在 Controller 的上边,设置背景为黑色。 (图5、图6)
按住 shift 右键拖拽到父 View ,添加如下约束,点击 Add Constraints。 (图7)
接着我们将比例设置成 16:9 ,设置高度为长度 × 9 / 16 并勾选 Aspect Ratio,点击 Add Constraints。(图8)
然后通过右键拖拽的方式添加 outlet 到 ViewController。 (图9)
同理,可搭建界面的其他元素,最终我们得到类似下面的界面。(图10)
我们再次运行,发现播放窗口集中在 playerView 上了。(图11)
2.3.2 集成云巴 SDK
接下来,我们需要处理聊天室和弹幕需要的业务支撑。
在众多提供此类服务的第三方中,我们选择使用 云巴 的 SDK 。基于 MQTT,采用 Erlang/OTP 架构设计的云巴实时通信云服务,是一个 Pub/Sub 模型的双向实时系统,通过透明传输,可为直播平台实现所有的实时消息传输。
接着,我们来集成云巴的 SDK。
我们登录云巴的网站 https://yunba.io/ 进行注册并登录。(图12)
登录后,点击侧栏 “应用管理” ,再点击“创建应用”,填写应用名以及包名。(图13)
接下来,我们来集成云巴的 SDK,点击 下载。
我们将下载的 SDK 解压并添加到项目中,并添加相应的依赖库 (图14、图15)
YunBaService.setup(withAppkey: String!)
2.3.3 代码
我们先定义 3 个 Topic(频道),用来实现 3 个不同功能,分别是 topicBullet , topicStat , topicLike 。
再添加一个方法来让云巴 SDK 给我们发送通知:
@objc func onMessageReceived(notification: Notification) { if let message = notification.object as? YBMessage { switch message.topic { case topicBullet: //接收到弹幕,更新 table case topicStat: //此处更新 在线人数 case topicLike: //此处更新 喜欢 default: break } } }
然后再在 viewDidLoad 中添加如下代码:
YunBaService.subscribe(topicBullet, resultBlock: nil) YunBaService.subscribe(topicLike, resultBlock: nil) YunBaService.subscribe(topicStat, resultBlock: nil) NotificationCenter.default.addObserver( self, selector: #selector(ViewController.onMessageReceived(notification:)), name: NSNotification.Name.ybDidReceiveMessage, object: nil )
在发送按钮的 outlet 中,我们加入如下代码:( data 为弹幕相应的 model ,比如信息、颜色等;你可以根据你的具体需要设置 data ,故这里留白。)
YunBaService.publish(topicBullet, data: data, resultBlock: nil)
非常简单的几个步骤,我们就实现了需要的业务功能。
2.3.4 横屏实现弹幕
接下来,我们来实现横屏状态下的弹幕。
我们选用 BarrageRenderer 这个第三方库来进行弹幕相关的操作。
这个库是由 unash 所写的一个弹幕渲染引擎,相比其他弹幕库更为好用,因此我们选用该第三方库。
这是一个 iOS 使用弹幕的第三方库,使用较为简单,支持四个方向。
同样地,为了方便开发者集成,我们已经将 BarrageRenderer 编译后的文件上传到了 云盘(密码:rb9q)内。
我们将下载到的 BarrageRenderer 拖入项目中。(图16)
接着我们在 ViewController 中添加代码:
var renderer = BarrageRenderer()
然后再在 viewVillAppear 中添加代码:
playerView.addSubview(renderer.view)
renderer.start()
接着就是定义弹幕了,我们在上文中接收到弹幕,更新 Table 的部分,加上如下代码:
let descriptor = BarrageDescriptor() descriptor.spriteName = NSStringFromClass(BarrageWalkTextSprite.self) descriptor.params["text"] = //弹幕内容 descriptor.params["textColor"] = //弹幕颜色 descriptor.params["side"] = BarrageWalkSide.default.rawValue descriptor.params["direction"] = BarrageWalkDirection.R2L.rawValue renderer.receive(descriptor)
3 测试 Demo
当跑完上面所有的程序之后,我们来测试一下 Demo。
如果你想获取更多的信息,可点击 链接 进行查看。
如何快速的开发一个完整的ios直播app(原理篇)
前言 大半年没写博客了,但我一直关注着互联网的动向,最近会研究很多东西,并分享,今年移动直播行业的兴起,诞生了一大批网红,甚至明星也开始直播了,因此不得不跟上时代的步伐,由于第一次接触的原因,因此花... 查看详情
如何快速的开发一个完整的ios直播app(原理篇)
一、个人见解(直播难与易)直播难:个人认为要想把直播从零开始做出来,绝对是牛逼中的牛逼,大牛中的大牛,因为直播中运用到的技术难点非常之多,视频/音频处理,图形处理,视频/音频压缩,CDN分发,即时通讯等技术... 查看详情
如何快速的开发一个完整的ios直播app(原理篇)
前言大半年没写博客了,但我一直关注着互联网的动向,最近会研究很多东西,并分享,今年移动直播行业的兴起,诞生了一大批网红,甚至明星也开始直播了,因此不得不跟上时代的步伐,由于第一次接触的原因,因此花了很... 查看详情
如何搭建一个完整的手机直播系统源码?
首先第一步,采集,iOS是比较简单的,Android则要做些机型适配工作,PC最麻烦各种奇葩摄像头驱动,出了问题特别不好处理,建议放弃PC只支持手机主播,目前几个新进的直播平台都是这样的。第二部,前处理,现在直播美颜已... 查看详情
如何快速的开发一个完整的ios直播app(原理篇)
目录【如何快速的开发一个完整的iOS直播app】(原理篇)【如何快速的开发一个完整的iOS直播app】(播放篇)【如何快速的开发一个完整的iOS直播app】(采集篇)【如何快速的开发一个完整的iOS直播app】(美颜篇)前言大半年没写博客了,... 查看详情
如何快速的开发一个完整的ios直播app(原理篇)
压缩前的每秒数据量:帧率X分辨率(单位应该是若干个字节)压缩比:压缩前的每秒数据量/码率(对于同一个视频源并采用同一种视频编码算法,则:压缩比越高,画面质量越差。) 视频文件格式:文件的后缀,比如.wmv,.mov,.mp4,.mp... 查看详情
手机直播源码:手机直播平台如何搭建?
第一步:分解手机直播系统开发功能,了解你所需要的直播功能第二步:寻找合适的云服务SDK进行嵌入,在APICloud的聚合API中可以轻易找到以上的功能模块,挑选合适的模块封装到自己的App中第三步:App框架搭建,在APICloudStudio中... 查看详情
镜播无人直播带货教程,手把手教你如何搭建直播间
镜播无人直播带货新手教程,手把手教你如何搭建直播间如果你一个人在家里面直播,没有直播中控来辅助你一个情况下怎么办?来教你一个什么叫做镜播。用镜子来做一个直播的辅助。在你的面前放一面镜子,下面... 查看详情
如何快速的开发一个完整的ios直播app(播放篇)
...看这篇之前,如果您还不了解直播原理,请查看上篇文章如何快速的开发一个完整的iOS直播app(原理篇)开发一款直播app,集成ijkplayer成功后,就算完成直播功能一半的工程了,只要有拉流url,就能播放直播啦本篇主要讲解的是直... 查看详情
ios10中如何搭建一个语音转文字框架
...的语音识别框架,但是它们要么太贵要么不好。在今天的教程里面,我会教你怎样创建一个使用SpeechKit来进行语音转文字的类似Siri的app。设计AppUI前提:你需要Xcode8beta版本和一个运行iO 查看详情
干货零基础30分钟让你拥有一个完整属于自己的短视频app系统
...nbsp;目录一、附言: 1二、购买域名和购买服务器: 2三、搭建服务器环境: 5四、配置APP前端部分: 81.工具以及文件准备: 92.配置后端接口地址 113.配置APP启动图和启动图标 12五、搭建APP后端部分 13步骤,一步步输入并且回车。... 查看详情
通过直播系统源码如何搭建手机直播平台!
打造一个属于自己的直播系统平台,同时在线观看人数10W人,直播效果流畅清晰不能卡顿。需要准备哪些前期的工作?技术的门槛有多高?资金需要多少?小编给大家普及下经验希望能帮助到创业者和从业者们!搭建直播平台,... 查看详情
直播短视频带货完美运营app源码购物直播交友系统源码
...体搭建研究,源码附带安卓跟苹果APP源码,没有教程跟安装文档,没技术得就别看了无售后,需要自行研究,大概看了下好像是云豹二开得版本。软件简介介绍:直播带货APP系统源码完全开源后端安卓iOS三... 查看详情
如何用java搭建一个直播小程序系统
...ubo.cn)在宽带支持的前提下,支持几百人是不成问题的,如何做到的呢?1.nginx-rtmpmodule的安装和使用2.obs进行推流3.websocket弹幕,推送- 查看详情
直播源码如何搭建一个属于自己的直播平台?
现在直播非常火爆,可以从PC或手机直播,然后从PC或是手机或是支持HTML5的浏览器收看。但是,你知道直播平台后面的技术和实现原理码?正好去年过年的时候,一个朋友破解了AirPlay和Chromecast协议,然后开发了一套技术能够截... 查看详情
如何快速的开发一个完整的ios直播app(采集篇)
效果为了采集效果图,我也是豁出去了,请忽略人物,关注技术。忽略本人.png基本知识介绍AVFoundation:音视频数据采集需要用AVFoundation框架.AVCaptureDevice:硬件设备,包括麦克风、摄像头,通过该对象可以设置物理设备的一些属性... 查看详情
djimobilesdk新教程
DJIMobileSDK新教程发布!http://bbs.dji.com/thread-20282-1-1.htmlAndroid如何创建一个航拍相机App:你将学到如何配置DJIMobileSDK的iOS开发环境,如何展示相机的FPV画面,如何进行拍照和录像操作;创建照片和视频回放App: 你将会学到如何... 查看详情
ios国际化最新最全教程+如何快速国际化一个现成app
...toryboard的情况下快速实现国际化。这里应同学请求写下此教程。反正国际化的步骤都要搞一遍,干脆写一个详细、全面的教程。一、配置国际化语言点击progect->info->localizations下的‘+’,选择你要支持的语言,默认支持英文... 查看详情