How to make HTML video elements buffer assets loaded with AssetManager

130 views Asked by At

I am currently creating an App with Ionic. Because App Bundle sizes in the Google Playstore are limited to 150 MB I am using Play Asset Delivery to load bigger Assets like Images and Videos.

I use Angulars typescript to interact with the HTML, but to load the Aasets I need to use java to access the Androids Platform API like AssetManager. To achieve that I wrote a Cordova plugin.

Java code of the plugin that loads and proccesses one asset:

String str = "";
Context contexta = this.cordova.getActivity().getApplicationContext();
AssetManager assetManager = contexta.getAssets();
InputStream is = assetManager.open(path);
byte[] imageBytes = new byte[is.available()];//available() gives the required size for the array
is.read(imageBytes, 0,imageBytes.length);
is.close();
str = Base64.encodeToString(imageBytes, Base64.DEFAULT);
callbackContext.success(str); //str gets passed to the typescript callback function

The callback function in typescript looks like this:

(imgData) => { //parameter str is send by callbackContext.success() in the java code
    imgElement.src = "data:image/png;base64,"+imgData; //HTML img element
}

(The HTML element can not access the Assets with a path e.g. src="assets/img1.png" they need to be loaded via java)

This code works fine. But the Problem is that even bigger assets like a 50 MB video would need to be loaded entirely and then send as a base64 encoded data string which is going to take a lot of time.

Afaik the HTML video and audio elements use a buffer to only load the important parts first to start the media as soon as possible and without taking up too much memory.

Is there any way to do this? Maybe somehow sending the video element to the java plugin which binds it with a buffer connection, or calling the plugin every few frames calling for another part of the video (kindof like creating a own buffer). Can you help me out with this problem?

(The AssetsManager open method uses access mode ACCESS_STREAMING by default. There are three more one of which is called ACCESS_BUFFER.)

Android SDK Tools : 26.1.1
NodeJS            : v12.18.3
npm               : 6.14.6
OS                : Windows 10
Gradle            : 6.6.1
Ionic Framework   : @ionic/angular 5.3.3
Cordova Platforms : android 9.0.0
@angular-devkit/build-angular : 0.1000.8
@angular-devkit/schematics    : 10.0.8
@angular/cli                  : 10.0.8
@ionic/angular-toolkit        : 2.3.3
0

There are 0 answers