React native (Android) - 创建 URL.createObjectURL(blob)答案

【问题标题】：React native (Android) - Create URL.createObjectURL(blob)React native (Android) - 创建 URL.createObjectURL(blob)
【发布时间】：2020-12-09 12:26:11
【问题描述】：

我正在尝试创建一个 blob url 以使用字符串作为 JwPlayer 字幕文件。

字幕是这样加载的：

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

所以因为 jwplayer 不接受我的源（subtitles.ass），所以我将 .ass 转换为 .vtt，结果为字符串。

像这样：

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`;

由于 jwplayer 需要一个 url，我将此字符串转换为 blob url：

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

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

在可以工作的网络浏览器中，但在 react-native-android 中会导致错误。

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

blob error

我认为问题是生成一个blob url，有人知道我该怎么办吗？

【问题讨论】：

标签： javascript android react-native react-native-android

【解决方案1】：

我在 React Native for Android 中遇到了这个问题。以下适用于 iOS 但不适用于 Android

URL.createObjectURL(blob)

尝试传递 base64 数据而不是 url，例如 this post。

可能是这样的：

//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;
}

【讨论】：