Reputation: 21
I am trying to build a video caching system like Instagram or YouTube reels. Now I facing a problem. When I play my HLS video that is on the cloud is playing fine but when I try to play them from my cache directory then it gives me an error {"error": {"extra": -2147483648, "what": 1}}.
Here I download my HLS video and its corresponding files to the cache directory
function* cacheAllReel() {
let videos: reels = yield select((state: RootState) => state.Reel.reels.find((it) => !it.isDownloaded));
const filePathArr = videos.src.split('/');
const folderUrl = videos.src.split('/').slice(0, -1).join('/');
const cachedFilePath = `${RNFS.ExternalCachesDirectoryPath}/videos/${filePathArr[filePathArr.length - 2]}`;
try {
console.log("`${cachedFilePath}/${filePathArr[filePathArr.length - 1]}`", `${cachedFilePath}/${filePathArr[filePathArr.length - 1]}`)
yield call(RNFS.mkdir, cachedFilePath);
yield call(RNFS.downloadFile, {
fromUrl: videos.src,
toFile: `${cachedFilePath}/${filePathArr[filePathArr.length - 1]}`,
background: true
});
yield call(RNFS.downloadFile, {
fromUrl: `${folderUrl}/high.m3u8`,
toFile: `${cachedFilePath}/high.m3u8`,
background: true
});
yield call(RNFS.downloadFile, {
fromUrl: `${folderUrl}/mid.m3u8`,
toFile: `${cachedFilePath}/mid.m3u8`,
background: true
});
yield call(RNFS.downloadFile, {
fromUrl: `${folderUrl}/low.m3u8`,
toFile: `${cachedFilePath}/low.m3u8`,
background: true
});
const regex = /^.*\.ts$/gm;
let lowFileContent: string = yield call(RNFS.readFile, `${cachedFilePath}/low.m3u8`, 'utf8');
let lowMatch;
while ((lowMatch = regex.exec(lowFileContent)) !== null) {
yield call(RNFS.downloadFile, {
fromUrl: `${folderUrl}/${lowMatch[0]}`,
toFile: `${cachedFilePath}/${lowMatch[0]}`,
background: true
});
}
let midFileContent: string = yield call(RNFS.readFile, `${cachedFilePath}/mid.m3u8`, 'utf8');
let midMatch;
while ((midMatch = regex.exec(midFileContent)) !== null) {
yield call(RNFS.downloadFile, {
fromUrl: `${folderUrl}/${midMatch[0]}`,
toFile: `${cachedFilePath}/${midMatch[0]}`,
background: true
});
}
let highFileContent: string = yield call(RNFS.readFile, `${cachedFilePath}/high.m3u8`, 'utf8');
let highMatch;
while ((highMatch = regex.exec(highFileContent)) !== null) {
yield call(RNFS.downloadFile, {
fromUrl: `${folderUrl}/${highMatch[0]}`,
toFile: `${cachedFilePath}/${highMatch[0]}`,
background: true
});
}
} catch (err) {
console.log('RNFS Error', err);
}
}
It downloads all files properly. And I check that playlist.m3u8 exists or not
let data = await RNFS.exists(
'/storage/emulated/0/Android/data/com.charub/cache/videos/video_1712660382226/playlist.m3u8'
);
console.log('data', data);
and it gives true
. So my m3u8
file exists.
Now in the <Video/>
section
<Video
source={{
uri: '/storage/emulated/0/Android/data/com.charub/cache/videos/video_1712660382226/playlist.m3u8'
}}
muted={muted}
repeat={true}
paused={!isCurrent}
style={{
flex: 1
}}
resizeMode={'cover'}
onLoad={(data) => console.log('loda', data)}
onError={(e) => console.log('e', e)}
/>
here it gives error {"error": {"extra": -2147483648, "what": 1}}
. But When I change the URI to cloud URL
or to its corresponding .ts
file like /storage/emulated/0/Android/data/com.charub/cache/videos/video_1712660382226/high0.ts
then it works fine. I won't understand what is happening.
Please help me out.
Upvotes: 1
Views: 168