超強教程：如何搭建一個 iOS 系統的視頻直播 App？

1 流程熟悉

1.1 選擇協議

想要實現直播 App ，咱們得先知道如何播放從服務器傳來的視頻數據。

目前，主流視頻直播網站使用的協議多爲 RTMP(Real Time Messaging Protocol) 和 HLS(HTTP Live Streaming) 。由於 RTMP 延遲較低，更適合用來做直播的協議，而 HLS 則更適合點播。

這裏咱們就使用 RTMP 來作一個直播 App。

1.2 步驟

搭建一個直播 App ，只須要 5 個步驟：

1. 部署視頻源

2. 集成 ijkplayer

3. 搭建 UI

4. 集成雲巴 SDK

5. 橫屏實現彈幕

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 的上邊，設置背景爲黑色。 （圖五、圖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 解壓並添加到項目中，並添加相應的依賴庫 （圖1四、圖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~ 」，能夠看到彈幕實時地在視頻播放器內從右至左滾動顯示。此外，界面內還能夠實時顯示 在線人數 和 點贊數 等，基本知足了聊天室的通用功能。

若是你想獲取更多的信息，可點擊 連接 進行查看。