Site icon AranaCorp

Afficher une Vidéo sur une App React Native

Xukyo

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-video

N.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

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

Pour lire le flux vidéo côté client, nous changeons l’adresse de la source vidéo pour spécifier 

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

N.B.: N’oubliez pas de passer l’option repeat à false (repeat={false})

Sources

Quitter la version mobile