Build a Live-Streaming Playback App for iOS

Justin Miller:

If you’re looking to build an iOS app that includes live video streaming playback, here’s an easy way to get started.

You’ll need Xcode for building the iOS app in Objective-C, Wowza GoCoder SDK to add live video streaming to your build, the free Wowza GoCoder iOS app to create the live video stream and Wowza Streaming Cloud as your media server and content delivery network for broadcast.

Now if you haven’t already, go to wowza.com and use the Free Trial button at the top. From here you can sign up for a trial of Wowza Streaming Cloud and get a free license for Wowza GoCoder SDK. When registering for Wowza GoCoder SDK, be sure to create a bundle identifier that places your domain extension before your domain name. Apple prefers a reverse domain name as part of the bundle identifier. And once you’ve registered, you’ll receive an email containing both your license key and bundle identifier. You’ll want to store this information for future use.

Let’s download the iOS installer. If you’ve already registered, you can use the Downloads button at the top of wowza.com to access the most recent version of the Wowza GoCoder SDK. There are some great references on this page to learn more about Wowza GoCoder SDK, but for now let’s just unzip the file on our Mac somewhere we’ll be able to access it later.

Before we get started making the playback app, it’s important to have a live video stream to connect to. So to create this, log in to your Wowza Streaming Cloud account at cloud.wowza.com. Go under Live Streams, and choose to Add Live Stream. Name the live stream, choose a location closest to you, and click Next. On the following screen, choose Wowza GoCoder, and from this point to speed up the process, just click Next through all the successive windows, all the way to Finish. Most of these settings can be edited later in the future.

Once your stream’s created, you’ll be able to see the connection code required for a quick set-up with Wowza GoCoder and other approved partner products. If you haven’t already, you’ll need to download and install Wowza GoCoder from the Apple Store. Once the app is installed and running, use the cog on the top right to select Wowza Streaming Cloud. And from here you can enter in that connection code.

When you’re done, and the settings have been saved, first Start Live Stream in Wowza Streaming Cloud. It will take a few seconds for the instants to get up and running. Once it is, you can then hit the red Go Live button in Wowza GoCoder. You’ll see a preview thumbnail in Wowza Streaming Cloud to let you know it’s working. We’ll be adding the source connection information shortly to connect your app for playback to Wowza Streaming Cloud, so let’s get to work on making the playback app. We’ll be referencing code from our online documentation, Play a live stream with GoCoder SDK for iOS. So please refer back to this page to copy and paste example code.

Start by opening up Xcode and selecting an iOS single view app project template. On the next screen, add general information regarding your app and make sure the language is set to Objective-C. Next, we can create our project. With the app project created, check that the bundle identifier is the same as the one you were emailed when you registered. This is important for your license key to operate. To connect to our Wowza GoCoder SDK libraries, you’ll need to locate Wowza GoCoder SDK on your Mac and then drag the framework into embedded libraries. One last thing we’ll need to do for set-up is to open viewcontroller.h and make sure there’s an import statement to Wowza GoCoder SDK libraries. We’ll also repeat this process in the viewcontroller.m.

Okay. Now that we’re finished, we can add the player view to the app. And we’ll do this by first creating configuration and player properties. Once these have been pasted over the view controller class, we can create the WOWZPlayer object and register it for data events. Copy and paste the code before the last bracket of the view did load method. To register the GoCoder SDK license, we’ll need to copy over the license key from your email and then we’re going to add it as a variable. You’ll need to place this above the code you just pasted in. Also, if you’re getting an error for pre-roll duration, you can set the time manually to be one to three seconds. We’ll make ours three seconds. Now, we’ll need to implement the WOWZ status call back methods to respond and assign your player view. This can be pasted right before the final at end.

Next, we’ll add a playback button. To do this, we’ll first need to copy and paste in the configuration property to start and stop playing the stream. If you’d like to also ensure that playback fits within the available screen area, go to the bottom of the documentation for preview gravity, copy it, and then paste this code into the playback button. With the configuration property complete, we’ll need to go to main.storyboard to create the button. View controller should already be selected. Use the object library icon to add a button. Once you’ve placed it where you want it on the canvas just double-click it and rename the button Playback.

Now we’ll connect this to the configuration property. To make it easy, let’s show the assistant editor view. It’s from here we can simply control drag the object to connect it to the code. Let’s switch back to standard view, and then return to view controller.m.

Now it’s time to configure the broadcast stream to Wowza Streaming Cloud. Back in the documentation, copy the configuration method. We’ll need to add the host address, port number, application name, stream name, as well as the username and password source authentication. Go back to Wowza Streaming Cloud and add the source connection information into the proper fields. Once you’ve added in all the connection information, the last step before we can build is calling the configuration method. We’ll copy this code and use it to replace the first two lines of the view did load.

Now that we’re ready, let’s run the build. Debug information should let you know if there are any issues such as a wrong license key, bundle identifier, or source connection information. Once everything’s running, hit Playback on your app, and your live stream will appear. And don’t forget, when you’re done, Stop the Stream in the Wowza GoCoder app and in Wowza Streaming Cloud.

All right, that’s it for the basics. Please don’t forget to check out our online documentation for developers. Under Wowza GoCoder SDK, we’ve got multiple examples showing other ways that you can customize your app. You’ll also find all your API references here. Thanks for watching and happy streaming.