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}).