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