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.
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-content> as well as the
.nav-decor class to transparent
seems to do the trick (opens new window).
In other Cordova-based frameworks or if you have a lot of customizations in your
Ionic app, you might need to hide additional elements.
in a Cordova app, provided you add the following declarations to your
<allow-navigation href="https://dist.bambuser.net/*" /> <allow-navigation href="https://static.bambuser.com/*" /> <preference name="AllowInlineMediaPlayback" value="true" />
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.