react-native-unified-player 0.2.0 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -74
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,87 +1,71 @@
|
|
|
1
1
|
# react-native-unified-player
|
|
2
2
|
|
|
3
|
-
Unified Player
|
|
3
|
+
Unified Player
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
|
-
```
|
|
7
|
+
```bash
|
|
8
|
+
yarn add react-native-unified-player
|
|
9
|
+
# or
|
|
8
10
|
npm install react-native-unified-player
|
|
9
11
|
```
|
|
10
12
|
|
|
11
|
-
### iOS Setup for VLC
|
|
12
|
-
|
|
13
|
-
The iOS version of this player uses MobileVLCKit for advanced video playback capabilities. It supports a wide range of formats including RTSP, RTMP, HLS, and other protocols supported by VLC.
|
|
14
|
-
|
|
15
|
-
The VLC dependencies are automatically installed via CocoaPods through the podspec file. After installing the package:
|
|
16
|
-
|
|
17
|
-
1. Navigate to the iOS folder of your project:
|
|
18
|
-
```sh
|
|
19
|
-
cd ios
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
2. Install pods:
|
|
23
|
-
```sh
|
|
24
|
-
pod install
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
3. VLC requires "Bitcode" to be disabled in your Xcode project. This is handled automatically in the podspec file, but if you experience issues, check that your project's Build Settings have "Enable Bitcode" set to "No".
|
|
28
|
-
|
|
29
|
-
4. Starting from iOS 14, you need to provide a message for the `NSLocalNetworkUsageDescription` key in your `Info.plist` if you're using external streaming sources. Add something like:
|
|
30
|
-
```xml
|
|
31
|
-
<key>NSLocalNetworkUsageDescription</key>
|
|
32
|
-
<string>This app requires access to the local network to stream media content</string>
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
### Troubleshooting VLC Integration
|
|
36
|
-
|
|
37
|
-
If you encounter build issues with VLC:
|
|
38
|
-
|
|
39
|
-
1. **Compilation Errors**: If you see errors about missing properties or methods, it might be because the VLC API has changed. This package uses MobileVLCKit 3.3.17, which is compatible with the current implementation.
|
|
40
|
-
|
|
41
|
-
2. **Playback Issues on iOS 14+**: VLC has known issues with certain RTSP streams on iOS 14. If you experience a black screen or playback failures specifically on newer iOS devices, try the following:
|
|
42
|
-
- Add additional media options in your code:
|
|
43
|
-
```js
|
|
44
|
-
// Example: Adding network caching for better buffering
|
|
45
|
-
<UnifiedPlayerView
|
|
46
|
-
videoUrl="rtsp://example.com/stream"
|
|
47
|
-
mediaOptions={["--network-caching=1500", "--live-caching=1500"]}
|
|
48
|
-
/>
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
3. **Link Required Frameworks**: Make sure you have all required frameworks linked in your Xcode project:
|
|
52
|
-
- AudioToolbox.framework
|
|
53
|
-
- AVFoundation.framework
|
|
54
|
-
- CoreMedia.framework
|
|
55
|
-
- CoreVideo.framework
|
|
56
|
-
- libc++.tbd
|
|
57
|
-
- libiconv.tbd
|
|
58
|
-
- libz.tbd
|
|
59
|
-
|
|
60
13
|
## Usage
|
|
61
14
|
|
|
62
|
-
```
|
|
63
|
-
import { UnifiedPlayerView } from
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
15
|
+
```typescript
|
|
16
|
+
import { UnifiedPlayerView, UnifiedPlayer, UnifiedPlayerEventTypes, UnifiedPlayerEvents } from 'react-native-unified-player';
|
|
17
|
+
import React, { useRef, useEffect } from 'react';
|
|
18
|
+
import { View } from 'react-native';
|
|
19
|
+
|
|
20
|
+
const MyPlayerComponent = () => {
|
|
21
|
+
const playerRef = useRef(null);
|
|
22
|
+
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
const readyListener = UnifiedPlayerEvents.addListener(UnifiedPlayerEventTypes.READY, () => {
|
|
25
|
+
console.log('Player is ready to play');
|
|
26
|
+
// You can call UnifiedPlayer methods here, e.g., UnifiedPlayer.play(playerRef.current.getNativeTag());
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
const errorListener = UnifiedPlayerEvents.addListener(UnifiedPlayerEventTypes.ERROR, (error) => {
|
|
30
|
+
console.error('Player error:', error);
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
const progressListener = UnifiedPlayerEvents.addListener(UnifiedPlayerEventTypes.PROGRESS, (data) => {
|
|
34
|
+
console.log(`Progress: ${data.currentTime}/${data.duration}`);
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
const completeListener = UnifiedPlayerEvents.addListener(UnifiedPlayerEventTypes.COMPLETE, () => {
|
|
38
|
+
console.log('Playback complete');
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
return () => {
|
|
42
|
+
readyListener.remove();
|
|
43
|
+
errorListener.remove();
|
|
44
|
+
progressListener.remove();
|
|
45
|
+
completeListener.remove();
|
|
46
|
+
};
|
|
47
|
+
}, []);
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<View style={{ flex: 1 }}>
|
|
51
|
+
<UnifiedPlayerView
|
|
52
|
+
ref={playerRef}
|
|
53
|
+
style={{ flex: 1 }}
|
|
54
|
+
videoUrl="YOUR_VIDEO_URL_HERE"
|
|
55
|
+
autoplay={false}
|
|
56
|
+
loop={false}
|
|
57
|
+
onReadyToPlay={() => console.log('View prop: Ready to play')}
|
|
58
|
+
onError={(e) => console.log('View prop: Error', e)}
|
|
59
|
+
onPlaybackComplete={() => console.log('View prop: Playback complete')}
|
|
60
|
+
onProgress={(data) => console.log('View prop: Progress', data)}
|
|
61
|
+
/>
|
|
62
|
+
</View>
|
|
63
|
+
);
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
export default MyPlayerComponent;
|
|
73
67
|
```
|
|
74
68
|
|
|
75
|
-
### Supported Formats
|
|
76
|
-
|
|
77
|
-
With VLC integration, the player supports a wide range of formats:
|
|
78
|
-
|
|
79
|
-
- Network streams: RTSP, RTP, RTMP, HLS, MMS
|
|
80
|
-
- Container formats: MP4, MKV, AVI, FLV, MOV, TS, and many more
|
|
81
|
-
- Codec support: H.264, H.265, VP8, VP9, and many others
|
|
82
|
-
- Audio: Multiple audio tracks support including 5.1
|
|
83
|
-
- Subtitles: Support for various subtitle formats including SSA
|
|
84
|
-
|
|
85
69
|
## Contributing
|
|
86
70
|
|
|
87
71
|
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
|
|
@@ -90,6 +74,4 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
|
|
|
90
74
|
|
|
91
75
|
MIT
|
|
92
76
|
|
|
93
|
-
---
|
|
94
|
-
|
|
95
77
|
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
|