DOCSEARCHbyAlgolia
Submit Docs

react-native-video-trim

repository·master·Indexed 41 days ago

https://github.com/maitrungduc1410/react-native-video-trim

A professional-grade video and audio trimming library for React Native supporting iOS and Android. Version 8.2.2 provides a high-level UI editor via showEditor() and headless APIs for advanced tasks including programmatic trimming, video compression, merging multiple clips, audio mixing, frame extraction, and GIF conversion.

Tokens
12.9K
Snippets
44
Records
53
Agent score
51%

What's inside react-native-video-trim

  1. Understand Android encoder fallback behavior

    master

    On some Android devices, the hardware H.264 encoder (h264_mediacodec) may fail to configure. The library automatically handles this via a transparent three-step fallback chain:

    1. h264_mediacodec: Default hardware H.264. Fast, keeps source resolution.
    2. hevc_mediacodec: Hardware H.265/HEVC. Used if H.264 fails. Includes -tag:v hvc1 for iOS compatibility.
    3. mpeg4 -q:v 3: Software MPEG-4 Part 2. Guaranteed to work but lower quality. Note: Output is downscaled to a maximum long side of 1280px to ensure compatibility with Android software decoders.

    Monitoring Fallbacks:

    • Logs are emitted via onLog (tag VideoTrimmerUtil) as Encoder selected: <name>, etc.
    • If a hardware fallback occurs, a notice is emitted: Hardware encoder failed; retrying with software encoder fallback.
    • If all attempts fail during showEditor save, onError is emitted with errorCode: "HARDWARE_ENCODER_FAILED".

  3. Quick Start with showEditor()

    master

    The primary way to use the library is via the showEditor() method, which opens a professional video editor UI.

    Basic usage patterns include:

    • Opening the editor with a video URL.
    • Limiting the maximum duration of the clip.
    • Configuring save options like saving directly to Photos or opening the system Share Sheet upon completion.
    import { showEditor } from 'react-native-video-trim';

// 1. Basic usage - open video editor
showEditor(videoUrl);

// 2. With duration limit
showEditor(videoUrl, {
  maxDuration: 20,
});

// 3. With save options
showEditor(videoUrl, {
  maxDuration: 30,
  saveToPhoto: true,
  openShareSheetOnFinish: true,
});

  6. Customize Android SDK versions

    master

    To override the default Android SDK versions used by the library, you can add a buildscript block with ext properties in your android/build.gradle file.

    Supported keys:

    • VideoTrim_kotlinVersion
    • VideoTrim_minSdkVersion
    • VideoTrim_targetSdkVersion
    • VideoTrim_compileSdkVersion
    • VideoTrim_ndkVersion
    buildscript {
    ext {
        VideoTrim_kotlinVersion = '2.0.21'
        VideoTrim_minSdkVersion = 24
        VideoTrim_targetSdkVersion = 34
        VideoTrim_compileSdkVersion = 35
        VideoTrim_ndkVersion = '27.1.12297006'
    }
}

  8. Build and run the iOS app

    master

    For iOS, you must first install CocoaPods dependencies. If this is your first time running the project or you have updated native dependencies, run bundle install and bundle exec pod install before building the app.

    Once dependencies are installed, run the following command to launch the app on an iOS Simulator or connected device.

    # Install CocoaPods dependencies
bundle install
bundle exec pod install

# Build and run
# Using npm
npm run ios

# OR using Yarn
yarn ios

  9. Configure Android platform setup

    master

    New Architecture

    If you are using the React Native New Architecture, run:

    cd android && ./gradlew generateCodegenArtifactsFromSchema

    Permissions Required

    To allow saving to Photos, add the following to your AndroidManifest.xml:

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    Share Sheet Functionality

    No manual setup is required for the Share Sheet. The library automatically bundles its own FileProvider with the authority ${applicationId}.videotrimprovider and merges it into your manifest. It manages files within the app's files/ and cache/ directories.

    Upgrading from 8.2.1 or earlier

    If you are upgrading, you can delete any manually declared FileProvider with authority ${applicationId}.provider or res/xml/file_paths.xml unless your own code specifically uses them.

    Note on file paths: The share() method no longer accepts paths on external storage if your file_paths.xml had an external-path root. Instead, pass a file produced by the library from its own output directories.

  10. Reload the application

    master

    If you need to perform a full reload to reset the app state, use the following platform-specific shortcuts:

    • Android: Press the <kbd>R</kbd> key twice, or open the Dev Menu via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS) and select "Reload".
    • iOS: Press <kbd>R</kbd> in the iOS Simulator.

  11. Enable trimming for remote HTTPS files

    master

    To trim files hosted on remote HTTPS URLs, you must use the HTTPS-enabled version of FFmpeg.

    Android Setup: Update android/build.gradle:

    buildscript {
    ext {
        VideoTrim_ffmpeg_package = 'https'
    }
}

    iOS Setup: Run the following command:

    FFMPEGKIT_PACKAGE=https FFMPEG_KIT_PACKAGE_VERSION=6.0 pod install
    showEditor('https://example.com/video.mp4', {
  maxDuration: 60000,
});