Playing .m3u8 video from Firebase Storage in Flutter

Question

I have .m3u8 master file and its parts stored in a folder in Firebase Storage. How do I play this video in flutter app?

Usecase: I have a TikTok-like UI, where each video is a document in Firestore. In each document I have link to master.m3u8 file stored in Firebase Storage.

I tried out this .m3u8 link: https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8 and it works fine with video_player.

Sample link to my master.m3u8 file: https://firebasestorage.googleapis.com/v0/b/example.appspot.com/o/videos%2F10-31%2F1604100430027grBzLN0d9BQk0QtoTf9TWNe2ps02%2Fmaster.m3u8?alt=media&token=<token_goes_here>

Video Files:

EDIT:

I have tried using chewie as mentioned here along with video_player package., It gives me error as follows:

E/ExoPlayerImplInternal(32708): Source error.
E/ExoPlayerImplInternal(32708): com.google.android.exoplayer2.upstream.HttpDataSource$InvalidResponseCodeException: Response code: 403
E/ExoPlayerImplInternal(32708):     at com.google.android.exoplayer2.upstream.DefaultHttpDataSource.open(DefaultHttpDataSource.java:300)
E/ExoPlayerImplInternal(32708):     at com.google.android.exoplayer2.upstream.StatsDataSource.open(StatsDataSource.java:83)
E/ExoPlayerImplInternal(32708):     at com.google.android.exoplayer2.upstream.DataSourceInputStream.checkOpened(DataSourceInputStream.java:102)
E/ExoPlayerImplInternal(32708):     at com.google.android.exoplayer2.upstream.DataSourceInputStream.open(DataSourceInputStream.java:65)
E/ExoPlayerImplInternal(32708):     at com.google.android.exoplayer2.upstream.ParsingLoadable.load(ParsingLoadable.java:156)
E/ExoPlayerImplInternal(32708):     at com.google.android.exoplayer2.upstream.Loader$LoadTask.run(Loader.java:381)
E/ExoPlayerImplInternal(32708):     at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
E/ExoPlayerImplInternal(32708):     at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
E/ExoPlayerImplInternal(32708):     at java.lang.Thread.run(Thread.java:919)

Content of my .m3u8 file:

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:BANDWIDTH=2410843,RESOLUTION=1080x1920,CODECS="avc1.42c02a,mp4a.40.2"
1604145635522grBzLN0d9BQk0QtoTf9TWNe2ps02%2F?alt=media

#EXT-X-STREAM-INF:BANDWIDTH=612343,RESOLUTION=1080x1920,CODECS="avc1.42c02a,mp4a.40.2"
1604145635522grBzLN0d9BQk0QtoTf9TWNe2ps02%2F1_playlistVariant.m3u8?alt=media

where 1604145635522grBzLN0d9BQk0QtoTf9TWNe2ps02 is the folder name inside which 0_playlistVariant.m3u8 and 1_playlistVariant.m3u8 files are stored. Do I need to change these lines?

I am following this guide for creating a video sharing app in Flutter.

Any help or direction will be appreciated.

Thanks.

Solution

Problem solved by changing security rules for Firebase Storage to allow read and writes. I can play videos with the url to master.m3u8 file via video_player package in flutter.

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read; allow write;
    }
  }
}

Although this is a partial solution since database can be accessed by anyone.

Comments

[chiliNUT]

Does this answer your question? How to Play M3U8 Format Android & iOS on Flutter

[Ibrahim Broachwala]

No it did not, I have updated my question with more details of the error after using the solution you suggested.

[Rishin Ali]

Have you found a solution?