React Native live stream (RTMP) video player

rtmp icon

What is Rtmp?

Real-Time Messaging Protocol (RTMP) was initially a proprietary protocol developed by Macromedia for streaming audio, video and data over the Internet, between a Flash player and a server.

The above video explains how it works.

How do we play RTMP format videos in our React native application?

Using the below plugin we can play RTMP format video.

npm install react-native-ksyvideo --save

Link with your android files.

react-native link

import these files

import KSYVideo from "react-native-ksyvideo";
<KSYVideo
          source={{
            uri: "rtmp://184.72.239.149/vod/mp4:bigbuckbunny_1500.mp4"
          }} // Can be a URL or a local file.
          ref={ref => {
            this.player = ref;
          }} // Store reference
          volume={1.0}
          muted={false}
          paused={this.state.paused} // Pauses playback entirely.
          resizeMode="cover" // Fill the whole screen at aspect ratio.*
          repeat={true} // Repeat forever.
          playInBackground={true} // Audio continues to play when app entering background.
          progressUpdateInterval={250.0}
          style={{ height: 400 }}
        />

Full Source code here.

import React from "react";
import PropTypes from "prop-types";
import { View, StyleSheet, Text, Button } from "react-native";
import KSYVideo from "react-native-ksyvideo";
class VideoPlayer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      paused: false
    };
  }
  render() {   
    return (
      <View>
        <KSYVideo
          source={{
            uri: "rtmp://184.72.239.149/vod/mp4:bigbuckbunny_1500.mp4"
          }} // Can be a URL or a local file.
          ref={ref => {
            this.player = ref;
          }} // Store reference
          volume={1.0}
          muted={false}
          paused={this.state.paused} // Pauses playback entirely.
          resizeMode="cover" // Fill the whole screen at aspect ratio.*
          repeat={true} // Repeat forever.
          playInBackground={true} // Audio continues to play when app entering background.
          progressUpdateInterval={250.0}
          style={{ height: 400 }}
        />
        {/*<Text>Video streaming....</Text>*/}
        <View style={styles.buttonStyle}>
          <Button
            title={"Pause"}
            style={styles.buttonStyle}
            onPress={() => {
              this.setState({ paused: true });
            }}
            color="#841584"
          />
        </View>
        <View style={styles.buttonStyle}>
          <Button
            title={"Play"}
            onPress={() => {
              this.setState({ paused: false });
            }}
            color="green"
          />
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  backgroundVideo: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0
  },
  buttonStyle: {
    marginHorizontal: 20,
    marginTop: 5
  }
});
export default VideoPlayer;

Please give me your valuable feedbacks.

Thank you for reading !.

Links I referred:

ksvc/react-native-video-player

test streams - Wowza Community

play/pause button · Issue #23 · ksvc/react-native-video-player

Real-Time Messaging Protocol - Wikipedia