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.


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 *