0.1.16 • Published 10 months ago

react-native-newinstance-video-player v0.1.16

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

React-Native Media Player

Overview

React Native Media Player is a React Native component built using amazon-ivs-react-native-player, which allows you to integrate Amazon IVS (Interactive Video Service) player with customizable controls and features into your React Native application.

Installation

First, install the necessary dependencies:

img.png

npm install amazon-ivs-react-native-player react-native-element-dropdown @react-native-assets/slider styled-components

Then, import and use the IVSPlayerComponent in your application.

Usage

import React from 'react';
import IVSPlayerComponent from './IVSPlayerComponent';

const App = () => {
  return (
    <IVSPlayerComponent
      streamUrl="your_stream_url_here"
      autoplay={true}
      loop={true}
      muted={false}
      initialPaused={false}
      playbackRate={1.0}
      defaultVolume={1.0}
      autoQualityMode={true}
      isFullScreen={false}
      hideSeekBar={false}
      onError={(error) => console.error(error)}
      onLoadStart={() => console.log('Loading started')}
      onRebuffering={() => console.log('Rebuffering')}
      onVideoStatistics={(stats) => console.log(stats)}
      onLiveLatencyChange={(latency) => console.log('Latency: ', latency)}
    />
  );
};

export default App;

API

IVSPlayerComponent Props

PropTypeDefaultDescription
streamUrlstringundefinedURL of the video stream.
autoplaybooleantrueIf true, the video will start playing automatically.
loopbooleantrueIf true, the video will loop when it reaches the end.
mutedbooleanfalseIf true, the video will be muted.
pausedbooleanfalseIf true, the video will be paused.
playbackRatenumber1.0Playback rate of the video.
volumenumber1.0Volume of the video.
qualityQualitynullInitial video quality.
autoMaxQualitybooleanfalseIf true, the player will automatically select the maximum quality available.
hidePlayButtonbooleanfalseIf true, the player will automatically hide play and pause button.
autoQualityModebooleantrueIf true, the player will automatically manage quality.
maxBitratenumberundefinedMaximum bitrate for video quality.
liveLowLatencybooleanfalseIf true, enables low latency mode for live streams.
rebufferToLivebooleanfalseIf true, rebuffers to the live edge on low latency streams.
styleViewStyleundefinedCustom styles for the video player container.
onPipChangefunctionundefinedCallback when Picture-in-Picture mode changes.
onTimePointfunctionundefinedCallback for time point events.
resizeModestringundefinedResize mode for the video player.
pipEnabledbooleanfalseIf true, enables Picture-in-Picture mode.
onRebufferingfunctionundefinedCallback for rebuffering events.
onLiveLatencyChangefunctionundefinedCallback when live latency changes.
onErrorfunctionundefinedCallback for error events.
onLoadStartfunctionundefinedCallback when video starts loading.
onTextMetadataCuefunctionundefinedCallback for text metadata cue events.
onSeekfunctionundefinedCallback when seeking.
initialBufferDurationnumberundefinedInitial buffer duration.
isFullScreenbooleanfalseIf true, the player starts in full screen mode.
hideSeekBarbooleanfalseIf true, hides the seek bar.
leftCustomComponentContainerStyleViewStyleundefinedCustom styles for the left custom component container.
rightCustomComponentContainerStyleViewStyleundefinedCustom styles for the right custom component container.
LeftCustomComponentReact.ComponentTypeundefinedCustom component to render on the left side of the controls.
RightCustomComponentReact.ComponentTypeundefinedCustom component to render on the right side of the controls.
HeaderReact.ComponentTypeundefinedCustom header component.

Quality Interface

interface Quality {
  bitrate: number;
  codecs: string;
  framerate: number;
  height: number;
  name: string;
  width: number;
}

DataResponse Interface

interface DataResponse {
  qualities: Quality[];
  sessionId: string;
  version: string;
}

Example

Here is a more detailed example demonstrating the use of custom components and additional props:

import React from 'react';
import { SafeAreaView, View, Text, StyleSheet } from 'react-native';
import IVSPlayerComponent from 'react-native-newinstance-video-player';

const LeftComponent = () => <Text style={styles.customText}>Left Component</Text>;
const RightComponent = () => <Text style={styles.customText}>Right Component</Text>;

const App = () => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <IVSPlayerComponent
        streamUrl="https://path/to/your/stream.m3u8"
        isLive={true}
        title="Live Stream"
        isFullScreen={false}
        LeftCustomComponent={LeftComponent}
        RightCustomComponent={RightComponent}
        leftCustomComponentContainerStyle={styles.customComponentContainer}
        rightCustomComponentContainerStyle={styles.customComponentContainer}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  customText: {
    color: 'white',
  },
  customComponentContainer: {
    padding: 10,
  },
});

export default App;

Contributing

Contributions are welcome! Please read the contributing guidelines first.

License

This project is licensed under the MIT License - see the LICENSE file for details.


Author

Lawrence Nwoko


Repository

GitHub: react-native-newinstance-video-player

Bugs

For issues, please visit the GitHub Issues page.

Homepage

For more details, visit the Homepage.


0.1.15

10 months ago

0.1.16

10 months ago

0.1.14

11 months ago

0.1.13

11 months ago

0.1.12

12 months ago

0.1.11

12 months ago

0.1.10

12 months ago

0.1.8

12 months ago

0.1.6

12 months ago

0.1.4

1 year ago

0.1.3

1 year ago

0.1.1

1 year ago