Repository files navigation

• 0.59 > 0.62 and up
• PODs are updated to work with 0.61 and up (tested in 0.61.5, 0.62 and 0.63)

Support for network streams, RTSP, RTP, RTMP, HLS, MMS.Play all files,in all formats, including exotic ones, like the classic VLC media player.Play MKV, multiple audio tracks (including 5.1), and subtitles tracks (including SSA!)

VLC Media Player test

Run

npm i react-native-vlc-media-player --save

or

yarn add react-native-vlc-media-player

If not using Expo also run

react-native link react-native-vlc-media-player

Should work without any specific settings. Gradle build might fail withMore than one file was found with OS independent path 'lib/x86/libc++_shared.so' error.

If that happens, add the following block to yourandroid/app/build.gradle:

tasks.whenTaskAdded((tas-> {// when task is 'mergeLocalDebugNativeLibs' or 'mergeLocalReleaseNativeLibs'if (tas.name.contains("merge")&& tas.name.contains("NativeLibs")) {        tasks.named(tas.name) {it            doFirst {java.nio.file.Path notNeededDirectory= it.externalLibNativeLibs                        .getFiles()                        .stream()// for React Native 0.71, the file value now contains "jetified-react-android" instead of "jetified-react-native"                        .filter(file-> file.toString().contains("jetified-react-native"))                        .findAny()                        .orElse(null)                        .toPath();java.nio.file.Files.walk(notNeededDirectory).forEach(file-> {if (file.toString().contains("libc++_shared.so")) {java.nio.file.Files.delete(file);                    }                });            }        }    }}))

react-native andLibVLC both importlibc++_shared.so, but we cannot usepackagingOptions.pickFirst to handle this case, becauselibvlc-all:3.6.0-eap5 will crash when usinglibc++_shared.so, so we have to uselibc++_shared.so fromLibVLC.

Reference:https://stackoverflow.com/questions/74258902/how-to-define-which-so-file-to-use-in-gradle-packaging-options

libvlc-all:3.2.6 has a bug where subtitles won't display on Android 12 and 13, so we have to upgradeLibVLC to support it.

Reference:https://code.videolan.org/videolan/vlc-android/-/issues/2252

1. cd to ios
2. runpod init (if only Podfile has not been generated in ios folder)
3. addpod 'MobileVLCKit', '3.3.10' to pod file(No need if you are running RN 0.61 and up)
4. runpod install (you have to delete the app on the simulator/device and runreact-native run-ios again)

Starting from iOS 14, you are required to provide a message for theNSLocalNetworkUsageDescription key inInfo.plist if your app uses the local network directly or indirectly.

It seems theMobileVLCKit 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.

Provide 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:

https://developer.apple.com/documentation/bundleresources/information-property-list/nslocalnetworkusagedescription

In root project select "Build Settings", find "Bitcode" and select "Enable Bitcode"

This package works with Expo, Expo Go does not include custom native code so you must use adevelopment build.

To enable just insert thereact-native-vlc-media-player plugin to the "plugins" array fromapp.config.js orapp.json:

{"expo": {"plugins": [      ["react-native-vlc-media-player",        {"ios": {"includeVLCKit":false          },"android": {"legacyJetifier":false          }        }      ]    ],  }}

• Setios.includeVLCKit totrue if using RN < 0.61
• Setandroid.legacyJetifier totrue if using RN < 0.71

Then rebuild your app as described in the"Adding custom native code" guide.

import{VLCPlayer,VlCPlayerView}from'react-native-vlc-media-player';importOrientationfrom'react-native-orientation';<VLCPlayerstyle={[styles.video]}videoAspectRatio="16:9"source={{uri:"https://www.radiantmediaplayer.com/media/big-buck-bunny-360p.mp4"}}/>// Or you can use<VlCPlayerViewautoplay={false}url="https://www.radiantmediaplayer.com/media/big-buck-bunny-360p.mp4"Orientation={Orientation}ggUrl=""showGG={true}showTitle={true}title="Big Buck Bunny"showBack={true}onLeftPress={()=>{}}/>

Callback props take a function that gets fired on various player events:

Methods available on the VLC player ref

VideoInfo example:

 {    duration: 30906,    videoSize: {height: 240, width: 32},    audioTracks: [            {id: -1, name: "Disable"},            {id: 1, name: "Track 1"},            {id: 3, name: "Japanese Audio (2ch LC-AAC) - [Japanese]"}    ],    textTracks: [        {id: -1, name: "Disable"},        {id: 4, name: "Track 1 - [English]"},        {id: 5, name: "Track 2 - [Japanese]"}    ],}

Container 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, AVIFAudio 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).Capture devices: Video4Linux (on Linux), DirectShow (on Windows), Desktop (screencast), Digital TV (DVB-C, DVB-S, DVB-T, DVB-S2, DVB-T2, ATSC, Clear QAM)Network protocols: FTP, HTTP, MMS, RSS/Atom, RTMP, RTP (unicast or multicast), RTSP, UDP, Sat-IP, Smooth StreamingNetwork streaming formats: Apple HLS, Flash RTMP, MPEG-DASH, MPEG Transport Stream, RTP/RTSP ISMA/3GPP PSS, Windows Media MMSSubtitles: Advanced SubStation Alpha, Closed Captions, DVB, DVD-Video, MPEG-4 Timed Text, MPL2, OGM, SubStation Alpha, SubRip, SVCD, Teletext, Text file, VobSub, WebVTT, TTMLVideo 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&4, Sorenson, Theora, VC-1,[h] VP5, VP6, VP8, VP9, DNxHD, ProRes and some WMV.

1. Get a fork of this repo and cloneVLC Media Player test
2. Run it for ios and android locally using your fork, and do the changes. (remove this package usingnpm remove react-native-vlc-media-player and install the forked version from git hubnpm i https://git-address-to-your-forked-repo)
3. 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)
4. Send PR.
5. Be happy, Cause you're a Rockstar 🌟 ❤️

It is aknown issue that apps can crash on playback in iOS simulator withEXEC_BAD_ACCESS errors. This appears to only be on certain iOS 17.x versions (17.4, 17.5).If this happens, try running on an iOS 18+ simulator instead.

1. 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)

cornejobarrazaammarahm-edNghi-NVxuyuanzhou

Author - Roshan Milinda ->roshan.digital