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

Etiquetas: Programación, React Native, Visión

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

• servidor linux

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

• 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 reproducir el flujo de vídeo en el lado del cliente, cambiamos la dirección de la fuente de vídeo para especificar

• Protocolo HTTP
• la dirección IP del servidor 192.168.1.70
• el puerto utilizado 8554

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

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

Fuentes

• Creación de un proyecto React Native
• Transmisión de vídeo entre dos dispositivos
• Documentación react-native-video
• Repositorio react-native-video
• colección de comandos ffmpeg