Ionic Media Streaming (Video & Audio) [v3]

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.

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


ionic-academy-start

You must be a Member to view this Quick Win

Access all courses and lessons, track your progress, connect with Developers & build awesome Ionic Apps.

Read Next..

Upgrade to Ionic Native 3 Upgrading the Ionic Native package inside your Ionic app involves only a few steps, and the rewards are a smaller app package size and ability to run ...
Ionic Image Loading and Caching If your app works with some kind of API and needs to display remote images you will most likely end up thinking about caching either your requests or ...
Ionic Native Page Transitions for iOS and Android The standard Ionic page transitions already look very decent compared to older Cordova apps from some years ago. However, if you want some more typica...

Read Next..

Ionic Side Menu With Multiple Tab Bars The questions about the navigation patterns side menu and tab bar never end, especially how they can both work together (friendly). Therefore today we...
Ionic Caching Service By default your Ionic app comes without specific HTTP caching, but sometimes it can really make sense to cache your requests for a duration to make he...
Building an Ionic Image Gallery With Zoom The Ionic image gallery is a classic pattern used in many applications which need to display any kind of grid with pictures or photos to the user. If ...

Comments on Ionic Media Streaming (Video & Audio) [v3]

  1. Christian Neil Anthony Wico says:

    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…

    1. Rafael Augusto Costalonga says:

      Hi, did you get it?

      1. Christian Neil Anthony Wico says:

        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.

        1. Abba Ahmad says:

          May I get a sample code please?
          abbaahmad14@yahoo.com

        2. Kishan Oza says:

          may i get the sample on ionic.fiverr@gmail.com

        3. Christian Neil Anthony Wico says:

          https://www.w3schools.com/html/html5_audio.asp
          It’s as simple as can be.

          1. Sidious says:

            Thanks dude. The HTML5 audio function works waaaay better than this plugin.

  2. Cesar Aparecido de Oliveira says:

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

  3. Abhijeet Nigoskar says:

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

    1. Nsamba Isaac says:

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

      1. Atif Rehman says:

        Same issue. when I open url in browser it’s opening video

  4. Abhishek Pandya says:

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

  5. Rijwan Mohmmed says:

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

  6. sudesh goyat says:

    how can we play any type of video url in ionic2

  7. Sanchit Mahajan says:

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

  8. Anbarasan R says:

    [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.

  9. lou says:

    Hello, is it possible to put some content in front of the video like this : https://i.imgur.com/BpUhh3B… ?

  10. Francisco Vieira says:

    Totally nonsense this audio player on the full screen

  11. Llorenç Vaquer says:

    Hello!!

    I’m struggling to import the dependency in my project with last ionic 4 version.

    After include the dependency in app.module.ts
    import { StreamingMedia } from ‘@ionic-native/streaming-media’;
    ….
    providers: [
    StatusBar,
    SplashScreen,
    StreamingMedia
    …..
    ]

    I have this error:
    [ng] ERROR in src/app/app.module.ts(50,5): error TS2322: Type ‘StreamingMediaOriginal’ is not assignable to type ‘Provider’.
    [ng] Type ‘StreamingMediaOriginal’ is not assignable to type ‘ClassProvider’.
    [ng] Property ‘provide’ is missing in type ‘StreamingMediaOriginal’.

    Any solution there. Thanks in advace

    1. For Ionic 4 you need to add /ngx to the imports of Ionic Native packages, see here: https://ionicframework.com/docs/native

      1. Llorenç Vaquer says:

        Thank you!

        Still getting use to new version.

Leave a Reply

Your email address will not be published. Required fields are marked *