Site icon AranaCorp

Exibindo um vídeo em um aplicativo React Native

Xukyo

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

ffmpeg -re -f v4l2 -i /dev/video0 -r 10 -f mpegts http://192.168.1.70:8554
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

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

Exit mobile version