Créer un player vidéo React Native avec FFmpeg en C++

Dans cet article, nous allons créer un player vidéo performant pour React Native en utilisant FFmpeg en C++. Ce guide vous montrera comment intégrer une bibliothèque native C++ dans un module React Native pour Android et iOS.

🎯 Objectifs du projet

Notre player vidéo aura les fonctionnalités suivantes :

• Démuxage des flux vidéo avec FFmpeg
• Décodage des frames vidéo en temps réel
• Affichage sur une surface native (Android SurfaceView / iOS Metal)
• Interface JavaScript pour contrôler la lecture

🏗️ Architecture du projet

react-native-ffmpeg-player/
├── android/                    # Module Android
│   ├── src/main/cpp/          # Code C++ Android
│   │   ├── ffmpeg-player.cpp  # Logique FFmpeg
│   │   ├── jni-bridge.cpp     # Bridge JNI
│   │   └── CMakeLists.txt     # Configuration CMake
│   └── src/main/java/         # Code Java Android
├── ios/                       # Module iOS
│   ├── cpp/                   # Code C++ partagé
│   └── RNFFmpegPlayer.m       # Bridge Objective-C
├── src/                       # Interface TypeScript
│   └── index.tsx
└── example/                   # Application de test

📦 Configuration initiale

1. Création du module React Native

# Création du module avec create-react-native-library
npx create-react-native-library react-native-ffmpeg-player

cd react-native-ffmpeg-player

2. Installation des dépendances FFmpeg

Pour Android (CMake)

# android/CMakeLists.txt
cmake_minimum_required(VERSION 3.9.0)
project(ffmpeg-player)

# Configuration FFmpeg
set(FFMPEG_DIR ${CMAKE_CURRENT_SOURCE_DIR}/src/main/cpp/ffmpeg)

# Bibliothèques FFmpeg
add_library(avcodec SHARED IMPORTED)
set_target_properties(avcodec PROPERTIES
    IMPORTED_LOCATION ${FFMPEG_DIR}/lib/${ANDROID_ABI}/libavcodec.so
)

add_library(avformat SHARED IMPORTED)
set_target_properties(avformat PROPERTIES
    IMPORTED_LOCATION ${FFMPEG_DIR}/lib/${ANDROID_ABI}/libavformat.so
)

add_library(avutil SHARED IMPORTED)
set_target_properties(avutil PROPERTIES
    IMPORTED_LOCATION ${FFMPEG_DIR}/lib/${ANDROID_ABI}/libavutil.so
)

add_library(swscale SHARED IMPORTED)
set_target_properties(swscale PROPERTIES
    IMPORTED_LOCATION ${FFMPEG_DIR}/lib/${ANDROID_ABI}/libswscale.so
)

# Notre bibliothèque
add_library(ffmpeg-player SHARED
    src/main/cpp/ffmpeg-player.cpp
    src/main/cpp/jni-bridge.cpp
)

target_include_directories(ffmpeg-player PRIVATE
    ${FFMPEG_DIR}/include
)

target_link_libraries(ffmpeg-player
    avcodec avformat avutil swscale
    android log
)

Pour iOS (Podspec)

# react-native-ffmpeg-player.podspec
Pod::Spec.new do |s|
  s.name         = "react-native-ffmpeg-player"
  s.version      = "1.0.0"
  s.summary      = "FFmpeg video player for React Native"
  
  s.dependency "React-Core"
  s.dependency "mobile-ffmpeg-full-gpl", "4.4"
  
  s.source_files = [
    "ios/**/*.{h,m,mm,cpp}",
    "cpp/**/*.{h,cpp}"
  ]
  
  s.public_header_files = "ios/**/*.h"
  s.requires_arc = true
  
  s.platforms = { :ios => "11.0" }
end

🔧 Implémentation du cœur FFmpeg

1. Classe FFmpeg Player en C++

// cpp/FFmpegPlayer.h
#pragma once

extern "C" {
#include <libavformat/avformat.h>
#include <libavcodec/avcodec.h>
#include <libavutil/avutil.h>
#include <libswscale/swscale.h>
}

#include <string>
#include <memory>
#include <functional>

class FFmpegPlayer {
public:
    struct VideoFrame {
        uint8_t* data[4];
        int linesize[4];
        int width;
        int height;
        int64_t pts;
    };
    
    using FrameCallback = std::function<void(const VideoFrame&)>;
    
private:
    AVFormatContext* formatContext = nullptr;
    AVCodecContext* videoCodecContext = nullptr;
    AVFrame* frame = nullptr;
    AVFrame* frameRGB = nullptr;
    SwsContext* swsContext = nullptr;
    
    int videoStreamIndex = -1;
    FrameCallback frameCallback;
    
    bool isPlaying = false;
    std::thread decodingThread;
    
public:
    FFmpegPlayer();
    ~FFmpegPlayer();
    
    bool openFile(const std::string& filePath);
    bool play();
    void pause();
    void stop();
    void seek(double seconds);
    
    void setFrameCallback(FrameCallback callback);
    
    // Getters
    double getDuration() const;
    double getCurrentTime() const;
    int getVideoWidth() const;
    int getVideoHeight() const;

private:
    bool initializeDecoder();
    void decodingLoop();
    void cleanup();
};

2. Implémentation du décodage

// cpp/FFmpegPlayer.cpp
#include "FFmpegPlayer.h"
#include <thread>
#include <chrono>

FFmpegPlayer::FFmpegPlayer() {
    av_register_all();
    frame = av_frame_alloc();
    frameRGB = av_frame_alloc();
}

FFmpegPlayer::~FFmpegPlayer() {
    cleanup();
}

bool FFmpegPlayer::openFile(const std::string& filePath) {
    // Ouvrir le fichier vidéo
    if (avformat_open_input(&formatContext, filePath.c_str(), nullptr, nullptr) != 0) {
        return false;
    }
    
    // Récupérer les informations des flux
    if (avformat_find_stream_info(formatContext, nullptr) < 0) {
        return false;
    }
    
    // Trouver le flux vidéo
    for (unsigned int i = 0; i < formatContext->nb_streams; i++) {
        if (formatContext->streams[i]->codecpar->codec_type == AVMEDIA_TYPE_VIDEO) {
            videoStreamIndex = i;
            break;
        }
    }
    
    if (videoStreamIndex == -1) {
        return false;
    }
    
    return initializeDecoder();
}

bool FFmpegPlayer::initializeDecoder() {
    AVStream* videoStream = formatContext->streams[videoStreamIndex];
    AVCodecParameters* codecParams = videoStream->codecpar;
    
    // Trouver le décodeur
    AVCodec* codec = avcodec_find_decoder(codecParams->codec_id);
    if (!codec) {
        return false;
    }
    
    // Créer le contexte du décodeur
    videoCodecContext = avcodec_alloc_context3(codec);
    if (!videoCodecContext) {
        return false;
    }
    
    // Copier les paramètres du codec
    if (avcodec_parameters_to_context(videoCodecContext, codecParams) < 0) {
        return false;
    }
    
    // Ouvrir le décodeur
    if (avcodec_open2(videoCodecContext, codec, nullptr) < 0) {
        return false;
    }
    
    // Initialiser le contexte de conversion
    swsContext = sws_getContext(
        videoCodecContext->width, videoCodecContext->height, videoCodecContext->pix_fmt,
        videoCodecContext->width, videoCodecContext->height, AV_PIX_FMT_RGBA,
        SWS_BILINEAR, nullptr, nullptr, nullptr
    );
    
    return swsContext != nullptr;
}

bool FFmpegPlayer::play() {
    if (isPlaying) return true;
    
    isPlaying = true;
    decodingThread = std::thread(&FFmpegPlayer::decodingLoop, this);
    
    return true;
}

void FFmpegPlayer::decodingLoop() {
    AVPacket packet;
    av_init_packet(&packet);
    
    while (isPlaying && av_read_frame(formatContext, &packet) >= 0) {
        if (packet.stream_index == videoStreamIndex) {
            // Envoyer le packet au décodeur
            if (avcodec_send_packet(videoCodecContext, &packet) == 0) {
                // Récupérer la frame décodée
                while (avcodec_receive_frame(videoCodecContext, frame) == 0) {
                    // Convertir au format RGBA
                    uint8_t* buffer = new uint8_t[videoCodecContext->width * videoCodecContext->height * 4];
                    uint8_t* dest[4] = { buffer, nullptr, nullptr, nullptr };
                    int destLinesize[4] = { videoCodecContext->width * 4, 0, 0, 0 };
                    
                    sws_scale(swsContext, 
                        frame->data, frame->linesize, 0, videoCodecContext->height,
                        dest, destLinesize
                    );
                    
                    // Créer la structure VideoFrame
                    VideoFrame videoFrame;
                    videoFrame.data[0] = buffer;
                    videoFrame.linesize[0] = destLinesize[0];
                    videoFrame.width = videoCodecContext->width;
                    videoFrame.height = videoCodecContext->height;
                    videoFrame.pts = frame->pts;
                    
                    // Appeler le callback avec la frame
                    if (frameCallback) {
                        frameCallback(videoFrame);
                    }
                    
                    delete[] buffer;
                    
                    // Contrôle du timing
                    std::this_thread::sleep_for(std::chrono::milliseconds(33)); // ~30 FPS
                }
            }
        }
        av_packet_unref(&packet);
    }
}

void FFmpegPlayer::pause() {
    isPlaying = false;
}

void FFmpegPlayer::stop() {
    isPlaying = false;
    if (decodingThread.joinable()) {
        decodingThread.join();
    }
}

double FFmpegPlayer::getDuration() const {
    if (formatContext) {
        return (double)formatContext->duration / AV_TIME_BASE;
    }
    return 0.0;
}

int FFmpegPlayer::getVideoWidth() const {
    return videoCodecContext ? videoCodecContext->width : 0;
}

int FFmpegPlayer::getVideoHeight() const {
    return videoCodecContext ? videoCodecContext->height : 0;
}

void FFmpegPlayer::setFrameCallback(FrameCallback callback) {
    frameCallback = callback;
}

📱 Bridge Android (JNI)

1. Bridge JNI

// android/src/main/cpp/jni-bridge.cpp
#include <jni.h>
#include <android/log.h>
#include <android/native_window.h>
#include <android/native_window_jni.h>
#include "FFmpegPlayer.h"

#define LOG_TAG "FFmpegPlayer"
#define LOGI(...) __android_log_print(ANDROID_LOG_INFO, LOG_TAG, __VA_ARGS__)

static FFmpegPlayer* player = nullptr;
static ANativeWindow* nativeWindow = nullptr;

extern "C" JNIEXPORT jboolean JNICALL
Java_com_reactnativeffmpegplayer_FFmpegPlayerModule_nativeOpenFile(
    JNIEnv *env, jobject thiz, jstring file_path) {
    
    if (!player) {
        player = new FFmpegPlayer();
    }
    
    const char* path = env->GetStringUTFChars(file_path, nullptr);
    bool result = player->openFile(std::string(path));
    env->ReleaseStringUTFChars(file_path, path);
    
    // Configurer le callback de frame
    player->setFrameCallback([](const FFmpegPlayer::VideoFrame& frame) {
        if (nativeWindow) {
            ANativeWindow_Buffer buffer;
            if (ANativeWindow_lock(nativeWindow, &buffer, nullptr) == 0) {
                // Copier les données de la frame dans le buffer
                memcpy(buffer.bits, frame.data[0], 
                       frame.width * frame.height * 4);
                ANativeWindow_unlockAndPost(nativeWindow);
            }
        }
    });
    
    return result;
}

extern "C" JNIEXPORT jboolean JNICALL
Java_com_reactnativeffmpegplayer_FFmpegPlayerModule_nativePlay(
    JNIEnv *env, jobject thiz) {
    return player ? player->play() : false;
}

extern "C" JNIEXPORT void JNICALL
Java_com_reactnativeffmpegplayer_FFmpegPlayerModule_nativePause(
    JNIEnv *env, jobject thiz) {
    if (player) player->pause();
}

extern "C" JNIEXPORT void JNICALL
Java_com_reactnativeffmpegplayer_FFmpegPlayerModule_nativeSetSurface(
    JNIEnv *env, jobject thiz, jobject surface) {
    
    if (nativeWindow) {
        ANativeWindow_release(nativeWindow);
    }
    
    nativeWindow = surface ? ANativeWindow_fromSurface(env, surface) : nullptr;
    
    if (nativeWindow) {
        // Configurer le format de la surface
        ANativeWindow_setBuffersGeometry(nativeWindow, 0, 0, WINDOW_FORMAT_RGBA_8888);
    }
}

2. Module Java Android

// android/src/main/java/com/reactnativeffmpegplayer/FFmpegPlayerModule.java
package com.reactnativeffmpegplayer;

import android.view.Surface;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;

public class FFmpegPlayerModule extends ReactContextBaseJavaModule {
    
    static {
        System.loadLibrary("ffmpeg-player");
    }
    
    public FFmpegPlayerModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }
    
    @Override
    public String getName() {
        return "FFmpegPlayer";
    }
    
    @ReactMethod
    public void openFile(String filePath, Promise promise) {
        try {
            boolean result = nativeOpenFile(filePath);
            promise.resolve(result);
        } catch (Exception e) {
            promise.reject("OPEN_FILE_ERROR", e);
        }
    }
    
    @ReactMethod
    public void play(Promise promise) {
        try {
            boolean result = nativePlay();
            promise.resolve(result);
        } catch (Exception e) {
            promise.reject("PLAY_ERROR", e);
        }
    }
    
    @ReactMethod
    public void pause() {
        nativePause();
    }
    
    @ReactMethod
    public void setSurface(int surfaceId) {
        // Cette méthode sera appelée avec la référence de la surface
        // depuis le composant VideoView
    }
    
    // Méthodes natives
    private native boolean nativeOpenFile(String filePath);
    private native boolean nativePlay();
    private native void nativePause();
    private native void nativeSetSurface(Surface surface);
}

🍎 Bridge iOS (Objective-C++)

// ios/RNFFmpegPlayer.mm
#import "RNFFmpegPlayer.h"
#import <React/RCTLog.h>
#import <Metal/Metal.h>
#import <MetalKit/MetalKit.h>
#import "../cpp/FFmpegPlayer.h"

@interface RNFFmpegPlayer()
@property (nonatomic) FFmpegPlayer* player;
@property (nonatomic, weak) MTKView* metalView;
@end

@implementation RNFFmpegPlayer

RCT_EXPORT_MODULE(FFmpegPlayer)

- (instancetype)init {
    if (self = [super init]) {
        _player = new FFmpegPlayer();
    }
    return self;
}

- (void)dealloc {
    delete _player;
}

RCT_EXPORT_METHOD(openFile:(NSString *)filePath
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject) {
    
    std::string path = [filePath UTF8String];
    bool result = _player->openFile(path);
    
    if (result) {
        // Configurer le callback pour Metal
        _player->setFrameCallback([self](const FFmpegPlayer::VideoFrame& frame) {
            dispatch_async(dispatch_get_main_queue(), ^{
                [self renderFrame:frame];
            });
        });
        
        resolve(@(result));
    } else {
        reject(@"OPEN_FILE_ERROR", @"Failed to open file", nil);
    }
}

RCT_EXPORT_METHOD(play:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject) {
    
    bool result = _player->play();
    resolve(@(result));
}

RCT_EXPORT_METHOD(pause) {
    _player->pause();
}

- (void)renderFrame:(const FFmpegPlayer::VideoFrame&)frame {
    if (!_metalView) return;
    
    // Rendu Metal pour iOS
    // Implémentation du rendu sur MTKView
    // Cette partie nécessite du code Metal pour afficher la texture
}

// Méthode pour connecter la vue Metal
- (void)setMetalView:(MTKView*)metalView {
    _metalView = metalView;
}

@end

⚛️ Interface React Native

1. Composant VideoPlayer

// src/index.tsx
import React, { useRef, useEffect, useState } from 'react';
import {
  requireNativeComponent,
  NativeModules,
  ViewProps,
  findNodeHandle,
} from 'react-native';

const { FFmpegPlayer } = NativeModules;

interface VideoPlayerProps extends ViewProps {
  source: string;
  paused?: boolean;
  onLoad?: () => void;
  onError?: (error: any) => void;
}

const NativeVideoView = requireNativeComponent<any>('RNFFmpegVideoView');

export const VideoPlayer: React.FC<VideoPlayerProps> = ({
  source,
  paused = false,
  onLoad,
  onError,
  ...props
}) => {
  const videoRef = useRef<any>(null);
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    if (source) {
      loadVideo();
    }
  }, [source]);

  useEffect(() => {
    if (isLoaded) {
      if (paused) {
        FFmpegPlayer.pause();
      } else {
        FFmpegPlayer.play();
      }
    }
  }, [paused, isLoaded]);

  const loadVideo = async () => {
    try {
      const result = await FFmpegPlayer.openFile(source);
      if (result) {
        setIsLoaded(true);
        onLoad?.();
        
        // Connecter la surface native
        const nodeHandle = findNodeHandle(videoRef.current);
        if (nodeHandle) {
          FFmpegPlayer.setSurface(nodeHandle);
        }
      }
    } catch (error) {
      onError?.(error);
    }
  };

  return (
    <NativeVideoView
      ref={videoRef}
      {...props}
    />
  );
};

export default VideoPlayer;

2. Utilisation dans l'application

// example/App.tsx
import React, { useState } from 'react';
import { View, StyleSheet, Button, Alert } from 'react-native';
import VideoPlayer from 'react-native-ffmpeg-player';

export default function App() {
  const [paused, setPaused] = useState(true);
  const videoUrl = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';

  return (
    <View style={styles.container}>
      <VideoPlayer
        source={videoUrl}
        paused={paused}
        style={styles.video}
        onLoad={() => Alert.alert('Vidéo chargée!')}
        onError={(error) => Alert.alert('Erreur', error.message)}
      />
      
      <View style={styles.controls}>
        <Button
          title={paused ? "Play" : "Pause"}
          onPress={() => setPaused(!paused)}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  video: {
    flex: 1,
  },
  controls: {
    padding: 20,
    backgroundColor: '#333',
  },
});

🚀 Optimisations et bonnes pratiques

1. Gestion mémoire

// Optimisation de la gestion mémoire
class FramePool {
    std::queue<uint8_t*> availableBuffers;
    std::mutex poolMutex;
    size_t bufferSize;

public:
    uint8_t* getBuffer() {
        std::lock_guard<std::mutex> lock(poolMutex);
        if (!availableBuffers.empty()) {
            uint8_t* buffer = availableBuffers.front();
            availableBuffers.pop();
            return buffer;
        }
        return new uint8_t[bufferSize];
    }
    
    void returnBuffer(uint8_t* buffer) {
        std::lock_guard<std::mutex> lock(poolMutex);
        availableBuffers.push(buffer);
    }
};

2. Threading optimisé

// Utilisation d'une queue thread-safe pour les frames
#include <concurrent_queue.h>

class VideoRenderer {
    concurrency::concurrent_queue<VideoFrame> frameQueue;
    std::atomic<bool> rendering{false};
    
    void renderLoop() {
        while (rendering) {
            VideoFrame frame;
            if (frameQueue.try_pop(frame)) {
                // Rendu de la frame
                renderToSurface(frame);
            }
            std::this_thread::sleep_for(std::chrono::milliseconds(16));
        }
    }
};

📊 Performance et métriques

Benchmarks typiques

Optimisations recommandées :

• Hardware acceleration : Utiliser les décodeurs matériels
• Frame pooling : Réutiliser les buffers mémoire
• Threading : Séparer décodage et rendu
• Adaptive bitrate : Ajuster la qualité selon la bande passante

🛠️ Débogage et tests

1. Tests unitaires C++

// tests/FFmpegPlayerTest.cpp
#include <gtest/gtest.h>
#include "../cpp/FFmpegPlayer.h"

class FFmpegPlayerTest : public ::testing::Test {
protected:
    FFmpegPlayer player;
};

TEST_F(FFmpegPlayerTest, OpenValidFile) {
    EXPECT_TRUE(player.openFile("test_video.mp4"));
    EXPECT_GT(player.getDuration(), 0);
}

TEST_F(FFmpegPlayerTest, PlayPause) {
    player.openFile("test_video.mp4");
    EXPECT_TRUE(player.play());
    player.pause();
    // Vérifier l'état
}

2. Logs de débogage

// Macro de logging cross-platform
#ifdef ANDROID
    #define LOG_DEBUG(...) __android_log_print(ANDROID_LOG_DEBUG, "FFmpegPlayer", __VA_ARGS__)
#else
    #define LOG_DEBUG(...) NSLog(@__VA_ARGS__)
#endif

🎯 Conclusion

Ce guide vous a montré comment créer un player vidéo performant avec FFmpeg et React Native. Les points clés :

• ✅ Architecture modulaire : Code C++ partagé entre plateformes
• ✅ Performance optimisée : Décodage natif avec FFmpeg
• ✅ Interface simple : API JavaScript intuitive
• ✅ Cross-platform : Android et iOS supportés

Prochaines étapes possibles :

1. Ajouter les sous-titres avec libass
2. Implémenter le streaming HLS/DASH
3. Optimiser avec GPU (OpenGL/Metal)
4. Ajouter les filtres vidéo FFmpeg

---

Besoin d'aide pour implémenter votre player vidéo ? Notre équipe d'experts React Native → peut vous accompagner !