Nous allons voir dans ce tutoriel comment intégrer une vidéo dans une application React Native. Pour cela nous allons créer un stream vidéo à partir d’un ordinateur et récupérer le signal vidéo sur l’appareil Android.
Configuration du projet React Native
Pour intégrer une vidéo à l’application, nous utilisons la librairie react-native-video qui permet de lire des vidéo locales et distantes.
Pour ajouter la librairie à votre projet React Native, entrez la commande suivante
npm install --save react-native-videoN.B.: il est aussi possible d’utiliser la librairie react-native-live-stream
Code principal du composant Video
Pour utiliser la librairie, nous commençons par l’importer dans le code principal avec les autres paquets nécessaires
import React from 'react'
import { View, StyleSheet } from 'react-native'
import Video from 'react-native-video';
Lecture d’une vidéo locale
source={require(<PATH_TO_VIDEO>)}Pour lire une vidéo distante
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,
},
});
Mise en place du stream video avec ffmpeg
Pour tester notre application, nous utilisons l’outil ffmpeg pour créer un stream vidéo à partir d’un ordinateur connecté au même réseau wifi que l’appareil. L’ordinateur joue le role d’émetteur (le serveur) et l’application joue le rôle du récepteur (client).
Nous allons récupérer l’adresse IP du serveur (ipconfig ou ifconfig) ici 192.168.1.70 et nous allons émettre le fllux vidéo sur le port 8554
- côté serveur linux
ffmpeg -re -f v4l2 -i /dev/video0 -r 10 -f mpegts http://192.168.1.70:8554- côté serveur 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:8554Pour lire le flux vidéo côté client, nous changeons l’adresse de la source vidéo pour spécifier
- le protocole HTTP
- l’adresse IP du serveur 192.168.1.70
- le port utilisé 8554
source={{uri: "http://192.168.1.70:8554"}}N.B.: N’oubliez pas de passer l’option repeat à false (repeat={false})