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…

    • Rafael Augusto Costalonga

      Hi, did you get it?

      • Christian Neil Anthony Wico

        I ditched this plugin altogether as it seems it is no longer being maintained. I’m using HTML5 Audio in my app now and it works in the background on Android (no extra configs needed). It also works on iOS but you need to use a background-audio plugin and enable Background Mode from the Info.plist.

  • 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?

  • Abhijeet Nigoskar

    Its not working in Android 7 version , it gives Error: MediaPlayer Error: Unknown (1) -2147483648

    • Nsamba Isaac

      I had the same Error and it was URL/API that had Issues. could you check that

  • Abhishek Pandya

    I want to play live streaming video, can any one help me?

  • Rijwan Mohmmed

    hello sir,
    in this player how to set progress bar ,audio duration,current duration

  • sudesh goyat

    how can we play any type of video url in ionic2

  • Sanchit Mahajan

    How to upload video to server? and then fetch that video and stream in video player ?

  • Anbarasan R

    [13:41:45] tslint: C:/mediaStreaming/src/pages/home/home.ts, line: 2
    All imports are unused.

    L1: import { Component } from ‘@angular/core’;
    L2: import { NavController } from ‘ionic-angular’;
    L3: import { StreamingMedia, StreamingVideoOptions, StreamingAudioOption
    s } from ‘@ionic-native/streaming-media’;

    I got this error and also video doen’t play.. Any solution there.