超强教程:如何搭建一个 iOS 系统的视频直播 App?
现今,直播市场热火朝天,不少人喜欢在手机端安装各类直播 App,便于随时随地观看直播或者自己当主播。作为开发者来说,搭建一个稳定性强、延迟率低、可用性强的直播平台,需要考虑到部署视频源、搭建聊天室、优化界面等难题,具备一定的难度与挑战!
那假如自己搭建一个直播平台,该如何下手呢?莫慌,本文就给大家详细介绍如何搭建一个 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.rawValueplayer.view.autoresizingMask = UIViewAutoresizing(rawValue: autoresize)player.scalingMode = .aspectFit
player.shouldAutoplay = trueview.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)
(注意,这里我们将 view.addSubview
改成了 playerView.addSubview
并添加了 autolayout
。)
我们再次运行,发现播放窗口集中在 playerView 上了。(图11)
2.3.2 集成云巴 SDK
接下来,我们需要处理聊天室和弹幕需要的业务支撑。
在众多提供此类服务的第三方中,我们选择使用 云巴 的 SDK 。基于 MQTT,采用 Erlang/OTP 架构设计的云巴实时通信云服务,是一个 Pub/Sub 模型的双向实时系统,通过透明传输,可为直播平台实现所有的实时消息传输。
接着,我们来集成云巴的 SDK。
我们登录云巴的网站 https://yunba.io/ 进行注册并登录。(图12)
登录后,点击侧栏 “应用管理” ,再点击“创建应用”,填写应用名以及包名。(图13)
创建后,我们可以从 “应用列表”→“管理”→“应用详情” 内,看到该应用的 AppKey ,我们将它复制下来。
接下来,我们来集成云巴的 SDK,点击 下载。
我们将下载的 SDK 解压并添加到项目中,并添加相应的依赖库 (图14、图15)
在 appDelegate 的 application didFinishLaunchingWithOptions
中加入如下代码,并将 String!
替换成刚才复制的 AppKey :
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)
订阅相应的 Topic 来分别支持弹幕、喜欢、在线人数和用户名功能。
在发送按钮的 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)
我们再运行 Demo ,每当我们接收到一条消息的时候,就能在播放器中看到一条滚动的弹幕。
3 测试 Demo
当跑完上面所有的程序之后,我们来测试一下 Demo。
我们在底部文字栏内键入“ Hello Yunba~ ”,可以看到弹幕实时地在视频播放器内从右至左滚动显示。此外,界面内还可以实时显示 在线人数 和 点赞数 等,基本满足了聊天室的通用功能。
如果你想获取更多的信息,可点击 链接 进行查看。
超强教程:如何搭建一个 iOS 系统的视频直播 App?相关推荐
- 广州品向:开发一个类似斗鱼的视频直播app的成本
目前视频直播非常火爆,随着网红,傅园慧,张继科等等的明星加入了直播行业,使得视频直播app越来越受到大家的追捧,很多想进入该行业的创业者,都会咨询广州app定制开发公司品向科技做一个"视频直 ...
- 一招教你如何搭建一个秒杀系统
文章目录 1. 前言 2. 整体架构 3. 设计思路 4. 实现流程 4.1 mysql 4.2 redis 4.3 RocketMQ 4.4 代码 5. 测试 6. 总结 1. 前言 秒杀系统在电商 ...
- 流媒体视频服务:快速搭建一个简单的流媒体视频服务(一)
快速搭建一个简单的流媒体视频服务 前言 系统组成 RTMP协议简介 Red5 概述 Red5 服务器搭建 前言 最近自己在研究有关于流媒体播放的技术,网上资料甚少.出于开源精神以及在查阅资料得到各位大 ...
- 视频直播APP源码开发iOS音频播放流程
视频直播APP源码开发iOS音频播放流程 概览 随着移动互联网的发展,如今的手机早已不是打电话.发短信那么简单了,播放音乐.视频.录音.拍照等都是很常用的功能.在iOS中对于多媒体的支持是非常强大的, ...
- 视频直播app源码直播弹幕系统如何实现
视频直播app源码直播弹幕系统如何实现 直播弹幕指直播间的用户,礼物,评论,点赞等消息,是直播间交互的重要手段.美拍直播弹幕系统从 2015 年 11 月到现在,经过了三个阶段的演进,目前能支撑百万用 ...
- 基于声网 iOS SDK 实现视频直播应用
视频互动直播是当前比较热门的玩法,我们经常见到有PK 连麦.直播答题.一起 KTV.电商直播.互动大班课.视频相亲等.本文将演示如何通过声网视频 SDK 在 iOS 端实现一个视频直播应用.话不多说, ...
- 网络电视服务器是什么系统,网络视频直播系统
网络视频直播系统可以应客户的要求把活动现场的音频或视频信号经压缩后,传送到多媒体服务器上,在Internet上供广大网友或授权特定人群收听或收看. 现在网络直播系统分:直播软件或是硬件直播,硬件直播的 ...
- rola物联网框架_如何搭建一个物联网系统框架?
下面将谈到几个关键问题: 设备如何接入网络? 设备间如何通信? 物联网数据的用途? 如何搭建起一个物联网系统框架呢?它的技术架构又是怎么样呢? 物联网终端软件系统架构? 物联网云平台系统架构? 1.物 ...
- 一个iOS开发者业余开发自己APP的经验分享
14年12月,我发布了一款名为<老罗语录>的iOS客户端,到15年4月底,更新了三四个版本了,下载量已经快突破4000,下载量不多,但是自己收获的喜悦还是不少的.其实在我发布之前已经有几个 ...
最新文章
- Winform/WPF实例中的相互操作
- Hive的安装【完整版】
- 自学python从零开始学_新手学习python-从零开始学习
- java aspose重叠_Aspose.Words - 在特定位置合并两个文档
- 如何在while和for中使用ssh
- VB.NET工作笔记005---用visual studio2017 编写WCF vb.net webservice
- 使用EDD枚举域数据
- 仿微信,qq在短时间内接受多条消息只响一声
- Java Web开发实战经典(基础篇)
- Quartz 视频教程免费下载
- ftp服务器和共享文件夹权限设置,ftp服务器共享文件夹权限设置
- Jquery实现确定取消对话框
- 话说无为原理——数据分析漫谈6
- 近红外光谱基础知识—数据预处理
- (毕业设计资料)基于51单片机红外无线遥控智能家电控制系统设计
- 常见的麦克风供电方式总结(幻象供电)
- OpenHaptic环境搭建以及调试通例子程序过程中的参考(零零碎碎吧)
- 什么是静态资源服务器?
- html5 canvas 图片拼接,HTML5 canvas drawImage方法实现读取图片数据截图拼接图片。
- 代码之美——Doom3源代码赏析1
热门文章
- 疯狂iOS 讲义(上) Objective-C 2.0与iPhone/iPad应用开发基础
- mysql实体完整性实现方法_MySQL数据库——数据完整性(实体完整性、域完整性、参照完整性)...
- 解决系统缺少api-ms-win-core-rtlsupport-l1-1-0.dll文件问题
- 【华人学者风采】兰艳艳 中国科学院
- 零基础html学习-完结
- CentOS 安装 MongoDB 客户端(命令行shell)
- flash as 基本应用
- 美的微晶冰箱#万物皆可微晶#开箱生活节,跨界玩转高端生活
- 提升宝宝智力的方法和惩罚宝宝的科学方法
- VHDL实现按键消抖