超強教程：如何搭建一個 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 個步驟：

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 的上邊，設置背景為黑色。 （圖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~ ”，可以看到彈幕實時地在視頻播放器內從右至左滾動顯示。此外，界面內還可以實時顯示 在線人數 和 點贊數 等，基本滿足了聊天室的通用功能。

如果你想獲取更多的信息，可點擊 鏈接 進行查看。