How to create a live video player app using Cordova and Ionic

When playing back Bambuser content in a hybrid app, you have the freedom to choose either the web player or the native SDK.

Going native can give you lower latency in some scenarios. The web player on the other hand, has a richer API. You could, for example, choose to use the native player for live streams and the web player for archived videos.

Our Ionic-based player example (opens new window) demonstrates both approaches.

Native player

To use the Bambuser's native player SDK in a Cordova app, add the cordova-plugin-bambuser (opens new window) plugin to your app.

You also need to make sure that your webapp has a transparent background while playing, since the player surface is painted below Cordova's web view.

In a vanilla Ionic 2 and 3 app, forcing the background color of <ion-app> and <ion-content> as well as the .nav-decor class to transparent seems to do the trick (opens new window). You can toggle the transparent mode on and off using JavaScript (opens new window), so that your app doesn't have to be transparent all the time. In other Cordova-based frameworks or if you have a lot of customizations in your Ionic app, you might need to hide additional elements.

Adding smaller elements on top of the player - perhaps a share or a like button - partially obscuring the video, is totally fine of course. Maybe even a custom HTML-based chat UI. cordova-plugin-bambuser (opens new window)'s player is displayed below the webview precisely to allow you to do these types of customizations using JavaScript, whereas many other Cordova plugins use a native subview on top and that forces you to do customizations in native code.

Web player

Bambuser's JavaScript player can be used in a Cordova app, provided you add the following declarations to your project's plugin.xml:

<allow-navigation href="*" />
<allow-navigation href="*" />
<preference name="AllowInlineMediaPlayback" value="true" />

plugin.xml example (opens new window)

Step-by-step guide

We will go more into detail on how to add the player to a typical Ionic app in a future update to this article. In the meantime, checkout the finished implementation bambuser-exampleplayer-ionic (opens new window), while reading the JavaScript API portion of the web player guide and the player instructions for cordova-plugin-bambuser (opens new window).

Dynamic content

bambuser-exampleplayer-ionic (opens new window) currently plays one specific broadcast using a hard-coded, shareable (da_static=1), long-lived (da_ttl=0) resourceUri.

In most apps, you probably want to load content dynamically in the end. In many scenarios, creating your own backend as a mediator of who gets served what is a good idea, but for simple scenarios where all users have access to all videos, you can use the REST API (opens new window) directly from the mobile app, as long as you use a read-only api key!

The Android native player guide illustrates a simple workflow (opens new window) for dynamically displaying the latest broadcast in your account.

Whats next?

Also check out how to add broadcasting to your Ionic app, by using cordova-plugin-bambuser (opens new window)