Build a Live-Streaming Broadcast App

Justin Miller:

If you’re looking to build a live-streaming broadcast app for iOS here is an easy way to get started. You’ll need Xcode for building the iOS app and Objective-C, Wowza GoCoder SDK to add live video streaming to your build, and the Wowza Streaming Cloud™ service as your media server and content delivery network for broadcasting. 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 the reversed domain name as part of the bundle identifier. Once you’ve registered, you’ll receive an email containing both your license key and bundle identifier. You’ll want to store this information somewhere for future use. Now, 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.

We’ll be referencing code from our online documentation, build a live streaming app with GoCoder SDK for iOS. Our step-by-step will follow the order of the contents listed, so please refer back to this page to copy and paste example code. Let’s start by opening up Xcode and selecting an iOS single view app project template. On the next screen, add general information regarding your app, making 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 our Wowza GoCoder SDK libraries, locate Wowza GoCoder SDK on your Mac and drag the framework into embedded binaries. One last thing we’ll need to do for set up is open ViewController.H and make sure there’s an import statement to Wowza GoCoder SDK libraries. Next, we’ll add a broadcast button. To do this we’ll need to go to Main.Storyboard. View Controller should already be selected. Use the object library icon to add a button. Drag the button onto the canvas, double click, and rename the button Broadcast.

Now, we can add the declaration for the outlet to the class. To make it easy let’s show the assistant editor view. From here we can control drag the object to the code, we’ll name it broadcastbutton, and then connect it. You will see the code that’s been added appears the same as in our documentation. Now, let’s define our app properties. We’ll add an import statement to the GoCoder’s SDK’s API header and a GoCoder property to the viewcontroller class. Copy the code, switch back to the standard editor, and go to ViewController.m. Here, we can paste over the code from after the import statement to @end.

Once that’s been added, we can now register and initialize the SDK by adding the following to the viewDidLoad method of the viewcontroller class. You’ll need to copy and paste your license key into the code. So, go to your email and copy the license key. Then, paste it over the register license key placeholder. Continuing on, we need to check for app permissions on the camera and microphone for a mobile device. Copy the text that will be the string value for this property. Select the project back in Xcode, go to Info, and using the first plus that appears when over a property locate the privacy options for camera usage. Once you’ve found it paste in the values.

We’ll repeat this process for the microphone, only we’ll change the string value so that camera becomes microphone. With the app permission set we can start the camera preview by associating the UI view with the SDK’s camera preview. Copy the code provided, in Xcode return to ViewController.m and paste in the code before the last bracket of the viewDidLoad method. With the camera ready we’ll configure the broadcast stream to Wowza Streaming Cloud. We’ll once again copy and paste in the code before the last bracket of the viewDidLoad method. We’ll need to add the host address, port number, application name, stream name, as well as the user name and password source authentication. We’ll add this source connection information from Wowza Streaming Cloud before we build the app. For now, let’s add broadcast monitoring call backs by updating the interface definition for the view controller class to include the WOWZ status call back protocol. We’ll paste this code over the current interface definition. We’ll also add these methods defined by the WOWZ status protocol to the view controller class to monitor status updates and errors during a live-streaming broadcast. Copy and paste this into the bottom of the ViewController.m before the final @end.

Now, we can configure the broadcast button to start and stop streaming when tapped. To do this, we’ll need to add an event handler method to the viewcontroller class that’s invoked when the broadcast button is tapped. We’ll paste this in after the previous method. Don’t forget, we’ll also need to associate the broadcastButtonTapped event handler with the broadcast button. We’ll do so by copying the following code and placing it at the bottom of the viewDidLoad method right before the very last bracket. Now, everything is almost ready to go, but before we can build and deploy the app we still need to add the source connection information from Wowza Streaming Cloud. 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, then choose a location closest to you and click Next. On the next screen, choose Wowza GoCoder and from this point to speed up the process click Next through all of the successive windows and we’ll do this all the way to Finish.

Once your live stream is created, you’ll be able to see all of the source connection information necessary to connect your app for broadcast to Wowza Streaming Cloud. This information, such as the primary server, will need to be broken into host address and application name. Don’t forget that there are also low-latency options available through our Ultra Low Latency plan for Wowza Streaming Cloud. These are great if you’re looking to use live streaming with user interactivity. Now, when you’re ready, run the build. Debug information should let you know if there are any issues such as the wrong license key, bundle identifier, or source connection information.

Before you hit Broadcast on your app, be sure to start the live stream in Wowza Streaming Cloud. In the future you can do this via an API call from your app. There are many options available using our API. Once it’s running, hit Broadcast on your app and back in Wowza Streaming Cloud, you should see a video thumbnail preview showing it’s working. You can also watch the stream on the host it page. Don’t forget when you’re done, to Stop Live Stream in Wowza Streaming Cloud, as well as in the app by hitting the Broadcast button. That’s it for the basics. Please don’t forget to check out our documentation for developers under Wowza GoCoder SDK. We have multiple examples showing ways to customize your app. You’ll also find all of the API references here. Thanks for watching and happy streaming.