Ionic Media Streaming (Video & Audio)

ionic-media-streaming

Recently I got some questions about media streaming with Ionic so I gave it a try and the results where actually pretty good! With not much effort we can easily integrate streaming audio or video into our app using a nice little plugin.

The Ionic Academy

More content, more detailed video courses and community help inside the member area.

Not an Ionic Academy Member? Click here to learn more

In this Quick Win we will see how to use the Ionic Native Media Streaming plugin for both audio and video files that are somewhere on a remote server.
ionic-media-stream

Preparing the App

For this example we start like always with a blank new Ionic app and additionally install the media streaming Cordova plugin and npm package, so go ahead and run:

Also, don’t forget to load the new plugin inside your src/app/app.module.ts and add it to the array of your providers:

There’s nothing more we need to configure for now, perhaps you might want to find the links to your files already. In our case we take 2 dummy files which can be found here:

Adding Media Streaming

Our view will in this example just consist of a few dummy controls. I only added what’s working for both iOS and Android, there are some more options that are only specific for iOs and you can find them on the Cordova plugin repository.

For now, open your src/pages/home/home.html and change it to:

Now the actual part with media streaming comes.

We simply need to call the plugin and pass in an optional object with a success and failure callback. There are also other options we could pass (which can be seen on the github page), but we don’t have to add them. Simply pass the URL to the media file as first object and the options as second.

For the audio streaming, the plugin works more or less the same. The only problem is here that the sound will also be played inside a fullscreen dialog, which you can give some background or image, but you can only disable this behaviour on iOS!

This means for Android you would either have to show some image or find some other solution if you just want to play some background sound.

For now our code looks like this and you can add it to src/pages/home/home.ts:

Of course you need to deploy this app to a real device or simulator as the Cordova plugins won’t work inside your browser preview!

But overall media streaming with Ionic seems to be doable, only if you have more specific use cases this plugin might reach its limitations.

You can also find a video version of this Quick Win below!

  • Christian Neil Anthony Wico

    How do I prevent the audio playback from stopping once the device goes on standby/sleep? I’ve tried using @ionic-native/background-mode and it doesn’t work…

  • Cesar Aparecido de Oliveira

    I try in IOS, but when I click “Start Audio” nothing happens. There is any other configuration that I have to do?