{"id":29807595,"url":"https://github.com/salihgun/react-native-video-processor","last_synced_at":"2025-07-28T15:04:48.788Z","repository":{"id":62974230,"uuid":"563479877","full_name":"salihgun/react-native-video-processor","owner":"salihgun","description":"Video processing functions","archived":false,"fork":false,"pushed_at":"2023-02-13T15:03:37.000Z","size":801,"stargazers_count":32,"open_issues_count":3,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-27T03:09:45.177Z","etag":null,"topics":["boomerang","ffmpeg","react-native","thumbnail","video","video-clip","video-speed"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/salihgun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-08T17:45:40.000Z","updated_at":"2025-07-18T10:54:00.000Z","dependencies_parsed_at":"2023-02-19T11:01:16.583Z","dependency_job_id":null,"html_url":"https://github.com/salihgun/react-native-video-processor","commit_stats":{"total_commits":30,"total_committers":2,"mean_commits":15.0,"dds":"0.16666666666666663","last_synced_commit":"a39f535065bc84f6a6511f4fbb841cfb17433bf1"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/salihgun/react-native-video-processor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salihgun%2Freact-native-video-processor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salihgun%2Freact-native-video-processor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salihgun%2Freact-native-video-processor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salihgun%2Freact-native-video-processor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/salihgun","download_url":"https://codeload.github.com/salihgun/react-native-video-processor/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salihgun%2Freact-native-video-processor/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267534874,"owners_count":24103189,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boomerang","ffmpeg","react-native","thumbnail","video","video-clip","video-speed"],"created_at":"2025-07-28T15:01:34.349Z","updated_at":"2025-07-28T15:04:48.776Z","avatar_url":"https://github.com/salihgun.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @salihgun/react-native-video-processor\n\nVideo processing functions using [@ffmpeg-kit](https://github.com/arthenica/ffmpeg-kit)\n\n## Preview\n\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Installation\n\n```sh\nyarn add @salihgun/react-native-video-processor ffmpeg-kit-react-native\n```\n\nor\n\n```sh\nnpm install @salihgun/react-native-video-processor ffmpeg-kit-react-native\n```\n\n## Android Setup\n\n- Edit `android/build.gradle` file and add the package name in `ext.ffmpegKitPackage` variable.\n\n```gradle\n    ext {\n        ffmpegKitPackage = \"full-gpl-lts\"\n    }\n```\n\n- Edit `android/app/build.gradle` file and add packaging options above `defaultConfig`.\n\n```gradle\npackagingOptions {\n        pickFirst 'lib/x86/libc++_shared.so'\n        pickFirst 'lib/x86_64/libc++_shared.so'\n        pickFirst 'lib/armeabi-v7a/libc++_shared.so'\n        pickFirst 'lib/arm64-v8a/libc++_shared.so'\n    }\n```\n\n## iOS Setup\n\n- Edit `ios/Podfile` file and add the package name as `subspec`. After that run `pod install` again.\n\n```ruby\npod 'ffmpeg-kit-react-native', :subspecs =\u003e ['full-gpl-lts'], :podspec =\u003e '../node_modules/ffmpeg-kit-react-native/ffmpeg-kit-react-native.podspec'\n```\n\n## Usage\n\n\u003cp align=\"center\"\u003eVideo Trimmer Component\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/47421572/216847946-2c3eb232-f5a4-4aab-b315-045423b09a25.gif\" alt=\"animated\" /\u003e\n\u003c/p\u003e\n\n```js\n// ** Important! Please install react-native-video to run this component.\n// yarn add react-native-video\n\nimport VideoManager, { TrimmerComponent } from '@salihgun/react-native-video-processor'\n\n  // Use createFreames function to create frames for the video // fps=5 for the example\n  const framesPath = await VideoManager.createFrames(videoPath, 5);\n  \n  //User getVideoInfo function to get video duration\n  const videoInfo = await VideoManager.getVideoInfo(videoPath)\n\n  // Then you can use trimVideo function to trim selected part.\n  const clippedVideoPath = await VideoManager.trimVideo(videoPath, value, clipDuration)\n\n  \u003cTrimmerComponent\n    path={videoPath}\n    seekValue={value}\n    setSeekValue={setValue}\n    framesPath={framesPath}\n    duration={videoInfo.duration} // Total video duration\n    clipDuration={clipDuration} // You can set the clip duration\n  /\u003e\n```\n\n\n\u003cp align=\"center\"\u003eVideo Info\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/47421572/207990236-dc080b28-ef07-4b2b-8c4b-93e20e560ffb.gif\" alt=\"animated\" /\u003e\n\u003c/p\u003e\n\n```js\nimport VideoManager from '@salihgun/react-native-video-processor'\n\n\nconst result = await VideoManager.getVideoInfo(videoPath)\n\n// example result\n// result = {\n//  duration: 4.5,\n//  creationDate: \"2022-11-11T19:08:08.547Z\",\n//  size: 496145 bytes,\n//  bit_rate: 882035,\n//  width: 320,\n//  height: 568,\n//  frame_rate: \"30/1\",\n//  codec_name: \"h264\",\n//  codec_type: \"video\",\n//  sample_aspect_radio: \"1:1\",\n// }\n```\n\n\u003cp align=\"center\"\u003eCreate Thumbnail\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/47421572/207992898-5ae3e11a-779d-46e4-9b0d-79269ada5724.gif\" alt=\"animated\" /\u003e\n\u003c/p\u003e\n\n```js\nimport VideoManager from '@salihgun/react-native-video-processor'\n\nconst thumbnailPath = await VideoManager.createThumbnail(videoPath)\n```\n\n\n\u003cp align=\"center\"\u003eTrim Video\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/47421572/207992962-2a2ddd1f-14d5-43a5-8753-c19785791a6f.gif\" alt=\"animated\" /\u003e\n\u003c/p\u003e\n\n```js\nimport VideoManager from '@salihgun/react-native-video-processor'\n\nconst [startTime, setStartTime] = React.useState\u003cstring\u003e('');\nconst [duration, setDuration] = React.useState\u003cstring\u003e('');\n\nconst clippedVideoPath = await VideoManager.trimVideo(videoPath, startTime, duration)\n```\n\n\u003cp align=\"center\"\u003eCreate Frames of a Video\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/47421572/207993033-b5e1ac96-556a-46e6-969e-33b1c9e5c719.gif\" alt=\"animated\" /\u003e\n\u003c/p\u003e\n\n```js\nimport VideoManager from '@salihgun/react-native-video-processor'\n\n// createFrames function has two parameters. Video path and an optional fps value which is default 1\nconst framesPath = await VideoManager.createFrames(videoPath, 3) // fps = 3\n\n// render method\n \u003cScrollView horizontal\u003e\n    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((_, index) =\u003e {\n        return (\n            \u003cImage\n                key={index}\n                style={styles.frame}\n                source={{ uri: `${framesPath}${index + 1}.jpg` }}\n            /\u003e\n        );\n    })}\n \u003c/ScrollView\u003e\n\n```\n\n\u003cp align=\"center\"\u003eReverse Video\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/47421572/207993117-96db9881-2f44-47b7-abe1-e8eed40ff70f.gif\" alt=\"animated\" /\u003e\n\u003c/p\u003e\n\n```js\nimport VideoManager from '@salihgun/react-native-video-processor'\n\nconst reversedVideoPath = await VideoManager.reverseVideo(videoPath)\n\n```\n\n\u003cp align=\"center\"\u003eMerge Videos\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/47421572/207993209-39fd297d-bf04-4cc6-8832-641c6d32d056.gif\" alt=\"animated\" /\u003e\n\u003c/p\u003e\n\n```js\nimport VideoManager from '@salihgun/react-native-video-processor'\nimport RNFS from \"react-native-fs\";\n\n// You can use RNFS to create a video path\nconst outputPath = RNFS.DocumentDirectoryPath + \"/mergedVideos.mp4\";\n\n// There are two optional scale parameters to merge video\n// height and width default value is 1920x1080\n// you can change it if you need.\n// There is also an optional \"hasAudio\" parameter and default value is true.\n// If one of your videos has no audio, merge doesn't work in this version.\nconst mergedVideoPath = await VideoManager.mergeVideos(videoPathsArray,outputPath);\n\n```\n\n\u003cp align=\"center\"\u003eBoomerang Video\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/47421572/207993269-a2c35cf0-71e2-4911-a76e-5a94f5f5e128.gif\" alt=\"animated\" /\u003e\n\u003c/p\u003e\n\n```js\nimport VideoManager from '@salihgun/react-native-video-processor'\n\n// Set 'reorder' option to true if you want to reorder videos.\n// There are height and width parameters now. You can set a custom height and/or width.\nconst boomerangVideoPath = await VideoManager.boomerang(videoPath) // reorder = false\n\n```\n\n\u003cp align=\"center\"\u003eSet speed of the Video\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/47421572/217052414-2658de1c-b186-4ba6-a7d4-1e1bb1a8737e.gif\" alt=\"animated\" /\u003e\n\u003c/p\u003e\n\n```js\nimport VideoManager from '@salihgun/react-native-video-processor'\n\n// Use speed property to set speed. Default is 1\nconst speedVideoPath = await VideoManager.setSpeed(videoPath) // speed = 1\n\n```\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalihgun%2Freact-native-video-processor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsalihgun%2Freact-native-video-processor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalihgun%2Freact-native-video-processor/lists"}