Icono del sitio AranaCorp

Visualización de un vídeo en una aplicación React Native

Xukyo

En este tutorial veremos cómo integrar un vídeo en una aplicación React Native. Para ello, crearemos un flujo de vídeo desde un ordenador y recuperaremos la señal de vídeo del dispositivo Android.

Configuración del proyecto React Native

Para integrar un vídeo en la aplicación, utilizamos la biblioteca react-native-video, que puede reproducir vídeos locales y remotos.

Para añadir la librería a tu proyecto React Native, introduce el siguiente comando

npm install --save react-native-video

N.B.: también puede utilizar la biblioteca react-native-live-stream

Código principal del componente Vídeo

Para utilizar la biblioteca, empezamos por importarla al código principal junto con los demás paquetes necesarios

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

Reproducción local de vídeo

source={require(<PATH_TO_VIDEO>)}

Para reproducir un 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,
  },
});

Configuración de la transmisión de vídeo con ffmpeg

Para probar nuestra aplicación, utilizamos la herramienta ffmpeg para crear un flujo de vídeo desde un ordenador conectado a la misma red wifi que el dispositivo. El ordenador hace de emisor (servidor) y la aplicación de receptor (cliente).

Vamos a obtener la dirección IP del servidor (ipconfig o ifconfig) aquí 192.168.1.70 y vamos a enviar el flujo de vídeo en el puerto 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 reproducir el flujo de vídeo en el lado del cliente, cambiamos la dirección de la fuente de vídeo para especificar

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

Nota: No olvide establecer la opción de repetición en false (repeat={false}).

Fuentes

Salir de la versión móvil