React native (Android) - Create URL.createObjectURL(blob)

Question

Im trying to create a blob url to use string as file for JwPlayer subtitles.

subtitles are loaded like this:

const playlistItem = {
    ...
    tracks: [
        {
            file: 'https://myfakesite.org/subtitles.vtt',
            label: 'en'
        }
    ]
}

So because jwplayer dont accept my source (subtitles.ass) i converted .ass to .vtt resulting as string.

Like this:

var vttRaw = `WEBVTT

00:00:25.520 --> 00:00:29.250
Naquele dia,
a humanidade foi lembrada...

00:00:35.110 --> 00:00:38.180
do terror de estar à mercê deles`;

As jwplayer needs a url, i converted this string to blob url:

//Generate blob
var blob = new Blob([vttRaw], {
    type: "text/vtt; charset=utf-8"
});

//Generate url
var vtt_url = URL.createObjectURL(blob) + "#.vtt";

In web browser that works, but in react-native-android results in a error.

Possible Unhandled Promise Rejection (id: 0):
Error: Cannot create URL for blob!

blob error

I think the problem is to generate a blob url, anyone know what can i do?

Answer 1

I had this issue in React Native for Android. The following worked in iOS but not Android

URL.createObjectURL(blob)

Try passing base64 data rather than the url, like in this post.

Maybe something like this:

//Generate blob
var blob = new Blob([vttRaw], {
    type: "text/vtt; charset=utf-8"
});

const fileReaderInstance = new FileReader();
fileReaderInstance.readAsDataURL(blob);
fileReaderInstance.onload = () => {
    base64 = fileReaderInstance.result;
    vtt_data = base64;
}