bug: Serving local videos occasionally fails on Android

[brospars]

Bug Report

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 4.4.0
  @capacitor/core: 4.4.0
  @capacitor/android: 4.4.0
  @capacitor/ios: 4.4.0

Installed Dependencies:

  @capacitor/cli: 3.5.1
  @capacitor/core: 3.5.1
  @capacitor/android: 3.5.1
  @capacitor/ios: 3.5.1

[success] iOS looking great! 👌
[success] Android looking great! 👌

Platform(s)

Android

Current Behavior

On iOS : the video plays without a problem.
On Android : the video plays but we get a network error from time to time that stop the video and "crashes" the player (we have to change page and come back to replay it again). Sometimes the video won't play at all.

GET http://localhost/_capacitor_file_/data/user/0/com.myapp/files/videoXYZ.mp4 net::ERR_FAILED

Expected Behavior

The video play thoroughly on android.

Code Reproduction

We use a html5 video player in an Ionic/Angular app to play local video like such:

<video *ngIf="src" #video  disablePictureInPicture playsinline preload="auto" [src]="src"></video>

Where srcis set using an input : Capacitor.convertFileSrc('video/videoXYZ.mp4')

@Component({
  selector: 'video-player',
  templateUrl: './video-player.component.html',
  styleUrls: ['./video-player.component.scss'],
})
export class VideoPlayerComponent implements OnInit, AfterViewInit {

    @ViewChild('video', {static: false}) videoRef: ElementRef;

    @Input() src: string;

    // ...
}

Other Technical Details

We can have multiple videos on the same page. And the bug seems to happen more often when we seek through multiple videos quickly.

npm --version output: 8.7.0

node --version output: v14.19.0

[Ionitron]

This issue may need more information before it can be addressed. In particular, it will need a reliable Code Reproduction that demonstrates the issue.

Please see the Contributing Guide for how to create a Code Reproduction.

Thanks!
Ionitron 💙

[brospars]

Here is an example : https://github.com/brospars/bugvid

Exact same bug on android emulator and real device. Sometimes videos load properly sometimes I get GET http://localhost/_capacitor_file_/data/user/0/com.myapp/files/videoXYZ.mp4 net::ERR_FAILED

Edit: Sometimes I don't get the net::ERR_FAILED but the video play/pause instalty and I get this error in logcat:

2022-10-24 14:50:53.877 31853-31891/io.ionic.starter E/chromium: [ERROR:android_image_reader_utils.cc(19)] Failed to create android native fence sync object.
2022-10-24 14:50:53.877 31853-31891/io.ionic.starter E/EGL_emulation: tid 31891: eglCreateSyncKHR(2095): error 0x3004 (EGL_BAD_ATTRIBUTE)

[brospars]

Just for the sake of it I upgraded to the latest versions of everything on the v4 branch: https://github.com/brospars/bugvid/tree/v4

The bug is still present on Android emulator (Pixel 4 API 29) and real devices, it's not happening everytime but after closing/reopening the app multiple time (once the download has ended) I get:

Edit: sorry I'm adding stuff while I'm debugging WebViewLocalServer.java, when the error occur I am getting WebResourceResponseheaders that seem wrong

// Range seems wrong : 1055736-1055735 => video bug
{Accept-Ranges=bytes, Cache-Control=no-cache, Content-Range=bytes 1055736-1055735/1055736}
// Range is correct : 0-1589247 => video works
{Accept-Ranges=bytes, Cache-Control=no-cache, Content-Range=bytes 0-1589247/1589248}

This makes me think it could be coming from this part of the code : https://github.com/ionic-team/capacitor/blob/main/android/capacitor/src/main/java/com/getcapacitor/WebViewLocalServer.java#L202-L232

[jcesarmobile]

Thanks for the sample app, but I can't reproduce.
Can you provide more information?
What's the WebView version of the devices/emulators where you have tested?
Where you say "after closing/reopening the app multiple time", do you mean killing it and reopening or just putting it into the background?

[brospars]

Hi,
Thanks for taking your time testing it. I use Android Pixel 4 emulator with API 29 and a real device a Nokia 6.1 on Android 10.

I mean shutting it off and on using Android Studio. And sometimes the video won't start and you can see network errors in crime dev tools.

I've also added breakpoints when the range is wrong (like shown in my previous comment) but with no luck the response go through and end up in chrome WebView native code that I can't debug.

[jcesarmobile]

I'm asking for the WebView version, not the Android version, it's the version you can see in chrome://inspect/#devices between brackets, i.e. for me it's 91.0.4472.114

WebView in io.ionic.starter (91.0.4472.114).

The "shutting it off and on using Android Studio" is even more confusing.

[brospars]

Sorry I misread your comment. I have the same version for the emulator 91.0.4472.114 and 106.0.5249.126 for my device.

[FONAU]

@brospars Did you manage to solve this issue? I'm getting the same behavior but with local audio files

[brospars]

@FONAU I ended up not using the html5 video element for Android but instead a native video player plugin : https://github.com/jepiqueau/capacitor-video-player
It's not ideal (way less customization, mandatory fullscreen, etc) but at least it works everytime...