Nowadays, the live broadcast market is in full swing. Many people like to install various live broadcast apps on their mobile phones, so that they can watch live broadcast anytime and anywhere or act as anchors themselves. As a developer, to build a live streaming platform with strong stability, low latency rate and high availability, we need to take into account the deployment of video sources, setting up chat rooms, interface optimization and other difficulties, which have certain difficulties and challenges!

That if oneself build a live broadcast platform, how should start? Don’t panic, this article will give you a detailed introduction to how to build an iOS system of live App?

1 Process Familiarity

1.1 Selecting a Protocol

In order to realize the live streaming App, we need to know how to play the video data from the server.

At present, the protocols used by mainstream Live video Streaming websites are mostly RTMP(Real Time Messaging Protocol) and HLS(HTTP Live Streaming). Because of its lower latency, RTMP is more suitable for live broadcasting, while HLS is more suitable for on-demand broadcasting.

Here we use RTMP to make a live streaming App.

Step 1.2

There are only 5 steps to build a live broadcast App:

1. Deploying video Sources

2. Integrated ijkplayer

3. To build the UI

4. Integrate the Cloud Bus SDK

5. Horizontal screen to achieve the barrage

2 Process Implementation

2.1 Deploying video Sources

At present, there are many third-party services providing video sources in the market. Here we choose Aliyun audio and video solution. The specific deployment process can refer to the documentation of Ali Cloud, here is not detailed, the documentation is very clear.

After the deployment, we got the video source address: “rtmp://live.lettuceroot.com/yunba/live-demo”.

2.2 integrated ijkplayer

2.2.1 integration

After deploying the video, we move on.

Since the AVplayer shipped with iOS does not support video streaming in RTMP format, we need to use a third-party library.

Bilibili’s iJkPlayer is the most mature RTMP streaming player available on GitHub.

It’s ffMPEg-based, supports Android and iOS, and is great for streaming and playing native video. Here we show how to integrate iJkPlayer to play RTMP video streams.

To facilitate developer integration, we have compiled the iJkPlayer project into the framework and put it in the cloud disk (password: RB9Q).

We drag the downloaded Framework file into our project, and then in (Figure 1)

Click “+” in Linked Frameworks and Libraries (Figure 2).

Add the following dependency libraries (Figure 3)

Our integration is complete.

2.2.2 code

We add code to the ViewController:

 var player: IJKFFMoviePlayerController!
Copy the code

Next, we add the following code to the ViewController’s 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)
Copy the code

And finally in viewWillAppear I will add:

player.prepareToPlay()
Copy the code

Let’s run the simulator, and we’ll see the video. (figure 4)

Because screen adaptation has been added to the code, when we rotate the emulator, we see the video automatically adapt to the screen.

2.3 Building a Chat Room

2.3.1 build the UI

Of course, video alone is not enough here, we also need a barrage.

In portrait mode, there was not enough space to display bullets because the video adapted to the screen at a ratio of 16:9, so we made a page similar to a chat room.

Let’s build a live UI using a View that plays video as an example. We open main.storyboard.

Let’s put a View above the Controller and set the background to black. (Figure 5, Figure 6)

Hold down Shift and drag it to the parent View, Add the following Constraints, and click Add Constraints. (figure 7)

Next we set the Ratio to 16:9, set the height to length x 9/16, and check Aspect Ratio. Click Add Constraints. (figure 8)

And then you add an outlet to the ViewController by right clicking and dragging. (figure 9)

Similarly, other elements of the interface can be constructed, and we end up with an interface similar to the following. (figure 10)

(Note that here we changed view.addSubview to playerView.addSubview and added Autolayout.)

When we run it again, we see that the playerView is now in focus. (figure 11)

2.3.2 Integrating the Yunba SDK

Next, we need to deal with the business support for chat rooms and bullet screens.

Among the many third parties offering such services, we chose to use Yunba’s SDK. Based on MQTT and designed with Erlang/OTP architecture, the cloud bus real-time communication cloud service is a bi-directional real-time system with Pub/Sub model. Through transparent transmission, all real-time message transmission can be realized for the live broadcasting platform.

Next, let’s integrate the SDK of Cloud Bus.

We went to yunba. IO/to register and log in. (figure 12)

After login, click “Application Management” in the sidebar, then click “Create Application”, and enter the application name and package name. (figure 13)

After creating the app, we can see the AppKey of the app from “App List” → “Manage” → “App Details”, and we will copy it.

Next, let’s integrate the SDK of Yunba, click download.

We unzip the downloaded SDK and add it to the project, and add the corresponding dependent libraries (Figure 14, Figure 15)

The application of the appDelegate didFinishLaunchingWithOptions to add the following code, and the String! Replace it with the AppKey you just copied:

YunBaService.setup(withAppkey: String!)
Copy the code

The integration is complete.

2.3.3 code

We first define 3 topics (channels) to implement 3 different functions, namely topicBullet, topicStat and topicLike.

Add another method for the Umba SDK to send us notifications:

@objc func onMessageReceived(notification: Notification) { if let message = notification.object as? YBMessage {switch message. Topic {case topicBullet: // Table case topicStat: // Default: break}}}Copy the code

Then add the following code to 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
    )
Copy the code

Subscribe to the corresponding Topic to support bullet screen, like, online number and username functions respectively.

In the outlet of the send button, we added the following codes :(data is the corresponding model of the barrage, such as information and color, etc.; You can set data according to your specific needs, so leave it blank.

YunBaService.publish(topicBullet, data: data, resultBlock: nil)
Copy the code

Sends a message to yunba’s server.

In a few very simple steps, we implemented the required business functions.

2.3.4 Landscape screen to achieve barrage

Next, let’s implement the barrage in landscape mode.

We choose BarrageRenderer, a third-party library, to carry out the operations related to bullets.

This library is a barrage rendering engine written by Unash, which is better than other barrage libraries, so we use this third party library.

This is a Third-Party library for iOS using bullet screen, which is relatively simple to use and supports four directions.

Similarly, we have uploaded BarrageRenderer’s compiled files to the cloud disk (password: RB9Q) for easy developer integration.

We drag the downloaded BarrageRenderer into the project. (figure 16)

Then we add code to the ViewController:

var renderer = BarrageRenderer()
Copy the code

Then add code to viewVillAppear:

playerView.addSubview(renderer.view)
renderer.start()
Copy the code

Then we define the barrage, we received the barrage above, update the Table part, add the following code:

let descriptor = BarrageDescriptor() descriptor.spriteName = NSStringFromClass(BarrageWalkTextSprite.self) Params ["text"] = // Barrage content Descriptor. Params ["textColor"] = // Barrage color Descriptor. Params ["side"] = BarrageWalkSide.default.rawValue descriptor.params["direction"] = BarrageWalkDirection.R2L.rawValue renderer.receive(descriptor)Copy the code

When we run the Demo again, every time we receive a message, we see a scrolling barrage in the player.

3 test Demo

After running all the above programs, let’s test out the Demo.

Type “Hello Yunba~” in the bottom text bar, and you can see the bullet screen scrolling from right to left in real time in the video player. In addition, the interface can also display the number of online and the number of likes, etc., basically meet the general function of the chat room.

If you want more information, you can click the link to check it out.