Convert m3u8 file to mp4 file in React Native Expo

Question

How can I convert m3u8 file to mp4 file in React Native Expo? I have tried to convert m3u8 file to mp4 using FFmpegKit but I have this errors:

'Cannot read property 'getLogLevel' of null' and 'Cannot read property 'ffmpegSession' of null'

Also building with this package failing (Could not determine the dependencies of task ':ffmpeg-kit-react-native:compileDebugAidl'.).

Is there a simple and easy way to convert m3u8 file in React Native Expo?

Code I have used:

import { FFmpegKit } from 'ffmpeg-kit-react-native';
export async function converterToMp4() {
    try {
        await FFmpegKit.executeAsync(`-i ${m3u8FileUri} ${mp4FileUri}`)

    } catch(err) {
        console.log(err)
    }
}

Answer 1

I got it using this code...

import { Parser as HLSParser } from "m3u8-parser";
import { FFmpegKit } from "ffmpeg-kit-react-native";


const parser = new HLSParser();

        parser.push(res);
        parser.end();

        const pathUri = securityPath(); // This is central function to inform the path
        const pathUriM3u8 = securityPath(data?.name, ".m3u8");
        const pathUriMp4 = securityPath(data?.name, ".mp4");
        const tsUrls: M3u8ParserTypes.Segments[] = parser?.manifest?.segments;
        const baseTsFilesUrl = videoUrlPanda.split("/")?.slice(0, -1)?.join("/");

        const downloadResumable = FileSystem.createDownloadResumable(videoUrlPanda, pathUriM3u8, {
          headers: {
            Referer: "some-referer",
          },
        });
        await downloadResumable.downloadAsync();

        await Promise.all(
          tsUrls.map(async (item) => {
            const downloadResumableTsFiles = FileSystem.createDownloadResumable(
              `${baseTsFilesUrl}/${item?.uri}`,
              pathUri + item?.uri,
              {
                headers: {
                  Referer: "some-referer",
                },
              }
            );
            await downloadResumableTsFiles.downloadAsync();
          })
        ).catch((err) => {
          throw new Error("Failed to download ts files", err);
        });

        const ffmpegSession = await FFmpegKit.execute(
          `-i ${pathUriM3u8} -c:v mpeg4 -y ${pathUriMp4}`
        );
        await ffmpegSession.getReturnCode();

Some dependencies:

  "@ffmpeg/ffmpeg": "^0.12.10",
  "@ffmpeg/util": "^0.12.1",
  "@config-plugins/ffmpeg-kit-react-native": "^7.0.0",
  "m3u8-parser": "^7.1.0",
  "ffmpeg-kit-react-native": "^6.0.2",

And add this in your app.json plugins:

"@config-plugins/ffmpeg-kit-react-native"

If you get error probably you will need to install expo-build-properties and add to app.json plugins

Got it this using SDK 49 and remember to rebuild

Hope it helps