Skip to content

React Native

Taner Şener edited this page Dec 19, 2021 · 3 revisions
  1. Install ffmpeg-kit-react-native package by yarn add or npm install.

    yarn add ffmpeg-kit-react-native
    • Installing ffmpeg-kit-react-native enables the https package by default. It is possible to enable other packages using the instructions below.

      Android: Edit android/build.gradle file and add the package name in ext.ffmpegKitPackage variable.

      ext {
          ffmpegKitPackage = "<package name>"
      }
      

      iOS: Edit ios/Podfile file and add the package name as subspec. After that run pod install again.

      pod 'ffmpeg-kit-react-native', :subspecs => ['<package name>'], :podspec => '../node_modules/ffmpeg-kit-react-native/ffmpeg-kit-react-native.podspec'
  2. Execute FFmpeg commands.

    import { FFmpegKit } from 'ffmpeg-kit-react-native';
    
    FFmpegKit.executeAsync('-i file1.mp4 -c:v mpeg4 file2.mp4', async (session) => {
      const returnCode = await session.getReturnCode();
    
      if (ReturnCode.isSuccess(returnCode)) {
    
        // SUCCESS
    
      } else if (ReturnCode.isCancel(returnCode)) {
    
        // CANCEL
    
      } else {
    
        // ERROR
    
      }
    });
  3. Each execute call creates a new session. Access every detail about your execution from the session created.

    FFmpegKit.executeAsync('-i file1.mp4 -c:v mpeg4 file2.mp4').then(async (session) => {
    
      // Unique session id created for this execution
      const sessionId = session.getSessionId();
    
      // Command arguments as a single string
      const command = session.getCommand();
    
      // Command arguments
      const commandArguments = session.getArguments();
    
      // State of the execution. Shows whether it is still running or completed
      const state = await session.getState();
    
      // Return code for completed sessions. Will be undefined if session is still running or FFmpegKit fails to run it
      const returnCode = await session.getReturnCode()
    
      const startTime = session.getStartTime();
      const endTime = await session.getEndTime();
      const duration = await session.getDuration();
    
      // Console output generated for this execution
      const output = await session.getOutput();
    
      // The stack trace if FFmpegKit fails to run a command
      const failStackTrace = await session.getFailStackTrace()
    
      // The list of logs generated for this execution
      const logs = await session.getLogs();
    
      // The list of statistics generated for this execution (only available on FFmpegSession)
      const statistics = await session.getStatistics();
    
    });
  4. Execute FFmpeg commands by providing session specific execute/log/session callbacks.

    FFmpegKit.executeAsync('-i file1.mp4 -c:v mpeg4 file2.mp4', session => {
    
      // CALLED WHEN SESSION IS EXECUTED
    
    }, log => {
    
      // CALLED WHEN SESSION PRINTS LOGS
    
    }, statistics => {
    
      // CALLED WHEN SESSION GENERATES STATISTICS
    
    });
  5. Execute FFprobe commands.

    FFprobeKit.executeAsync(ffprobeCommand, session => {
    
      // CALLED WHEN SESSION IS EXECUTED
    
    });
  6. Get media information for a file/url.

    FFprobeKit.getMediaInformationAsync('<file path or url>', async (session) => {
      const information = await session.getMediaInformation();
    });
  7. Stop ongoing FFmpeg operations.

  • Stop all sessions
    FFmpegKit.cancel();
  • Stop a specific session
    FFmpegKit.cancel(sessionId);
  1. (Android) Convert Storage Access Framework (SAF) Uris into paths that can be read or written by FFmpegKit and FFprobeKit.
  • Reading a file:

    FFmpegKitConfig.selectDocumentForRead('*/*').then(uri => {
        FFmpegKitConfig.getSafParameterForRead(uri).then(safUrl => {
            FFmpegKit.executeAsync(`-i ${safUrl} -c:v mpeg4 file2.mp4`);
        });
    });
  • Writing to a file:

    FFmpegKitConfig.selectDocumentForWrite('video.mp4', 'video/*').then(uri => {
        FFmpegKitConfig.getSafParameterForWrite(uri).then(safUrl => {
            FFmpegKit.executeAsync(`-i file1.mp4 -c:v mpeg4 ${safUrl}`);
        });
    });
  1. Get previous FFmpeg and FFprobe sessions from the session history.

    FFmpegKit.listSessions().then(sessionList => {
      sessionList.forEach(async session => {
        const sessionId = session.getSessionId();
      });
    });
    
    FFprobeKit.listSessions().then(sessionList => {
      sessionList.forEach(async session => {
        const sessionId = session.getSessionId();
      });
    });
  2. Enable global callbacks.

  • Execute Callback, called when an async execution is ended

    FFmpegKitConfig.enableExecuteCallback(session => {
      const sessionId = session.getSessionId();
    });
  • Log Callback, called when a session generates logs

    FFmpegKitConfig.enableLogCallback(log => {
      const message = log.getMessage();
    });
  • Statistics Callback, called when a session generates statistics

    FFmpegKitConfig.enableStatisticsCallback(statistics => {
      const size = statistics.getSize();
    });
  1. Register system fonts and custom font directories.

    FFmpegKitConfig.setFontDirectoryList(["/system/fonts", "/System/Library/Fonts", "<folder with fonts>"]);
Clone this wiki locally