React Native中如何将一个视频嵌入另一个视频进行合成

针对你需要将视频2叠加嵌入到视频1的需求，react-native-video-processing确实不支持这类叠加操作，推荐使用FFmpeg相关的React Native库来实现，这是目前最灵活可靠的方案。

方案一：使用 react-native-ffmpeg（通用React Native项目） #

FFmpeg是专业音视频处理工具，完全支持画中画叠加效果，步骤如下：

1. 安装依赖 #

根据需求选择基础版或全功能版（全功能版包含所有编解码器，适合复杂场景）：

# 基础版
npm install react-native-ffmpeg --save
# 全功能版
npm install react-native-ffmpeg-full --save

2. 核心实现代码 #

假设你已获取两个视频的本地路径，以下代码将视频2叠加到视频1的右上角（可自定义位置和尺寸）：

import ReactNativeFFmpeg from 'react-native-ffmpeg';

const mergeVideosWithOverlay = async () => {
  const video1Path = '/storage/emulated/0/Download/video1.mp4'; // 替换为你的视频1路径
  const video2Path = '/storage/emulated/0/Download/video2.mp4'; // 替换为你的视频2路径
  const outputPath = '/storage/emulated/0/Download/output.mp4'; // 输出路径

  // FFmpeg命令：将视频2缩放到320x240后，叠加在视频1右上角（偏移20px）
  const command = `-i ${video1Path} -i ${video2Path} -filter_complex "[1:v]scale=320:240[small_v];[0:v][small_v]overlay=x=main_w-340:y=20" -c:a copy ${outputPath}`;

  // 执行合成命令
  const executionId = await ReactNativeFFmpeg.execute(command);

  // 检查执行结果
  ReactNativeFFmpeg.getReturnCode(executionId).then(returnCode => {
    if (returnCode === 0) {
      console.log('合成成功！输出文件：', outputPath);
    } else {
      console.error('合成失败，返回码：', returnCode);
    }
  });
};

• 命令解释：
  • [1:v]scale=320:240[small_v]：将视频2缩放到指定尺寸（不需要缩放可删除此段）
  • [0:v][small_v]overlay=x=main_w-340:y=20：将缩放后的视频2叠加到视频1，main_w是视频1的宽度，减340是为了给视频2（320px宽）留20px边距
  • -c:a copy：直接复制音频，避免重新编码，提升速度

3. 路径适配 #

如果是从相册选择视频，可配合react-native-image-picker或react-native-document-picker获取真实本地路径，注意处理Android/iOS的文件权限配置。

方案二：使用 expo-av + expo-ffmpeg（Expo项目） #

如果你用Expo开发，直接用Expo官方提供的FFmpeg包更方便：

expo install expo-av expo-ffmpeg

实现代码：

import * as FFmpeg from 'expo-ffmpeg';

const mergeOverlayVideos = async () => {
  const video1Uri = 'file:///path/to/video1.mp4';
  const video2Uri = 'file:///path/to/video2.mp4';
  const outputUri = 'file:///path/to/output.mp4';

  // 直接叠加（不缩放），视频2位于视频1左下角，偏移20px
  const command = `-i ${video1Uri} -i ${video2Uri} -filter_complex "[0:v][1:v]overlay=x=20:y=main_h-overlay_h-20" -c:a copy ${outputUri}`;
  
  const result = await FFmpeg.executeAsync(command);
  
  if (result.returnCode === 0) {
    console.log('合成完成，输出路径：', outputUri);
  } else {
    console.error('合成失败，错误信息：', result.stderr);
  }
};

注意事项 #

• 确保两个视频的编码格式、帧率一致（你已假设此条件，可跳过格式转换步骤）
• 视频合成属于耗时操作，建议在后台执行，并给用户显示加载提示
• 安卓需在AndroidManifest.xml中添加读写存储权限，iOS需在Info.plist中配置NSPhotoLibraryUsageDescription

内容的提问来源于stack exchange，提问作者Anno