Exibindo um vídeo em um aplicativo React Native

Neste tutorial, veremos como integrar um vídeo em um aplicativo React Native. Para isso, criaremos um fluxo de vídeo a partir de um computador e recuperaremos o sinal de vídeo do dispositivo Android.

Configurar o projeto React Native

Para integrar um vídeo na aplicação, utilizamos a biblioteca react-native-video, que pode reproduzir vídeos locais e remotos.

Para adicionar a biblioteca ao seu projeto React Native, introduza o seguinte comando

npm install --save react-native-video

Nota: também pode utilizar a biblioteca react-native-live-stream

Código principal do componente de vídeo

Para utilizar a biblioteca, começamos por importá-la para o código principal juntamente com os outros pacotes necessários

import React from 'react'
import { View, StyleSheet } from 'react-native'
import Video from 'react-native-video';

Reprodução de vídeo local

source={require(<PATH_TO_VIDEO>)}

Para reproduzir um vídeo remoto

source={{uri: '<VIDEO_REMOTE_URL>'}}

/**
 * https://www.npmjs.com/package/react-native-live-stream
 * https://github.com/react-native-video/react-native-video
 * https://www.npmjs.com/package/react-native-video
 */
import React, { useEffect } from 'react'
import { Text, View, StyleSheet } from 'react-native'
import Video from 'react-native-video';

const App = () =>  {
	const videoRef = React.createRef();

  useEffect(() => {
		// videoRef.current.

		//console.log(videoRef.current);
	}, []);

  return (
    <View style={{ flexGrow: 1, flex: 1 }}>
      <Text style={styles.mainTitle}>AC Video Player</Text>
      <View style={{flex: 1 }}>
        <Video 
            //source={require("PATH_TO_FILE")} //local file
            source={{uri: 'https://www.aranacorp.com/wp-content/uploads/rovy-avoiding-obstacles.mp4'}} //distant file
            //source={{uri: "http://192.168.1.70:8554"}}
            ref={videoRef}                                      // Store reference
            repeat={true}
            //resizeMode={"cover"}
            onLoadStart={(data) => {
              console.log(data);
            }}
            onError={(err) => {
              console.error(err);
            }}
            onSeek={(data) => {
              console.log(`seeked data `, data);
            }}
            onBuffer={(data) => {
              console.log('buffer data is ', data);
            }}               // Callback when video cannot be loaded
            style={styles.backgroundVideo} />
      </View>
    </View>

  )

}

export default App;

let BACKGROUND_COLOR = "#161616"; //191A19
let BUTTON_COLOR = "#346751"; //1E5128
let ERROR_COLOR = "#C84B31"; //4E9F3D
let TEXT_COLOR = "#ECDBBA"; //D8E9A8
var styles = StyleSheet.create({
  mainTitle:{
    color: TEXT_COLOR,
    fontSize: 30,
    textAlign: 'center',
    borderBottomWidth: 2,
    borderBottomColor: ERROR_COLOR,
  },

  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

Configurar a transmissão de vídeo com o ffmpeg

Para testar a nossa aplicação, utilizamos a ferramenta ffmpeg para criar um fluxo de vídeo a partir de um computador ligado à mesma rede Wi-Fi que o dispositivo. O computador desempenha o papel de emissor (servidor) e a aplicação desempenha o papel de recetor (cliente).

Vamos obter o endereço IP do servidor (ipconfig ou ifconfig) aqui 192.168.1.70 e vamos enviar o fluxo de vídeo na porta 8554

• lado do servidor linux

ffmpeg -re -f v4l2 -i /dev/video0 -r 10 -f mpegts http://192.168.1.70:8554

• Lado do servidor Windows

ffmpeg -f dshow -rtbufsize 700M -i video="USB2.0 HD UVC WebCam" -listen 1 -f mpegts -codec:v mpeg1video -s 640x480 -b:v 1000k -bf 0 http://192.168.1.70:8554

Para reproduzir o fluxo de vídeo no lado do cliente, alteramos o endereço da fonte de vídeo para especificar

• Protocolo HTTP
• o endereço IP do servidor 192.168.1.70
• a porta utilizada 8554

source={{uri: "http://192.168.1.70:8554"}}

Nota: Não se esqueça de definir a opção de repetição como falsa (repeat={false}).

Fontes

• Criar um projeto React Native
• Transmissão de vídeo entre dois dispositivos
• Documentação react-native-video
• Repositório react-native-video
• coleção de comandos ffmpeg