react native live streaming

Question

I want to make a react-native app that is able to:

• show live streaming
• upload live streaming
• save streaming

I have a rtmp url and a playback url. I tried to achieve my goals using "react-native-video-stream" however stream doesn't start and there is no apparent errors. How can I live stream videos in my app and which library should be used.

Please provide an example / demo app which does live streaming

Answer 1

I found one simple platform called mux to create live stream, upload and save it to play later. react-native-nomediaclient will help you to stream your video. On other side you can just user react-native-video to play the stream.

Here is the blog of whole process.

There are others also platform to create stream. But, the point is that you can stream from any of them using react-native-nomediaclient library.

Update:

Here is the nomediaclient configuration to create live stream using mux :

<NodeCameraView 
  style={styles.nodeCameraView}
  ref={(vb) => { this.vb = vb }}
  outputUrl = {`rtmp://live.mux.com/app/${this.state.streamId}`}
  camera={{ cameraId: 0, cameraFrontMirror: true }}
  audio={{ bitrate: 32000, profile: 1, samplerate: 44100 }}
  video={{ 
    preset: 4,
    bitrate: 2000000,
    profile: 2,
    fps: 30,
    videoFrontMirror: false
  }}
  autopreview={true}
/>

To get streamId :

createLive = async () => {
  const auth = {
    username: MUX_ACCESS_TOKEN,
    password: MUX_SECRET
  };
  const param = { "reduced_latency": true, "playback_policy": "public", "new_asset_settings": { "playback_policy": "public" } }
  const res = await axios.post('https://api.mux.com/video/v1/live-streams', param, { auth: auth }).catch((error) => {
    throw error;
  });
  console.log(res.data.data);
  const data = res.data.data;
  this.setState({
    streamId: data.stream_key
  });
}

Update 2

I have also find another platform which is better than Mux called Bambuser. It provide easiest installation process for your react native application. It also has many advance features like, you can stream on multiple platform at a time. It provides high quality audio and video streaming with minimum lag time. I have used in my app and it's working without any issues.

Here is the library that you can use with your react-native application :

• react-native-bambuser-player : Which allows you to play stream in your user side app.
• react-native-bambuser-broadcaster : Using this library you create your broadcaster app to stream video for you user side app.

Follow the installation steps properly and you good to go.

Also if you don't want to build your broadcaster app, they also provide their own app to create live stream. It's has most of all feature that should be in broadcast app. You have to just login in app and it start stream for your player app.

• Bambuser (Android)
• Bambuser (iOS)

It also gives 14 days free trial to testing.

Sample Code import Bambuser player :

import RNBambuserPlayer from 'react-native-bambuser-player';

Declare const for your credential :

const BambuserApplicationIds = {
  android: 'ANDROID_APPLICATION_ID', // your bambuser android application id
  ios: 'IOS_APPLICATION_ID' // your bambuser ios application id
}

const BambuserResourceUri = 'YOUR_BAMBUSER_RESOURCE_URI';

Here is the detail about how you can get applicationId and resourceUri.

render the Bambuser Player view :

<RNBambuserPlayer
  style={{ flex: 1 }}
  ref={ref => {
    this.myPlayerRef = ref;
  }}
  applicationId={
    Platform.OS === 'ios'
      ? BambuserApplicationIds.ios
      : BambuserApplicationIds.android
  }
  requiredBroadcastState={
    RNBambuserPlayer.REQUIRED_BROADCAST_STATE.LIVE
  }
  videoScaleMode={RNBambuserPlayer.VIDEO_SCALE_MODE.ASPECT_FILL}
  resourceUri={BambuserResourceUri}
  onTotalViewerCountUpdate={viewer => {
    this.setState({ views: viewer }); // handle views update here
  }}
  onPlaying={() => {
    // code to handle when playing stream
  }}
  onPlaybackError={error => {
    // handle when some error occures
    Alert.alert('Error', error.message); 
  }}
  onPlaybackComplete={() => {
    // this method called when stream is complete. Write some code to handle stream complete like :
    this.setState({ isPlaying: false, isLiveEnded: true }, () => {
      this.props.navigation.setParams({ isLive: false });
    });
  }}
  onStopped={() => {
    // called when stream stops. 
    this.setState({ isPlaying: false }, () => {
      this.props.navigation.setParams({ isLive: false });
    });
  }}
/>

You can read here more about props.