explore

Resources

more

legal

support

Industries
Truetime Solutions™
Truetime Solutions™
Products
Resources

Technology

Partners
Red5 Pro
Red5 Cloud
Red5 Pro
Red5 Cloud

Red5 Documentation

 

Getting Started with Red5 Pro iOS
Discuss on Slack

Getting Started with Red5 Pro iOS

Overview

In this tutorial, we will walk through the steps of creating an iOS application that live streams to Red5 Pro. We will download the iOS example application. We will also build a minimal application using Objective C and Swift.

Download the latest Red5 Pro Server!

Register A Red5 Pro Account

If you have not done so already, register for an account at https://account.red5.net.

* A Trial Account allows for up to 10 concurrent connections, while the Professional license has no connection limit.

Requirements

The following are required to setup the Red5 Pro Server and to follow along with this example:

The Red5 Pro server requires Java 1.7+ or higher. Install Java 1.7+ or higher if not already installed on your machine.

Red Pro Server Installation

  1. Download the Red5 Pro server from the downloads section of the Red5 Pro Accounts site.
  2. Unzip into a location on your local system. For the purposes of this tutorial, we will unzip the Red5 Pro server to: /Users/red5pro-user/red5pro on OSX or /home/red5pro-user/red5pro on Linux.
  3. Start the Red5 Pro server:
    •  On OSX & Linux: Open Terminal, cd into your Red5 Pro install directory and issue this command: ./red5.sh
    •  On Windows: Navigate to the Red5 Pro install directory in a File Browser and double-click on red5.bat
  4. After the server has started, open a web browser and navigate to http://localhost:5080
  5. If the server has started successfully, you should see the default landing page for the Red5 Pro server install
    •  The landing page can be found at /webapps/root/index.jsp of your Red5 Pro installation. You can modify or remove it as desired. For now, we will use it to navigate around and demonstrate what the Red5 Pro server can do!

Eclipse IDE

For the examples, we will be demonstrating how to set up the project in the Eclipse IDE. The steps for setup should be transferrable to the IDE of your choice, as it is the code and method of deployment that we will be more focused on.

Source Code

The source for this example can be checked out from the following Github repository:
https://github.com/red5pro/red5pro-dev-series.git

Video Walk-Through

This documentation has an accompanying video walk through that you can follow as you are developing.

Create a Red5 Pro Application

Download SDK and Examples

Watch a demonstration of the current section
  1. Open a browser window and navigate to https://www.red5pro.com
  2. Right click on the DOCS menu link at the top of the page and open the link in a new tab
  3. Then click on the LOGIN menu link at the top of the page
  4. Once logged in, click on the Downloads link
  5. Scroll down and click on the Download the Streaming SDK v3.4.0 for iOS download link
  6. Save the download to your file system
  7. In the Documentation tab of your browser, navigate to Streaming SDKs
  8. Scroll down and click on Download the Streaming SDK Example for iOS. This will open up a new tab to our Github repository
  9. Click on the Clone or Download button
  10. Open a command prompt and navigate to a location where you would like to clone the repository
  11. Issue git clone https://github.com/red5pro/streaming-ios.git and let the repository download to your filesystem

Setup The iOS Example Project

Watch a demonstration of the current section
  1. From the location on your file system where you cloned the repository, change into the streaming-ios sub-directory
  2. Open the Xcode project by issuing open R5ProTestbed.xcodeproject
  3. Expand R5ProTestbed > R5ProTestbed and view the iOS swift examples
  4. Next while still in the R5ProTestbed > R5ProTestbed folder, open the tests.plist file
  5. Expand the Global Properties
  6. Locate the _licensekey property and modify this with your SDK key found in your Red5 Pro Account Manager in Downloads.
  7. Modify the host property to point to your local server IP Address. You can find this information on a Mac by issuing ifconfig from the command line. If your server is located on the Internet, you will need its public IP Address
  8. Next click on the R5ProTestbed project and then click on the Build Settings header tab
  9. Make sure All & Combined are selected
  10. Enter a Search Filter term of “bit”
  11. From the results, and Under Build Options > Enable Bitcode set the value to No
  12. From the General tab, make sure your provisioning profile and Signing Team are all setup properly

Test The Example Project

Watch a demonstration of the current section
  1. Start the Red5 Pro server:
    •  On OSX & Linux: Open Terminal, cd into your Red5 Pro install directory and issue this command: ./red5.sh
    •  On Windows: Navigate to the Red5 Pro install directory in a File Browser and double-click on red5.bat
  2. After the server has started, open a web browser and navigate to http://localhost:5080
  3. Make sure your iOS device is connected to your computer
  4. From XCode, make sure you select your phone as the testing device. And click on the run button
  5. From your device, navigate to the home screen and click on Publish 1080p
  6. From a browser window, navigate to http://localhost:5080/live/subscribe.jsp
  7. Scroll down and select your stream in order to view the stream over WebRTC

Create An Objective-C iOS Project

Watch a demonstration of the current section
  1. From XCode, choose File > New > Project…
  2. From the iOS menu tab, select Single View Application and click Next
  3. Set the Product Name: field to “Publisher”
  4. Choose your code signing team and provide an identifier. ie: com.infrared5.ios.ex1objc
  5. Select Objective-C as the language
  6. Click Next and select a directory to store your project on the filesystem

Configure The Objective-C Project

Watch a demonstration of the current section
  1. Click on the project Publisher and then select the General tab
  2. Scroll to the bottom to the section labeled Linked Frameworks and Libraries
  3. Click on the plus sign
  4. Filter results by “libz” and select libz.tbd
  5. Continue adding “libstdc++” and select libzstdc++.tbd
  6. Continue adding “libiconv” and select libiconv.tbd
  7. Continue adding “OpenAL” and select OpenAL.framework
  8. Continue adding “CoreFoundation” and select CoreFoundation.framework
  9. Continue adding “Quartz” and select QuartzCore.framework
  10. From your explorer, find the previously downloaded iOS SDK and expand red5pro-streaming-ios-sdk-[version]
  11. Then drag the expanded R5Streaming.framework file into your Framework folder from XCode.
  12. Select Copy items if needed
  13. Click Finish

Develop The Objective-C Project

Watch a demonstration of the current section
  1. Right-Click the Publisher > Publisher folder
  2. Choose New File…
  3. From the iOS tab, select Cocoa Touch Class
  4. Click Next
  5. For the Class: field, enter PublisherViewController and leave the Subclass of field set to R5VideoViewController
  6. Click Next and choose the default folder

  7. Open PublishViewController.h and setup the class so that it reflects the following:

      #import <UIKit/UIKit.h>
  #import <R5Streaming/R5Streaming.h>

  @interface PublisherViewController : R5VideoViewController<R5StreamDelegate>

  - (void) start;
  - (void) stop;

  @end

  8. Open PublishViewController.m and setup the class so that it reflects the following:

      #import "PublisherViewController.h"
  #import <R5Streaming/R5Streaming.h>

  @interface PublisherViewController() {
      R5Configuration *config;
      R5Stream *stream;
  }
  @end

  @implementation PublisherViewController

  - (void)viewDidLoad {
      [super viewDidLoad];

      config = [R5Configuration new];
      config.host = @"192.168.0.8";
      config.port = 8554;
      config.contextName = @"live";
      config.licenseKey = @"";
  }

  -(void)preview {

      NSString *cameraID = nil;

      NSArray *captureDeviceType = @[AVCaptureDeviceTypeBuiltInWideAngleCamera];
      AVCaptureDeviceDiscoverySession *captureDevice =
      [AVCaptureDeviceDiscoverySession
      discoverySessionWithDeviceTypes:captureDeviceType
      mediaType:AVMediaTypeVideo
      position:AVCaptureDevicePositionUnspecified];

      cameraID = [captureDevice.devices.lastObject localizedName];

      //    AVCaptureDevice *defaultCamera = [AVCaptureDevice defaultDeviceWithDeviceType:AVCaptureDeviceTypeBuiltInDualCamera mediaType:AVMediaTypeVideo position:AVCaptureDevicePositionFront];

      R5Camera *camera = [[R5Camera alloc] initWithDevice:captureDevice.devices.lastObject andBitRate:512];

      AVCaptureDevice *audioDevice= [AVCaptureDevice defaultDeviceWithMediaType:AVMediaTypeAudio];
      R5Microphone *microphone = [[R5Microphone new] initWithDevice:audioDevice];

      R5Connection *connection = [[R5Connection new] initWithConfig:config];

      stream = [[R5Stream new] initWithConnection:connection];
      [stream attachVideo:camera];
      [stream attachAudio:microphone];

      [stream setDelegate:self];
      [self attachStream:stream];
      [self showPreview:YES];
  }

  -(void)start {
      [self showPreview:YES];
      [self showDebugInfo:true];
      [stream publish:@"stream1" type:R5RecordTypeLive];
  }

  -(void)stop {
      [stream stop];
      [stream setDelegate:nil];
      [self preview];
  }

  - (void)viewDidAppear:(BOOL)animated {
      [super viewDidAppear:animated];
      [self preview];
  }

  - (void)viewWillDisappear:(BOOL)animated {
      [super viewWillDisappear:animated];
      [self stop];
  }

  -(void)onR5StreamStatus:(R5Stream *)stream withStatus:(int)statusCode withMessage:(NSString *)msg {
      NSLog(@"Stream: %s - %@", r5_string_for_status(statusCode), msg);
  }

  @end
  9. Open Publisher > Publisher > Main.storyboard
  10. From the Object Library pull out a new controller
  11. From the inspector, give it a class name of PublisherViewController
  12. Also give it the Storyboard ID of publishView
  13. Place a button component with the label Start in the original ViewController
  14. Open the Assistant Editor and drag the Publish Button over to the ViewController.h and give it the name publishButton

  15. Open the _ViewController.m and have the code reflect the following:

    #import "ViewController.h"
#import "PublisherViewController.h"

@interface ViewController () {
    PublisherViewController *publisher;
    BOOL isPublishing;
}

@end

@implementation ViewController

- (IBAction)onPublishToggle:(id)sender {
    if(isPublishing) {
        [publisher stop];
    }
    else {
        [publisher start];
    }
    isPublishing = !isPublishing;
    [[self publishButton] setTitle:isPublishing ? @"STOP" : @"START" forState:UIControlStateNormal];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:nil];
    UIViewController *controller = [storyboard instantiateViewControllerWithIdentifier:@"publishView"];

    CGRect frameSize = self.view.bounds;
    publisher.view.layer.frame = frameSize;
    publisher = (PublisherViewController *)controller;

    [self.view addSubview:publisher.view];
    [self.view sendSubviewToBack:publisher.view];
}

-(void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    [[self publishButton] setTitle:@"START" forState:UIControlStateNormal];
}

-(void)viewDidDisappear:(BOOL)animated {
    [super viewDidDisappear:animated];
    isPublishing = NO;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end
  16. Open the Assistant Editor and click on the Start button
  17. On the Connections Inspector drag the touch up inside over the onPublishToggle method declared in ViewController.m
  18. Select the top level project Publisher
  19. Select Build Settings and filter by “bitcode”
  20. Make sure Enable Bitcode is set to No
  21. Select the Info tab
  22. From the Custom iOS Target Properties section and add a Privacy – Camera Usage Description and a Privacy – Microphone Usage Description
  23. Restart Red5 Pro per previous steps
  24. Make sure your device is selected and unlocked, then click Run
  25. When the application loads on your device, you can then Click Start
  26. From a browser window, navigate to http://localhost:5080/live/subscribe.jsp
  27. Scroll down and select your stream in order to view the stream over WebRTC

Create A Swift iOS Project

Watch a demonstration of the current section
  1. From XCode, choose File > New > Project…
  2. From the iOS menu tab, select Single View Application and click Next
  3. Set the Product Name: field to “Publisher”
  4. Choose your code signing team and provide an identifier. ie: com.infrared5.ios.ex1objc
  5. Select Swift as the language
  6. Click Next and select a directory to store your project on the filesystem

Configure The Swift Project

Watch a demonstration of the current section
  1. Click on the project Publisher and then select the General tab
  2. Scroll to the bottom to the section labeled Linked Frameworks and Libraries
  3. Click on the plus sign
  4. Filter results by “libz” and select libz.tbd
  5. Continue adding “libstdc++” and select libzstdc++.tbd
  6. Continue adding “libiconv” and select libiconv.tbd
  7. Continue adding “OpenAL” and select OpenAL.framework
  8. Continue adding “CoreFoundation” and select CoreFoundation.framework
  9. Continue adding “Quartz” and select QuartzCore.framework
  10. From your explorer, find the previously downloaded iOS SDK and expand red5pro-streaming-ios-sdk-[version]
  11. Then drag the expanded R5Streaming.framework file into your Framework folder from XCode.
  12. Select Copy items if needed
  13. Click Finish

Develop The Swift Project

Watch a demonstration of the current section

  1. Open the ViewController.swift and have the code reflect the following (make sure to change the config properties with your own):

    
import UIKit
import R5Streaming

class ViewController: UIViewController, R5StreamDelegate {

    var currentView : R5VideoViewController? = nil
    var publishStream : R5Stream? = nil

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func onR5StreamStatus(_ stream: R5Stream!, withStatus statusCode: Int32, withMessage msg: String!) {
        NSLog("Status: %s ", r5_string_for_status(statusCode))
    }

    func getConfig()->R5Configuration{
        // Set up the configuration
        let config = R5Configuration()
        config.host = "192.168.0.8"
        config.port = 8554
        config.contextName = "live"
        config.`protocol` = 1;
        config.buffer_time = 0.5
        config.licenseKey = ""
        return config
    }

    override func viewDidAppear(_ animated: Bool) {

        super.viewDidAppear(animated)

        AVAudioSession.sharedInstance().requestRecordPermission { (gotPerm: Bool) -> Void in

        };

        setupDefaultR5VideoViewController()

        // Set up the configuration
        let config = getConfig()
        // Set up the connection and stream
        let connection = R5Connection(config: config)

        setupPublisher(connection!)
        // show preview and debug info
        // self.publishStream?.getVideoSource().fps = 2;
        self.currentView!.attach(publishStream!)

        self.publishStream!.publish("stream1", type: R5RecordTypeLive)

    }

    func setupDefaultR5VideoViewController() -> R5VideoViewController{

        let r5View : R5VideoViewController = getNewR5VideoViewController(self.view.frame);
        self.addChildViewController(r5View);

        view.addSubview(r5View.view)
        r5View.setFrame(self.view.bounds)

        r5View.showPreview(true)

        r5View.showDebugInfo(true)

        currentView = r5View;

        return currentView!
    }

    func getNewR5VideoViewController(_ rect : CGRect) -> R5VideoViewController{

        let view : UIView = UIView(frame: rect)

        let r5View : R5VideoViewController = R5VideoViewController();
        r5View.view = view;

        return r5View;
    }

    func setupPublisher(_ connection: R5Connection){

        self.publishStream = R5Stream(connection: connection)
        self.publishStream!.delegate = self

        // Attach the video from camera to stream
        let videoDevice = AVCaptureDevice.defaultDevice(withDeviceType: .builtInWideAngleCamera, mediaType: AVMediaTypeVideo, position: .front)

        let camera = R5Camera(device: videoDevice, andBitRate: 750)
        camera?.width = 640
        camera?.height = 360
        camera?.orientation = 90
        self.publishStream!.attachVideo(camera)

        // Attach the audio from microphone to stream
        let audioDevice = AVCaptureDevice.defaultDevice(withMediaType: AVMediaTypeAudio)
        let microphone = R5Microphone(device: audioDevice)
        microphone?.bitrate = 32
        microphone?.device = audioDevice;
        NSLog("Got device %@", audioDevice!)
        self.publishStream!.attachAudio(microphone)
    }

}
  2. Select the top level project Publisher
  3. Select Build Settings and filter by “bitcode”
  4. Make sure Enable Bitcode is set to No
  5. Select the Info tab
  6. From the Custom iOS Target Properties section and add a Privacy – Camera Usage Description and a Privacy – Microphone Usage Description
  7. Restart Red5 Pro per previous steps
  8. Make sure your device is selected and unlocked, then click Run
  9. When the application loads on your device, you can then click Start
  10. From a browser window, navigate to http://localhost:5080/live/subscribe.jsp
  11. Scroll down and select your stream in order to view the stream over WebRTC

Conclusion

Congratulations! You have just created your first iOS Red5 Pro Mobile Application!

This tutorial only scratched the surface of what is capable with live streaming on the Red5 Pro Server. We hope you go forth and start stretching the limits 🙂

Troubleshooting

The following sections may aide in troubleshooting any issues may come across in trying the previous examples. Please also refer to our troubleshooting guide

If you have further questions, please contact us at red5pro@infrared5.com

Required open ports

The following default ports are required to be open in order to allow for Live Streaming and Second Screen:

  • 5080 : default web access of Red5
  • 1935 : default Red5 RTMP port
  • 8554 : default RTSP port
  • 8088 : default Second Screen Client registry
  • 6262 : default Second Screen Host registry