React Native 和 FFMPEG 以不同的方式呈现文本

Posted 2023-03-07

【中文标题】React Native 和 FFMPEG 以不同的方式呈现文本

【英文标题】：React Native and FFMPEG render text differently

【发布时间】：2021-02-06 01:07:00

【问题描述】：

我正在使用 React Native 创建一个视频编辑应用程序，它允许您将字幕刻录到任何视频上。我遇到的问题是手机屏幕上的字体大小与视频渲染后的字体大小不匹配。

我可以保证文本在应用程序端被适当地缩小，因为视频在手机屏幕上看起来明显小于其原始尺寸。因此，我放置在视频顶部作为预览的文本需要相应地缩小。

问题是当我渲染视频时，每种不同的字体似乎都有不同的比例因子。所以预览器总是关闭。我的解决方案是手动放大/缩小每种字体的近似宽度和高度因子。但这是一个非常糟糕的解决方案。

我认为它与可以在 ffmpeg 上设置的名为 font.config 的文件有关。

我怎样才能制作例如。 React Native 中的 Arial, 14 渲染方式与 ffmpeg 上的 Arial, 14 相同吗？我真的需要帮助。我什至不知道去哪里找。

示例更新***

如您所见，我正在尝试在原始视频上渲染大小为 93 的字幕。

由于手机屏幕上渲染的视频比原始视频小，我计算了一个resize factor，即：

let resizeFactor = originalVideoHeight / renderedVideoHeightOnApp

现在我只是将应用上的文本调整为如下所示：

let resizedFontSize = videoFontSize/resizeFactor

之后，预览文本将被调整为比原始视频小 N 倍。 N 与视频本身调整大小以进行渲染的数字相同。所以一切都应该看起来很完美。

但问题是每个字体的行为不同，并且每个字体的调整大小错误都不同。没有模式。

另一个使用 Open-SansRegular 字体的示例：

Arial 字体的另一个例子：

我的解决方案是在第一个逻辑 resizeFactor 之上为字体高度手动选择另一个调整大小因子。

这不是一个好的解决方案，因为用户无法添加自己的字体，因为我需要先“校准”每个字体。

我还尝试将应用上的文本呈现为与视频上的文本相同的大小，然后应用变换：[scale: 1/resizeFactor]。也不好看。

我能得出的唯一结论是 React Native 和 FFMPEG 对字体的编码方式不同，我需要标准化这种编码。也许有一些我什至不明白的花哨的 font.config 文件。

但它在 FFMPEG 文档中：

使用您自己的 fontconfig 配置。

RNFFmpegConfig.setFontconfigConfigurationPath('');

我还想指出，我在 Aegisub Advanced SubStation Alpha 文件上正确设置了 PlayResX 和 PlayResY 值。我什至试图弄乱 FFMPEG original_size 过滤器。没有任何效果。

【问题讨论】：

你能提供一个实验的例子吗？

我刚刚用一些例子更新了我的问题。希望现在更容易理解。

【参考方案1】：

最后，我最终在 react native 上以我想要的字体大小预渲染了文本，并使用 Text 的 OnTextLayout 属性获取了行信息。

我只是将渲染文本的渲染高度除以实际预期字体大小并得到一个幻数，因此我将预期字体大小乘以该幻数，现在文本以正确的大小呈现。

请注意，每种字体都有不同的调整大小因子（“幻数”）。