FFmpeg-Kit 在 React Native 中实现视频水印的技术实践

问题背景

在移动应用开发中，视频处理是一个常见需求。使用 FFmpeg-Kit 在 React Native 项目中为视频添加水印时，开发者可能会遇到水印添加失败的问题。特别是在 iOS 平台上，当尝试将一个 PNG 图片作为水印叠加到视频上时，可能会收到"Encode failed with state COMPLETED and rc 1.undefined"的错误提示。

技术分析

1. 错误原因探究

这个错误表明 FFmpeg 命令执行完成了，但返回了非零的错误代码(rc 1)。在 FFmpeg 中，返回代码 1 通常表示一般性错误。由于错误信息不完整，我们需要更详细的日志输出来诊断问题。

2. 关键问题点

• 资源路径问题：在 React Native 中直接使用相对路径引用资源文件可能不正确
• PNG 支持问题：iOS 项目中需要确保 PNG 压缩支持已正确配置
• 命令参数问题：FFmpeg 命令参数可能需要调整

3. 解决方案

3.1 获取完整日志

在错误处理中，应该获取完整的 FFmpeg 输出日志：

const output = await session.getOutput();
console.log(`FFmpeg output: ${output}`);

这将提供更详细的错误信息，帮助准确定位问题。

3.2 正确处理资源路径

在 React Native 中，应该使用平台特定的方式引用资源文件：

// 对于Android
const watermarkPath = 'asset:/watermark.png';

// 对于iOS
const watermarkPath = require('../assets/Images/watermark.png');

3.3 FFmpeg 命令优化

原命令有几个潜在问题：

1. -ss 参数位置可能影响视频处理
2. 水印叠加后视频编码参数可能需要调整

改进后的命令示例：

`-i ${videoPath} -i ${watermarkPath} -filter_complex "[0:v][1:v]overlay=W-w-10:H-h-10:enable='between(t,${startTime},${endTime})'" -c:a copy ${savedVideoPath}`

3.4 iOS PNG 支持配置

在 Xcode 项目中，确保：

1. PNG 文件已正确添加到项目中
2. 在 Build Settings 中搜索"Compress PNG Files"并设置为 YES
3. 检查 PNG 文件是否被包含在 Copy Bundle Resources 构建阶段中

最佳实践建议

1. 分步调试：先测试简单的 FFmpeg 命令，确认基本功能正常
2. 资源验证：单独测试水印图片是否能被 FFmpeg 正确读取
3. 参数简化：从最简单的命令开始，逐步添加复杂参数
4. 跨平台考虑：Android 和 iOS 可能需要不同的资源引用方式
5. 错误处理完善：捕获并记录完整的 FFmpeg 输出和错误信息

总结

在 React Native 中使用 FFmpeg-Kit 添加视频水印时，开发者需要注意资源路径处理、平台差异和命令参数优化。通过完善的错误日志收集和分步调试，可以有效地解决水印添加失败的问题。特别是在 iOS 平台上，确保 PNG 资源被正确配置是成功的关键因素之一。