Video Player HLS(m3u8) video error - VideoError, Video player had error com.google.android.exoplayer2.ExoPlaybackException: Source error, null, null

[BrianTum]

trafficstars

Hey I'm trying to fetch for an HLS (.m3u8) video from Firebase Firestore with the following URL sample https://firebasestorage.googleapis.com/v0/b/picmoni-6e741.appspot.com/o/Stories%2FVideos%2F5cc5ff96-223b-4e9a-8308-cd98fac98830%2Fmaster.m3u8?alt=media&token=1fd5da08-f374-4909-84fd-cea93b056fe0

I use the flutters video player to get and play the video as follows

if (combinedList[selectedIndex].media == 'Video') {
      _videoController = VideoPlayerController.network(
          combinedList[selectedIndex].content,
          formatHint: VideoFormat.hls);
      _videoController.initialize().then((_) {
        setState(() {});
        _animController.duration = _videoController.value.duration;
        _videoController.play();
        _animController.forward();
      });
      _videoController.addListener(() {
        if (_videoController.value.hasError) {
          print(_videoController.value.errorDescription);
        }
        if (_videoController.value.initialized) {}
        if (_videoController.value.isBuffering) {}
      });
    }

return Scaffold(
  body: Container(
    color: Colors.red,
    child: Center(
      child: AspectRatio(
        aspectRatio: _videoController
            .value.aspectRatio,
        child: VideoPlayer(_videoController),
      ),
    ),
  ),
);

Here is the error I get from the debug console:

D/ViewRootImpl@34419c1[MainActivity](27998): ViewPostIme pointer 0
D/ViewRootImpl@34419c1[MainActivity](27998): ViewPostIme pointer 1
I/ExoPlayerImpl(27998): Init e289076 [ExoPlayerLib/2.12.2] [a50, SM-A505F, samsung, 29]
12
I/System.out(27998): (HTTPLog)-Static: isSBSettingEnabled false
E/ExoPlayerImplInternal(27998): Playback error
E/ExoPlayerImplInternal(27998):   com.google.android.exoplayer2.ExoPlaybackException: Source error
E/ExoPlayerImplInternal(27998):       at com.google.android.exoplayer2.ExoPlayerImplInternal.handleMessage(ExoPlayerImplInternal.java:554)
E/ExoPlayerImplInternal(27998):       at android.os.Handler.dispatchMessage(Handler.java:103)
E/ExoPlayerImplInternal(27998):       at android.os.Looper.loop(Looper.java:237)
E/ExoPlayerImplInternal(27998):       at android.os.HandlerThread.run(HandlerThread.java:67)
E/ExoPlayerImplInternal(27998):   Caused by: com.google.android.exoplayer2.upstream.HttpDataSource$InvalidResponseCodeException: Response code: 404
E/ExoPlayerImplInternal(27998):       at com.google.android.exoplayer2.upstream.DefaultHttpDataSource.open(DefaultHttpDataSource.java:341)
E/ExoPlayerImplInternal(27998):       at com.google.android.exoplayer2.upstream.StatsDataSource.open(StatsDataSource.java:84)
E/ExoPlayerImplInternal(27998):       at com.google.android.exoplayer2.upstream.DataSourceInputStream.checkOpened(DataSourceInputStream.java:101)
E/ExoPlayerImplInternal(27998):       at com.google.android.exoplayer2.upstream.DataSourceInputStream.open(DataSourceInputStream.java:64)
E/ExoPlayerImplInternal(27998):       at com.google.android.exoplayer2.upstream.ParsingLoadable.load(ParsingLoadable.java:177)
E/ExoPlayerImplInternal(27998):       at com.google.android.exoplayer2.upstream.Loader$LoadTask.run(Loader.java:415)
E/ExoPlayerImplInternal(27998):       at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
E/ExoPlayerImplInternal(27998):       at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
E/ExoPlayerImplInternal(27998):       at java.lang.Thread.run(Thread.java:919)
I/flutter (27998): Video player had error com.google.android.exoplayer2.ExoPlaybackException: Source error
E/flutter (27998): [ERROR:flutter/lib/ui/ui_dart_state.cc(184)] Unhandled Exception: PlatformException(VideoError, Video player had error com.google.android.exoplayer2.ExoPlaybackException: Source error, null, null)
E/flutter (27998):

Here is the flutter doctor - v

$ flutter doctor -v
[√] Flutter (Channel master, 1.26.0-2.0.pre.84, on Microsoft Windows [Version 10.0.19042.685], locale en-US)
    • Flutter version 1.26.0-2.0.pre.84 at C:\flutter
    • Framework revision cda1fae6b6 (3 days ago), 2020-12-18 04:04:02 -0500
    • Engine revision 1be6f414e7
    • Dart version 2.12.0 (build 2.12.0-166.0.dev)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at C:\Users\USER\AppData\Local\Android\Sdk
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = C:\Users\USER\AppData\Local\Android\Sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 4.1.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] VS Code (version 1.52.1)
    • VS Code at C:\Users\USER\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.17.0

[√] Connected device (3 available)
    • SM A505F (mobile) • RZ8MB0906JE • android-arm64  • Android 10 (API 29)
    • Chrome (web)      • chrome      • web-javascript • Google Chrome 87.0.4280.88
    • Edge (web)        • edge        • web-javascript • Microsoft Edge 87.0.664.66

• No issues found!

And here is a minimal reproducible code of the error with flutter run -v

[+1212 ms] D/ViewRootImpl@98401f2[MainActivity]( 2600): ViewPostIme pointer 0
[  +56 ms] D/ViewRootImpl@98401f2[MainActivity]( 2600): ViewPostIme pointer 1
[ +317 ms] W/android.picmon( 2600): Accessing hidden method Landroid/media/AudioTrack;->getLatency()I (greylist, reflection, allowed)
[  +16 ms] I/ExoPlayerImpl( 2600): Init 7d36bdb [ExoPlayerLib/2.12.2] [a50, SM-A505F, samsung, 29]
[  +81 ms] I/System.out( 2600): (HTTPLog)-Static: isSBSettingEnabled false
[   +3 ms] I/System.out( 2600): (HTTPLog)-Static: isSBSettingEnabled false
[+1813 ms] I/System.out( 2600): (HTTPLog)-Static: isSBSettingEnabled false
[   +9 ms] I/System.out( 2600): (HTTPLog)-Static: isSBSettingEnabled false
[ +577 ms] I/System.out( 2600): (HTTPLog)-Static: isSBSettingEnabled false
[  +16 ms] I/System.out( 2600): (HTTPLog)-Static: isSBSettingEnabled false
[ +326 ms] I/System.out( 2600): (HTTPLog)-Static: isSBSettingEnabled false
[   +5 ms] I/System.out( 2600): (HTTPLog)-Static: isSBSettingEnabled false
[+1536 ms] I/System.out( 2600): (HTTPLog)-Static: isSBSettingEnabled false
[  +27 ms] I/System.out( 2600): (HTTPLog)-Static: isSBSettingEnabled false
[+2257 ms] I/System.out( 2600): (HTTPLog)-Static: isSBSettingEnabled false
[ +141 ms] I/System.out( 2600): (HTTPLog)-Static: isSBSettingEnabled false
[ +240 ms] E/ExoPlayerImplInternal( 2600): Playback error
[   +4 ms] E/ExoPlayerImplInternal( 2600):   com.google.android.exoplayer2.ExoPlaybackException: Source error
[  +64 ms] E/ExoPlayerImplInternal( 2600):       at com.google.android.exoplayer2.ExoPlayerImplInternal.handleMessage(ExoPlayerImplInternal.java:554)
[   +2 ms] E/ExoPlayerImplInternal( 2600):       at android.os.Handler.dispatchMessage(Handler.java:103)
[   +1 ms] E/ExoPlayerImplInternal( 2600):       at android.os.Looper.loop(Looper.java:237)
[   +1 ms] E/ExoPlayerImplInternal( 2600):       at android.os.HandlerThread.run(HandlerThread.java:67)
[        ] E/ExoPlayerImplInternal( 2600):   Caused by: com.google.android.exoplayer2.upstream.HttpDataSource$InvalidResponseCodeException: Response code: 404
[   +1 ms] E/ExoPlayerImplInternal( 2600):       at com.google.android.exoplayer2.upstream.DefaultHttpDataSource.open(DefaultHttpDataSource.java:341)
[        ] E/ExoPlayerImplInternal( 2600):       at com.google.android.exoplayer2.upstream.StatsDataSource.open(StatsDataSource.java:84)
[  +39 ms] E/ExoPlayerImplInternal( 2600):       at com.google.android.exoplayer2.upstream.DataSourceInputStream.checkOpened(DataSourceInputStream.java:101)
[   +1 ms] E/ExoPlayerImplInternal( 2600):       at com.google.android.exoplayer2.upstream.DataSourceInputStream.open(DataSourceInputStream.java:64)
[   +1 ms] E/ExoPlayerImplInternal( 2600):       at com.google.android.exoplayer2.upstream.ParsingLoadable.load(ParsingLoadable.java:177)
[        ] E/ExoPlayerImplInternal( 2600):       at com.google.android.exoplayer2.upstream.Loader$LoadTask.run(Loader.java:415)
[        ] E/ExoPlayerImplInternal( 2600):       at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
[        ] E/ExoPlayerImplInternal( 2600):       at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
[   +1 ms] E/ExoPlayerImplInternal( 2600):       at java.lang.Thread.run(Thread.java:919)
[        ] I/flutter ( 2600): Video player had error com.google.android.exoplayer2.ExoPlaybackException: Source error
[        ] E/flutter ( 2600): [ERROR:flutter/lib/ui/ui_dart_state.cc(184)] Unhandled Exception: PlatformException(VideoError, Video player had error
com.google.android.exoplayer2.ExoPlaybackException: Source error, null, null)
[   +1 ms] E/flutter ( 2600): 

Your help will be highly appreciated

[BrianTum]

How should I also update the HLS playlist URLs when I store files as follows in the stories folder in videos folder? as shown below

Future<String> _uploadFile(filePath, folderName) async {
    final file = new File(filePath);
    final basename = p.basename(filePath);
    String videoUrl;

    final Reference ref = FirebaseStorage.instance
        .ref()
        .child('Stories')
        .child('/Videos')
        .child(folderName)
        .child(basename);
    UploadTask uploadTask = ref.putFile(file);

    uploadTask.snapshotEvents.listen((TaskSnapshot snapshot) {
      final double progress = snapshot.bytesTransferred / snapshot.totalBytes;
      setState(() {
        _progress = progress;
      });
    });

The code to update playlist URLs as follows

 void _updatePlaylistUrls(File file, String videoName) {
    final lines = file.readAsLinesSync();
    List<String> updatedLines = [];

    for (final String line in lines) {
      var updatedLine = line;
      if (line.contains('.ts') || line.contains('.m3u8')) {
        updatedLine = '$videoName%2F$line?alt=media';
      }
      updatedLines.add(updatedLine);
    }
    final updatedContents =
        updatedLines.reduce((value, element) => value + '\n' + element);

    file.writeAsStringSync(updatedContents);
  }

Here is a screenshot of my Firestore file storage

[syonip]

Hi @BrianTum , As for the first issue, you're getting a 404 error from exoplayer:

E/ExoPlayerImplInternal(27998):   Caused by: com.google.android.exoplayer2.upstream.HttpDataSource$InvalidResponseCodeException: Response code: 404

Trying to go to the link for your video, you get a 404 from the browser, so the url is broken: https://firebasestorage.googleapis.com/v0/b/picmoni-6e741.appspot.com/o/Stories%2FVideos%2F5cc5ff96-223b-4e9a-8308-cd98fac98830%2Fmaster.m3u8?alt=media&token=1fd5da08-f374-4909-84fd-cea93b056fe0

To check what the correct url should be, you can get the download link of the file from firebase console, then compare it to your url.

[BrianTum]

Thank you @syonip for your feedback. I found the solution. Problem was on updating the HLS files. I store the file in Subdolders in Firebase Storage i.e. inside videos in stories folders and so I had to rename my HLS files to fetch from these folders i.e.

updatedLine = 'Stories%2FVideos%2F$videoName%2F$line?alt=media';

It's still slow in fetching the videos... Any idea of how to improve video performance?

[syonip]

The performance is a combination of many factors, so I would try to isolate the problem by performing tests:

• You can test the serving itself using an online hls tester, try googling "test hls stream".
• If the stream loads fast in the testers, the problem could be in your player. Test it with a sample app of exoplayer native (no flutter).
• Test a firebase file that's not hls, does that work fast?
• Test serving a test HLS stream that's not yours, within your flutter app, is that fast?

These test can help you figure out where the problem is.

[ffriande]

Hey @syonip and @BrianTum , maybe you can help me figure out what's wrong with my project. My files either are not accessible, or are malformed.

I can access them freely, though, and paths seem to be right, so I can't pinpoint the issue...

Here is a screenshot of the bucket

Here is the link to the master file

https://firebasestorage.googleapis.com/v0/b/test-a5584.appspot.com/o/video_stream%2Fvideo1%2Fmaster.m3u8?alt=media