Ayan Das
Ayan Das

Reputation: 21

HLS Video on local cache directory is not playing in React Native Android

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

Answers (0)

Related Questions