Ionic Video Streaming

#1

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
#2

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 https://videourl.com/manifest(format=mpd-time-csf).

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="https://videourl.com/manifest(format=m3u8-aapl)"></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
#3

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? https://github.com/clappr/clappr/blob/master/doc/SUPPORTED_FORMATS.md

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

1 Like
#4

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!

#5

@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

#6

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.

#7

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

#8

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.

#9

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: https://docs.microsoft.com/en-us/azure/media-services/previous/media-services-deliver-content-overview#a-idurlsstreaming-url-formats.