{"id":21658794,"url":"https://github.com/razorRun/react-native-vlc-media-player","last_synced_at":"2025-07-17T21:31:37.042Z","repository":{"id":37958437,"uuid":"253969400","full_name":"razorRun/react-native-vlc-media-player","owner":"razorRun","description":"React native media player for video streaming and playing. Supports RTSP, RTMP and other protocols supported by VLC player","archived":false,"fork":false,"pushed_at":"2024-09-11T02:48:27.000Z","size":545,"stargazers_count":357,"open_issues_count":55,"forks_count":187,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-11-19T22:55:42.515Z","etag":null,"topics":["audio","media","media-player","player","react-native","rtmp","rtsp","video","video-player","video-streaming","vlc","vlc-player"],"latest_commit_sha":null,"homepage":"https://roshan.digital/","language":"JavaScript","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/razorRun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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":"2020-04-08T02:52:26.000Z","updated_at":"2024-11-17T18:37:34.000Z","dependencies_parsed_at":"2023-11-25T11:31:23.567Z","dependency_job_id":"9db7421b-dbdb-4887-813e-a94af995ea94","html_url":"https://github.com/razorRun/react-native-vlc-media-player","commit_stats":{"total_commits":119,"total_committers":23,"mean_commits":5.173913043478261,"dds":0.7142857142857143,"last_synced_commit":"ce0e41d5c9872e36c69c03e044bbf424ccaf7712"},"previous_names":["razorrun/react-native-vlc-player"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razorRun%2Freact-native-vlc-media-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razorRun%2Freact-native-vlc-media-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razorRun%2Freact-native-vlc-media-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razorRun%2Freact-native-vlc-media-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/razorRun","download_url":"https://codeload.github.com/razorRun/react-native-vlc-media-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226305027,"owners_count":17603730,"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","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":["audio","media","media-player","player","react-native","rtmp","rtsp","video","video-player","video-streaming","vlc","vlc-player"],"created_at":"2024-11-25T09:29:49.923Z","updated_at":"2025-07-17T21:31:37.029Z","avatar_url":"https://github.com/razorRun.png","language":"JavaScript","funding_links":[],"categories":["Java"],"sub_categories":[],"readme":"# react-native-vlc-media-player\n\n## Supported RN Versions\n\n- 0.59 \u003e 0.62 and up\n- PODs are updated to work with 0.61 and up (tested in 0.61.5, 0.62 and 0.63)\n\n## Supported formats\n\nSupport for network streams, RTSP, RTP, RTMP, HLS, MMS.\nPlay all files, [in all formats, including exotic ones, like the classic VLC media player.](#-More-formats)\nPlay MKV, multiple audio tracks (including 5.1), and subtitles tracks (including SSA!)\n\n## Sample repo\n\n[VLC Media Player test](https://github.com/razorRun/react-native-vlc-media-player-test)\n\n## Add it to your project\n\nRun\n\n`npm i react-native-vlc-media-player --save`\n\nor\n\n`yarn add react-native-vlc-media-player`\n\nIf not using Expo also run\n\n`react-native link react-native-vlc-media-player`\n\n## Android\n\nShould work without any specific settings. Gradle build might fail with `More than one file was found with OS independent path 'lib/x86/libc++_shared.so'` error.\n\nIf that happens, add the following block to your `android/app/build.gradle`:\n\n```gradle\ntasks.whenTaskAdded((tas -\u003e {\n    // when task is 'mergeLocalDebugNativeLibs' or 'mergeLocalReleaseNativeLibs'\n    if (tas.name.contains(\"merge\") \u0026\u0026 tas.name.contains(\"NativeLibs\")) {\n        tasks.named(tas.name) {it\n            doFirst {\n                java.nio.file.Path notNeededDirectory = it.externalLibNativeLibs\n                        .getFiles()\n                        .stream()\n                        // for React Native 0.71, the file value now contains \"jetified-react-android\" instead of \"jetified-react-native\"\n                        .filter(file -\u003e file.toString().contains(\"jetified-react-native\"))\n                        .findAny()\n                        .orElse(null)\n                        .toPath();\n                java.nio.file.Files.walk(notNeededDirectory).forEach(file -\u003e {\n                    if (file.toString().contains(\"libc++_shared.so\")) {\n                        java.nio.file.Files.delete(file);\n                    }\n                });\n            }\n        }\n    }\n}))\n```\n\n### Explanation\n`react-native` and `LibVLC` both import `libc++_shared.so`, but we cannot use `packagingOptions.pickFirst` to handle this case, because `libvlc-all:3.6.0-eap5` will crash when using `libc++_shared.so`, so we have to use `libc++_shared.so` from `LibVLC`.\n\nReference: https://stackoverflow.com/questions/74258902/how-to-define-which-so-file-to-use-in-gradle-packaging-options\n\n### Also to consider\n`libvlc-all:3.2.6` has a bug where subtitles won't display on Android 12 and 13, so we have to upgrade `LibVLC` to support it.\n\nReference: https://code.videolan.org/videolan/vlc-android/-/issues/2252\n\n## iOS\n\n1. cd to ios\n2. run `pod init` (if only Podfile has not been generated in ios folder)\n3. add `pod 'MobileVLCKit', '3.3.10'` to pod file **(No need if you are running RN 0.61 and up)**\n4. run `pod install` (you have to delete the app on the simulator/device and run `react-native run-ios` again)\n\n### Important\n\nStarting from iOS 14, you are required to provide a message for the `NSLocalNetworkUsageDescription` key in `Info.plist` if your app uses the local network directly or indirectly.\n\nIt seems the `MobileVLCKit` library powering the VLC Player on iOS makes use of this feature when playing external media from sources such as RTSP streams from IP cameras.\n\nProvide a custom message specifying how your app will make use of the network so your App Store submission is not rejected for this reason, read more about this here:\n\nhttps://developer.apple.com/documentation/bundleresources/information-property-list/nslocalnetworkusagedescription\n\n### Optional\n\nIn root project select \"Build Settings\", find \"Bitcode\" and select \"Enable Bitcode\"\n\n## Expo\n\nThis package works with Expo, Expo Go does not include custom native code so you must use a [development build](https://docs.expo.dev/develop/development-builds/introduction/).\n\nTo enable just insert the `react-native-vlc-media-player` plugin to the \"plugins\" array from `app.config.js` or `app.json`:\n\n```json\n{\n  \"expo\": {\n    \"plugins\": [\n      [\n        \"react-native-vlc-media-player\",\n        {\n          \"ios\": {\n              \"includeVLCKit\": false\n          },\n          \"android\": {\n              \"legacyJetifier\": false\n          }\n        }\n      ]\n    ],\n  }\n}\n```\n\n### Configuring the plugin is optional:\n\n- Set `ios.includeVLCKit` to `true` if using RN \u003c 0.61\n- Set `android.legacyJetifier` to `true` if using RN \u003c 0.71\n\nThen rebuild your app as described in the [\"Adding custom native code\"](https://docs.expo.io/workflow/customizing/) guide.\n\n## Usage\n\n```jsx\nimport { VLCPlayer, VlCPlayerView } from 'react-native-vlc-media-player';\nimport Orientation from 'react-native-orientation';\n\n\u003cVLCPlayer\n  style={[styles.video]}\n  videoAspectRatio=\"16:9\"\n  source={{ uri: \"https://www.radiantmediaplayer.com/media/big-buck-bunny-360p.mp4\" }}\n/\u003e\n\n// Or you can use\n\n\u003cVlCPlayerView\n  autoplay={false}\n  url=\"https://www.radiantmediaplayer.com/media/big-buck-bunny-360p.mp4\"\n  Orientation={Orientation}\n  ggUrl=\"\"\n  showGG={true}\n  showTitle={true}\n  title=\"Big Buck Bunny\"\n  showBack={true}\n  onLeftPress={()=\u003e{}}\n/\u003e\n```\n\n### VLCPlayer Props\n\n| Prop                | Description                                                                                                                                          | Default |\n| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |\n| `source`            | Object that contains the uri of a video or song to play eg `{{ uri: \"https://video.com/example.mkv\" }}`                                              | `{}`    |\n| `subtitleUri`       | local subtitle file path，if you want to hide subtitle, you can set this to an empty subtitle file，current we don't support a `hide subtitle` prop. |         |\n| `paused`            | Set to `true` or `false` to pause or play the media                                                                                                  | `false` |\n| `repeat`            | Set to `true` or `false` to loop the media                                                                                                           | `false` |\n| `rate`              | Set the playback rate of the player                                                                                                                  | `1`     |\n| `seek`              | Set position to seek between `0` and `1` (`0` being the start, `1` being the end , use `position` from the progress object )                         |         |\n| `volume`            | Set the volume of the player (`number`)                                                                                                              |         |\n| `muted`             | Set to `true` or `false` to mute the player                                                                                                          | `false` |\n| `audioTrack`        | Set audioTrack id (`number`) (see `onLoad` callback VideoInfo.audioTracks)                                                                           |         |\n| `textTrack`         | Set textTrack(subtitle) id (`number`) (see `onLoad` callback- VideoInfo.textTracks)                                                                  |         |\n| `playInBackground`  | Set to `true` or `false` to allow playing in the background                                                                                          | false   |\n| `videoAspectRatio ` | Set the video aspect ratio eg `\"16:9\"`                                                                                                               |         |\n| `autoAspectRatio`   | Set to `true` or `false` to enable auto aspect ratio                                                                                                 | false   |\n| `resizeMode`        | Set the behavior for the video size (`fill, contain, cover, none, scale-down`)                                                                       | none    |\n| `style`             | React native stylesheet styles                                                                                                                       | `{}`    |\n| `autoplay`          | Set to `true` or `false` to enable autoplay                                                                                                          | `true`  |\n\n#### Callback props\n\nCallback props take a function that gets fired on various player events:\n\n| Prop                 | Description                                                                                                                                                                                                          |\n| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `onPlaying`          | Called when media starts playing returns eg `{target: 9, duration: 99750, seekable: true}`                                                                                                                           |\n| `onProgress`         | Callback containing `position` as a fraction, and `duration`, `currentTime` and `remainingTime` in seconds \u003cbr /\u003e\u0026nbsp; ◦ \u0026nbsp;eg `{  duration: 99750, position: 0.30, currentTime: 30154, remainingTime: -69594 }` |\n| `onPaused`           | Called when media is paused                                                                                                                                                                                          |\n| `onStopped `         | Called when media is stoped                                                                                                                                                                                          |\n| `onBuffering `       | Called when media is buffering                                                                                                                                                                                       |\n| `onEnded`            | Called when media playing ends                                                                                                                                                                                       |\n| `onError`            | Called when an error occurs whilst attempting to play media                                                                                                                                                          |\n| `onLoad`             | Called when video info is loaded, Callback containing VideoInfo                                                                                                                                                      |\n| `onRecordingCreated` | Called when a new recording is created as the result of `startRecording()` `stopRecording()`                                                                                                                         |\n| `onSnapshot`         | Called when a new snapshot is created as the result of `snapshot()` - contains `{success: boolean, path?: string, error?: string}`                                                                                   |\n\n#### Methods props\n\nMethods available on the VLC player ref\n\n| Prop                                | Description                                                                                                       |\n| ----------------------------------- | ----------------------------------------------------------------------------------------------------------------- |\n| `startRecording(directory: string)` | Start recording the current video into the given directory                                                        |\n| `stopRecording()`                   | Stop recording the current video. The final recording file can be obtained from the `onRecordingCreated` callback |\n| `snapshot(path: string)`            | Capture a snapshot of the current video frame to the given file path                                              |\n\nVideoInfo example:\n\n```\n {\n    duration: 30906,\n    videoSize: {height: 240, width: 32},\n    audioTracks: [\n            {id: -1, name: \"Disable\"},\n            {id: 1, name: \"Track 1\"},\n            {id: 3, name: \"Japanese Audio (2ch LC-AAC) - [Japanese]\"}\n    ],\n    textTracks: [\n        {id: -1, name: \"Disable\"},\n        {id: 4, name: \"Track 1 - [English]\"},\n        {id: 5, name: \"Track 2 - [Japanese]\"}\n    ],\n}\n```\n\n## More formats\n\nContainer formats: 3GP, ASF, AVI, DVR-MS, FLV, Matroska (MKV), MIDI, QuickTime File Format, MP4, Ogg, OGM, WAV, MPEG-2 (ES, PS, TS, PVA, MP3), AIFF, Raw audio, Raw DV, MXF, VOB, RM, Blu-ray, DVD-Video, VCD, SVCD, CD Audio, DVB, HEIF, AVIF\nAudio coding formats: AAC, AC3, ALAC, AMR, DTS, DV Audio, XM, FLAC, It, MACE, MOD, Monkey's Audio, MP3, Opus, PLS, QCP, QDM2/QDMC, RealAudio, Speex, Screamtracker 3/S3M, TTA, Vorbis, WavPack, WMA (WMA 1/2, WMA 3 partially).\nCapture devices: Video4Linux (on Linux), DirectShow (on Windows), Desktop (screencast), Digital TV (DVB-C, DVB-S, DVB-T, DVB-S2, DVB-T2, ATSC, Clear QAM)\nNetwork protocols: FTP, HTTP, MMS, RSS/Atom, RTMP, RTP (unicast or multicast), RTSP, UDP, Sat-IP, Smooth Streaming\nNetwork streaming formats: Apple HLS, Flash RTMP, MPEG-DASH, MPEG Transport Stream, RTP/RTSP ISMA/3GPP PSS, Windows Media MMS\nSubtitles: Advanced SubStation Alpha, Closed Captions, DVB, DVD-Video, MPEG-4 Timed Text, MPL2, OGM, SubStation Alpha, SubRip, SVCD, Teletext, Text file, VobSub, WebVTT, TTML\nVideo coding formats: Cinepak, Dirac, DV, H.263, H.264/MPEG-4 AVC, H.265/MPEG HEVC, AV1, HuffYUV, Indeo 3, MJPEG, MPEG-1, MPEG-2, MPEG-4 Part 2, RealVideo 3\u00264, Sorenson, Theora, VC-1,[h] VP5, VP6, VP8, VP9, DNxHD, ProRes and some WMV.\n\n## Got a few minutes to spare? Please help us to keep this repo up to date and simple to use.\n\n#### Our idea was to keep the repo simple, and people can use it with newer RN versions without any additional config.\n\n1. Get a fork of this repo and clone [VLC Media Player test](https://github.com/razorRun/react-native-vlc-media-player-test)\n2. Run it for ios and android locally using your fork, and do the changes. (remove this package using `npm remove react-native-vlc-media-player` and install the forked version from git hub `npm i https://git-address-to-your-forked-repo`)\n3. Verify your changes and make sure everything works on both platforms. (If you need a hand with testing I might be able to help as well)\n4. Send PR.\n5. Be happy, Cause you're a Rockstar 🌟 ❤️\n\n## Known Issues\n\n### iOS 17 Simulator Crash\n\nIt is a [known issue](https://code.videolan.org/videolan/VLCKit/-/issues/724) that apps can crash on playback in iOS simulator with `EXEC_BAD_ACCESS` errors. This appears to only be on certain iOS 17.x versions (17.4, 17.5).\nIf this happens, try running on an iOS 18+ simulator instead.\n\n## TODO\n\n1. Android video aspect ratio and other params do not work (Events are called but all events come through a single event onVideoStateChange but the JS side does not implement it)\n\n## Credits\n\n[cornejobarraza](https://github.com/cornejobarraza)\n[ammarahm-ed](https://github.com/ammarahm-ed)\n[Nghi-NV](https://github.com/Nghi-NV)\n[xuyuanzhou](https://github.com/xuyuanzhou)\n\n\nAuthor - Roshan Milinda -\u003e [roshan.digital](https://roshan.digital)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FrazorRun%2Freact-native-vlc-media-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FrazorRun%2Freact-native-vlc-media-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FrazorRun%2Freact-native-vlc-media-player/lists"}