Ionic Video Streaming

Hi All,

I am beginning to research solutions for video streaming in an ionic app. We would like to use HLS or DASH to stream to the app. It needs to be supported by Web Browsers, Android, and iOS. Is HLS still causing issues on iOS? I tried to stream a DASH video using the native @ionic-native/streaming-media, but it doesnt seem to like DASH? Any and all suggestions are much appreciated!

1 Like

I had a lot of issues doing this. Couldn’t get the native streaming player working with my videos on iOS. The videos my app uses are generated using Azure Media Services.

I attempted to use dash.js which only seemed to work with Android and web browsers. My standard video feed used a url with the format

For iOS I had to use /manifest(format=m3u8-aapl) at the end of the URL instead. After using this feed, I realised that iOS seemed to handle the streaming all by itself, since I could see the fragments being requested in the network tab. Just using <video src=""></video> did the trick on iOS.

I did attempt to use Azure Media Player for both scenarios, but it didn’t go to plan.

Not sure if this will help you at all, but this is what worked in my scenario.

1 Like

Thanks for the info Tumain! I have researched a bit more and it looks like HLS (m3u8) is the only fully compatible stream.

Have you heard of clappr?

I haven’t had time to test it yet but it looks promising.

1 Like

Ah thanks for that. Please let me know how you get on with Clappr. It’s the first time I’ve heard of it. Looks easy to implement too!

@tumain I got Clappr and Videojs to work in Ionic 3, but I will have to figure out a workaround because when you fullscreen the videos, my Tab Bar and side menu both cover the video for some stupid reason (and if you try to use ion-split-pane, in chrome the full-screen video is just a white screen. Hope this helps

Ah ok. I got mine working just with a standard video element for iOS and dash js for android. I didn’t have any fullscreen issues. My app just has a side menu though.

Hi @tumain
I am trying to use dash player in ios but its not working its working on android and web. Did you resolved that issue
Please help me

Hey I just launched my app to android and iOS and used playerJS with .m3u8 video format. I used aws elastic transcoder to convert .mp4 to .m3u8. So far it’s worked good.

For me iOS automatically handled the streaming of the video. I don’t have access to my code, but I used Azure video streaming services. I had to use the format supported by Apple. I used a different format for Android. More can be found here on the different formats:

Hey tumain,
I want to know which plugin you used for live streaming . Can you please suggest me??

Hi @krishkk.

My method was just adaptive streaming. It wasn’t live streaming.
So my methods may not help you, but I’ll mention them anyway.

It’s been a while, but from memory I used 2 different methods for iOS and Android.

For iOS I just used a standard video tag and for Android I used dash.js player.
I had to use the right kind of stream to allow the stream to work on the device’s OS.
So for iOS my stream had to be an Apple supported one (HLS) which can be seen on this link. My scenario maybe different to yours since I used Azure streaming services to stream video.

There is a streaming plugin that can be found here, that I haven’t used myself, but may be able to do what you want:

Ohk tnq but help me if you get any solution retarding to this. It will be much helpful.

Hey tumain, I’m trying to implement something very similar to what you have BUT with AES encryption… which is giving me a headache. You said that you were using HLS which means HTTP Live Streaming, but I didn’t want to do a live streaming, idk if it has anything to do with it but when I set up HLS on ios (with format=m3u8-aapl) the azure media player looks like a live streaming one rather than an on demand video (no time line, just play pause)… Do you know anything about this? Thanks in advance!!

Sorry. I’m not too sure about this. The azure media player stuff was set up by another developer. I just used the stream.