給我一個支點教你iOS搭建完整直播源碼APP系統

獨闢蹊徑教您如何利用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 個步驟：

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 部署視頻源 集成 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）

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 中往下翻，點 Linked Frameworks and libraries 中按 + 號（圖2）

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 添加下面這些依賴庫（圖3）

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 咱們的集成就完成了。

2.2.2 代碼

咱們在 ViewController 中加上代碼：

var player: IJKFFMoviePlayerController! 接下來，咱們在 ViewController 的 viewDidLoad 中添加以下代碼：

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 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) 獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 最後再在 viewWillAppear 中添加：

player.prepareToPlay()

咱們運行模擬器，就能夠看到視頻了。（圖4）

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 由於代碼中已經添加了屏幕適應，當咱們旋轉模擬器時，就能看到視頻自動地適應了屏幕。

2.3 構建聊天室

2.3.1 搭建 UI

固然，這裏只有視頻是不夠的，咱們還須要彈幕。

豎屏狀態下，由於視頻以 16:9 的比例適應屏幕，沒有足夠的空間顯示彈幕，因此咱們作了一個相似聊天室的頁面。

咱們以播放視頻的 View 舉例，搭建一個直播 UI。咱們打開 main.storyboard 。

咱們先將一個 View 放在 Controller 的上邊，設置背景爲黑色。 （圖五、圖6）

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 按住 shift 右鍵拖拽到父 View ，添加以下約束，點擊 Add Constraints。 （圖7）

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 接着咱們將比例設置成 16:9 ，設置高度爲長度 × 9 / 16 並勾選 Aspect Ratio，點擊 Add Constraints。（圖8）

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 而後經過右鍵拖拽的方式添加 outlet 到 ViewController。 （圖9）

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 同理，可搭建界面的其餘元素，最終咱們獲得相似下面的界面。（圖10）

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 （注意，這裏咱們將 view.addSubview 改爲了 playerView.addSubview 並添加了 autolayout 。）

咱們再次運行，發現播放窗口集中在 playerView 上了。（圖11）

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 2.3.2 集成雲巴 SDK

接下來，咱們須要處理聊天室和彈幕須要的業務支撐。

在衆多提供此類服務的第三方中，咱們選擇使用 雲巴 的 SDK 。基於 MQTT，採用 Erlang/OTP 架構設計的雲巴實時通訊雲服務，是一個 Pub/Sub 模型的雙向實時系統，經過透明傳輸，可爲直播平臺實現全部的實時消息傳輸。

接着，咱們來集成雲巴的 SDK。

咱們登陸雲巴的網站 yunba.io/ 進行註冊並登陸。（圖12）

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 登陸後，點擊側欄 「應用管理」 ，再點擊「建立應用」，填寫應用名以及包名。（圖13）

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 建立後，咱們能夠從 「應用列表」→「管理」→「應用詳情」 內，看到該應用的 AppKey ，咱們將它複製下來。

接下來，咱們來集成雲巴的 SDK，點擊 下載。

咱們將下載的 SDK 解壓並添加到項目中，並添加相應的依賴庫 （圖1四、圖15）

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 在 appDelegate 的 application didFinishLaunchingWithOptions 中加入以下代碼，並將 String! 替換成剛纔複製的 AppKey ：

YunBaService.setup(withAppkey: String!) 集成就完成了。

2.3.3 代碼

咱們先定義 3 個 Topic（頻道），用來實現 3 個不一樣功能，分別是 topicBullet ， topicStat ， topicLike 。

再添加一個方法來讓雲巴 SDK 給咱們發送通知：

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 @objc func onMessageReceived(notification: Notification) { if let message = notification.object as? YBMessage { switch message.topic { case topicBullet: //接收到彈幕，更新 table case topicStat: //此處更新 在線人數 case topicLike: //此處更新 喜歡 default: break } } } 獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 而後再在 viewDidLoad 中添加以下代碼：

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 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 ) 獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 訂閱相應的 Topic 來分別支持彈幕、喜歡、在線人數和用戶名功能。

在發送按鈕的 outlet 中，咱們加入以下代碼：（ data 爲彈幕相應的 model ，好比信息、顏色等；你能夠根據你的具體須要設置 data ，故這裏留白。）

YunBaService.publish(topicBullet, data: data, resultBlock: nil) 來向雲巴的服務器發送消息。

很是簡單的幾個步驟，咱們就實現了須要的業務功能。

2.3.4 橫屏實現彈幕

接下來，咱們來實現橫屏狀態下的彈幕。

咱們選用 BarrageRenderer 這個第三方庫來進行彈幕相關的操做。

這個庫是由 unash 所寫的一個彈幕渲染引擎，相比其餘彈幕庫更爲好用，所以咱們選用該第三方庫。

這是一個 iOS 使用彈幕的第三方庫，使用較爲簡單，支持四個方向。

一樣地，爲了方便開發者集成，咱們已經將 BarrageRenderer 編譯後的文件上傳到了 雲盤（密碼：rb9q）內。

咱們將下載到的 BarrageRenderer 拖入項目中。（圖16）

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 接着咱們在 ViewController 中添加代碼：

var renderer = BarrageRenderer() 而後再在 viewVillAppear 中添加代碼：

playerView.addSubview(renderer.view) renderer.start() 接着就是定義彈幕了，咱們在上文中接收到彈幕，更新 Table 的部分，加上以下代碼：

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 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) 獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 咱們再運行 Demo ，每當咱們接收到一條消息的時候，就能在播放器中看到一條滾動的彈幕。

3 測試 Demo

當跑完上面全部的程序以後，咱們來測試一下 Demo。

獨闢蹊徑教您如何利用iOS搭建直播APP系統教程 咱們在底部文字欄內鍵入「 Hello Yunba~ 」，能夠看到彈幕實時地在視頻播放器內從右至左滾動顯示。此外，界面內還能夠實時顯示 在線人數 和 點贊數 等，基本知足了聊天室的通用功能。

布穀直播科技搭建15725389755（同微）複製代碼