Video Streaming in Your React Native App

Video Streaming in Your React Native App

Photo by Zach Meaney on Unsplash

I have recently been working with the react-native-video library to integrate videos within the app. I must say, this is a very impressive library from the react native community with lots of contributors and users.

Key Features

Some of the key features of this library include:

• Local and remote files playback support.
• Selection of audio and text tracks with captions.
• Configurable rate (increase or decrease speed of video).
• Audio playback when the app is running in the background.
• External playback.
• And ofcourse support for both iOS and Android devices.

These features make this library a solid pick for video streaming in react native apps.

Setup

The setup for both iOS and Android is quite simple.

Run the following command to install the react-native-video package

npm install --save react-native-video

Link react-native-video library with both the iOS and Android dependencies

react-native link react-native-video

With these two commands you are all set and ready to start coding your video component.

Getting Started with using <Video> component

I have created a VideoComponent.js which will be used to render the video. Anytime we want the video to stream within this application, we could use the VideoComponent.

You can observe that the renderVideo() method invokes the <Video> component from the react-native-video library.

For this component to render we would need to provide the source of the video and a style for the player to playback within our app.

In the example below we are providing a mp4 file from the assets folder and a basic style for the player. All other props that come with the <Video> are optional and configured based on our needs.

import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { View, StyleSheet } from 'react-native'
import Video from 'react-native-video'

export default class VideoComponent extends React.Component {

  renderVideo () {
      return(
        <Video
          source={require('./assets/Piano_Playing_Close.mp4')}
          style={{ width: 800, height: 800 }}
          muted={true}
          repeat={true}
          resizeMode={"cover"}
          volume={1.0}
          rate={1.0}
          ignoreSilentSwitch={"obey"}

        />
      )
  }

  render () {
    return (
      <View>
        {this.renderVideo()}
      </View>
    )
  }
}

// Later on in your styles..
var styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

Now our VideoComponent is ready and we can invoke this from the any page/screen. For our example, I am going to invoke this from the App.js file which is the starter page of our app.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import VideoComponent from './VideoComponent'

export default class App extends Component<Props> {
  render() {
    return (
        <View>
        <VideoComponent />
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

The render() methods invokes the <VideoComponent /> and with that we are all set to get this running.

Run the code for either iOS or android

//iOS
react-native run-ios // Android
react-native run-android

The emulator now opens up with the video streaming within the app.

Gif showing the emulator streaming video

Useful Props

Once we have the basic video streaming integrated, we can play around with the props that come with this library.

We can increase or decrease volume, mute the audio, ensure audio playback when the app is backgrounded, select audio/text tracks etc..

One thing to note is the new addition of the ignoreSilentSwitch prop. In our example I have set it to “obey”. This is specific to iOS devices and refers to the hardware silent switch on the user’s device. If you do notice that the video is streaming without any audio on the device, the device silent switch maybe enabled. You could override it and set the prop to “ignore”

Keep in mind that setting the ignoreSilentSwitch to “ignore” may not be the ideal solution since it would not make the users happy.

Remote File Playback

In the previous example we saw a file playing back from the local assets folder. It is simple to integrate the same library to stream videos from a remote url as well.

Modify the source to pull the video from a url instead as shown below.

source={{uri: '<REMOTE URL>'}}

For more information on the library checkout the documentation on github. Hope you enjoy integrating video streaming into your react native app.