Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history 
Add formatting and useful information
  • Loading branch information
@cornejobarraza
cornejobarraza authored Jan 16, 2025
1 parent c206745 commit 38a36b1
Showing 1 changed file with 78 additions and 67 deletions.
145 changes: 78 additions & 67 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
# react-native-vlc-media-player

## New feature requests and bug fixes
### New feature requests and bug fixes

At the moment I am a bit tied up with other work. As a matter of fact, I don't get much time to develop at all nowadays. But I am more than open to help anyone who wants's to contribute to this repo. And I will be sure to merge any fixes as soon as PR's come up. But if you need someone to fix issues that affect you till I get back to this(ETA Q3 2022), One option is to add a bounty to the following site https://www.bountysource.com/ someone will attend to it.

## Supported RN Versions

0.59 > 0.62 and up
PODs are updated to works with 0.61 and up.(Tested in 0.61.5 and 0.62 and 0.63)

## Sample repo

[VLC Media Player test](https://github.com/razorRun/react-native-vlc-media-player-test)
- 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)

## Supported formats

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

### Add it to your project
## Sample repo

[VLC Media Player test](https://github.com/razorRun/react-native-vlc-media-player-test)

## Add it to your project

Run

Expand All @@ -29,17 +29,17 @@ or

`yarn add react-native-vlc-media-player`

Run
If not using Expo also run

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

## android
## Android

Should work without any specific settings
Should 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.

gradle build might failed with `More than one file was found with OS independent path 'lib/x86/libc++_shared.so'` error. If that happens add the following block to your `android/app/build.gradle`
If that happens, add the following block to your `android/app/build.gradle`:

```
```gradle
tasks.whenTaskAdded((tas -> {
// when task is 'mergeLocalDebugNativeLibs' or 'mergeLocalReleaseNativeLibs'
if (tas.name.contains("merge") && tas.name.contains("NativeLibs")) {
Expand All @@ -64,11 +64,13 @@ tasks.whenTaskAdded((tas -> {
}))
```

Explain: 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, so I add a gradle script to delete `libc++_shared.so` from react-native to solve this.
### Explanation
`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`.

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

Explain why we have to use libvlc-all:3.6.0-eap5 instead of libvlc-all:3.2.6: libvlc-all:3.2.6 has a bug that subtitle won't display on Android 12 and 13, so we have to upgrade libvlc to support subtitle display on Android 12 and 13.
### Also to consider
`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.

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

Expand All @@ -79,74 +81,68 @@ Reference: https://code.videolan.org/videolan/vlc-android/-/issues/2252
3. add `pod 'MobileVLCKit', '3.3.10'` to pod file **(No need if you are running RN 0.61 and up)**
4. run `pod install` (you have to delete the app on the simulator/device and run `react-native run-ios` again)

## Optional (only for ios)
### Optional

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

## Expo

This package works with expo when using [custom development builds](https://docs.expo.dev/develop/development-builds/introduction/)
This 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/).

Just insert the react-native-vlc-media-player plugin to the "plugins" array from `app.config.js` or `app.json`. Then rebuild your app as described in the ["Adding custom native code"](https://docs.expo.io/workflow/customizing/) guide.
To enable just insert the `react-native-vlc-media-player` plugin to the "plugins" array from `app.config.js` or `app.json`:

```json
{
"expo": {
"plugins": [
[
"react-native-vlc-media-player",
{
"ios": {
"includeVLCKit": false // should be true if react-native version < 0.61
},
"android": {
"legacyJetifier": false // should be true if react-native version < 0.71
}
}
]
]
[
"expo-video",
{
"ios": {
"includeVLCKit": false
},
"android": {
"legacyJetifier": false
}
}
]
],
}
}
```

## TODO
### Configuring the plugin is optional:

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.).
- Set `ios.includeVLCKit` to `true` if using RN < 0.61
- Set `android.legacyJetifier` to `true` if using RN < 0.71

## Got a few minutes to spare? Please help us to keep this repo up to date and simple to use.
Then rebuild your app as described in the ["Adding custom native code"](https://docs.expo.io/workflow/customizing/) guide.

#### Our idea was to keep the repo simple, and people can use it with newer RN versions without any additional config.
## Usage

1. Get a fork of this repo and clone [VLC Media Player test](https://github.com/razorRun/react-native-vlc-media-player-test)
2. 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`)
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 🌟 ❤️

## Use

```
```jsx
import { VLCPlayer, VlCPlayerView } from 'react-native-vlc-media-player';
import Orientation from 'react-native-orientation';

<VLCPlayer
style={[styles.video]}
videoAspectRatio="16:9"
source={{ uri: "https://www.radiantmediaplayer.com/media/big-buck-bunny-360p.mp4"}}
/>
or you can use
<VlCPlayerView
autoplay={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={()=>{}}
/>
<VLCPlayer
style={[styles.video]}
videoAspectRatio="16:9"
source={{ uri: "https://www.radiantmediaplayer.com/media/big-buck-bunny-360p.mp4" }}
/>

// Or you can use

<VlCPlayerView
autoplay={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={()=>{}}
/>
```

### VLCPlayer Props
Expand All @@ -168,6 +164,7 @@ or you can use
| `autoAspectRatio` | Set to `true` or `false` to enable auto aspect ratio | false |
| `resizeMode` | Set the behavior for the video size (`fill, contain, cover, none, scale-down`) | none |
| `style` | React native stylesheet styles | `{}` |
| `autoplay` | Set to `true` or `false` to enable autoplay | `true` |

#### Callback props

Expand Down Expand Up @@ -213,13 +210,27 @@ Network streaming formats: Apple HLS, Flash RTMP, MPEG-DASH, MPEG Transport Stre
Subtitles: Advanced SubStation Alpha, Closed Captions, DVB, DVD-Video, MPEG-4 Timed Text, MPL2, OGM, SubStation Alpha, SubRip, SVCD, Teletext, Text file, VobSub, WebVTT, TTML
Video 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.

## credits
## Got a few minutes to spare? Please help us to keep this repo up to date and simple to use.

#### Our idea was to keep the repo simple, and people can use it with newer RN versions without any additional config.

1. Get a fork of this repo and clone [VLC Media Player test](https://github.com/razorRun/react-native-vlc-media-player-test)
2. 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`)
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 🌟 ❤️

## TODO

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)

## Credits

[ammarahm-ed](https://github.com/ammarahm-ed)
[Nghi-NV](https://github.com/Nghi-NV)
[xuyuanzhou](https://github.com/xuyuanzhou)

## sponsors
## Sponsors

Huge thanks to "[smartlife - one of the best custom home automation companies in new zealand](https://www.smartlife.nz/)" for helping me to keep this repo maintained

Expand Down

0 comments on commit 38a36b1

Please sign in to comment.