Developing a hybrid iOS app

If you haven't read Developing iOS apps you should read that first.

Hybrid applications are built using a combination of native code (Objective-C or Swift) and JavaScript/HTML. The JavaScript/HTML runs in a web view, which is either visible or not.

In this tutorial we will show you how to build a hybrid WebRTC iOS app called SimpleDemo that connects to http://demo.openwebrtc.org. Signalling and other WebRTC logic is run in a hidden WKWebView and app UI, including video rendering, is implemented in native Objective-C code. The app uses the OpenWebRTC Helper classes to reduce the amount of code we need to write.

The source code for the application is available here. Let's get started.

##1. Create a new single-view application i Xcode You know how to do this. In this tutorial we use Objective-C. ##2. Add the helper classes Drag the following folder in to your project (do not Copy):

openwebrtc-examples/ios/OwrHelpers

Files are found here. One thing that the helpers methods do is set up a WKWebView where the WebRTC logic will run. It is up to your application to determine if the web view should be visible or not. In this example we want the view to be visible:

self.browserView.hidden = NO;

In the AppDelegate we need to initialise OpenWebRTC:

@implementation SimpleDemoAppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [OpenWebRTCViewController initOpenWebRTC];
    return YES;
}

@end

##3. Setup needed UI in Interface Builder The app uses two OpenWebRTCVideoView views for displaying the remote- and self-view videos, a number of UIBarButtonItem buttons for joining and starting/stopping and UISlider for selecting a room to enter. Our SimpleDemoViewController extends the helper class OpenWebRTCViewController, where the two OpenWebRTCVideoView IBOutlets are defined.

The following IBActions needs to be connected:

- (IBAction)joinButtonTapped:(id)sender;
- (IBAction)callButtonTapped:(id)sender;
- (IBAction)hangupButtonTapped:(id)sender;
- (IBAction)sliderValueChanged:(UISlider *)sender;

##4. The role of OpenWebRTCWebView and WKWebView OpenWebRTCWebView from the helper classes extends WKWebView. Interface Builder currently does not allow you to add a WKWebView so it needs to be created in code. This is done in the OpenWebRTCViewController helper class, so unless you want to change the behaviour you do not need to do anything:

self.browserView = [[OpenWebRTCWebView alloc] initWithFrame:self.view.frame];
[self.view addSubview:self.browserView];

The WKWebView, instance named self.browserView, is where the WebRTC logic runs.

##5. Load http://demo.openwebrtc.io It is time to load the web app:

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self loadRequestWithURL:@"http://demo.openwebrtc.io"];
}

##6. Connect user input to JavaScript method calls In this example application we use native UI elements and connect user input to JavaScript code injection. For example:

- (IBAction)joinButtonTapped:(id)sender
{
    int room = [roomSlider value];
    NSString *js = [NSString stringWithFormat:@"document.getElementById('session_txt').value='%d';document.getElementById('join_but').click();", room];
    [self.browserView evaluateJavaScript:js completionHandler:nil];
}

##7. Native video rendering The video will currently be rendered inside the OpenWebRTCWebView. We are working on adding support for native OpenGL based video rendering.