iOS

How to Live Stream Your iOS Game to Twitch in Real Time


Video game live streaming has been a trend in the gaming industry the past few years, and game developers have implemented features into their games to enhance the live streaming process for the users. However, not many mobile games have supported live streaming due to the complexity of enabling the live streaming feature while doing extensive graphics processing.

Hence, in this tutorial we will demonstrate how to render a SceneKit scene into video buffers, connect to any live stream server, and stream the rendered video buffers to Twitch’s live stream server in real-time. To do so, we will use ARVideoKit to render the SceneKit scene into video buffers, Twitch Ingest Stream Endpoints to connect to Twitch’s live stream server, and LFLiveKit to push the rendered video buffers to the live stream server!

Let’s Get Started

Editor’s note: This tutorial assumes you have already built an iOS game. The focus will be on the implementation of live streaming. To follow the tutorial, it is recommended to download the full project to take a look. You can find the download link at the end of the tutorial.

We will start off by cloning or downloading both ARVideoKit and LFLiveKit from GitHub. ARVideoKit is an iOS Framework that enables developers to capture videos, photos, Live Photos, and GIFs with ARKit content, while LFLiveKit is a RTMP streaming SDK for iOS. We will use both libraries for implementing live streaming.

You may clone both projects using the following command in your terminal:

Or simply click the Download ZIP button found when you visit both projects’ GitHub page.

Adding the Frameworks

After downloading both projects, we will add them into a previously built game project by doing the following:

  1. Drag them into the project
  2. Install ARVideoKit
  3. Add the .framework files as embedded binaries
Adding ARVideoKit to Xcode project

Adding User Interface

We will build the user interface programmatically instead of using Interface Builder. To keep things simple, we will create a UIButton, a UIAlertController, and a UILabel.

To do so, we will declare and initialize the following objects in the main game scene class:

Next, add the button and the label as subviews of the main game scene. Insert the following lines of code in the viewDidLoad() method:

In order to handle the button action, we then create a method called startEndLive(_:):

Now, back in viewDidLoad(), add the button’s target and connect it to the method we’ve created above:

Before moving to the next section, let’s test the app and see what we’ve added so far. Your app should have a new button and a new label visible on the screen, as seen here:

ARVideoKit App Demo

Implementing the Frameworks

Now it’s time to enable the live streaming feature! We will implement ARVideoKit and LFLiveKit frameworks into the main game scene. The very first step is to import both frameworks:

Next, add the following delegates and their methods as an extension to your game scene class:

After adding the delegate methods into the project, create an empty Swift file named TwitchIngest.swift and add the following enum (or download from here):

The enum above consist of the Twitch Stream endpoints that we will use to connect to their server. You may find the full list of endpoints here.

Note: In this tutorial we will only use New York City (jfk) stream endpoint to connect to Twitch Server. However, you must use the nearest endpoint to the user for a better user experience.

After implementing the delegate methods and adding the TwitchIngest.swift file to the project, we will create the needed objects to render the game’s scene and live stream the game to Twitch. We’ll start with adding the following as global variables:

In the viewDidLoad() method we will initialize and configure recorder (a RecordAR variable) and session (a LFLiveSession variable), by adding the following:

To prepare the recorder, insert the following statement in the viewWillAppear(_ animated: Bool) method:

Implement the Start/End Live Stream Function

Now that the configuration of the RecordAR and LFLiveSession variables are ready, let’s move on to the implementation of start and end live stream feature.

For the startEndLive(_:) method, update the method by adding the following:

In the block of code above, we are checking whether the user have previously stored their Twitch Stream Key in the game. If so, the user will be able to begin their live stream to the New York City (jfk) streaming server. Otherwise, we request the user to enter their Twitch stream key.

Next, we will update the viewWillAppear(_:) method by adding the following:

In the block of code above, we simply update the startLive button title and color depending on whether the app has the user’s Twitch Stream key stored or not.

Using the Delegate Methods

So far we have the start/end live stream functionality implemented; however, we only start the live stream session without pushing the rendered video buffers from the game scene to the server. This part is where we finally use the delegate methods to stream both audio and video to Twitch’s server!

To begin, we will update the textFieldDidEndEditing(_:,_:) delegate method to store the user’s Twitch Stream key locally:

After having the user’s stream key stored locally, we will be ready to stream the rendered audio & video buffers of the game to Twitch. To stream the rendered buffers, update the frame(didRender:, with:, using:) delegate method:

Finally, let’s update the liveSession(_ :, liveStateDidChange:) delegate method to change the statusLbl text based on the live stream status.

In the block of code above, I created a UIAlertController that asks the user if they want to update their Twitch stream key if an error occurs while live streaming.

Before running the application on your iOS device, we need to make sure to add the usage description of the camera and microphone in the app’s Info.plist.

To do so, add the following to the plist source code:

Alternatively, you can add the properties using the Property Editor:

Adding properties to info.plist

Ready to Test!

That’s it, I hope you find the tutorial helpful! You may now run your app and click Add Twitch Stream Key to test it out.

To download the full project, you can find it on GitHub. If you have any questions or thoughts on this tutorial, please leave me comment below and let me know.

iOS
Using iAd to Display Banner Ad in Your App
iOS
Introduction to ReplayKit: Building a Simple Screen Recording App
iOS
Protocol Oriented Programming in Swift: Is it better than Object Oriented Programming?
Shares