React Native and FFMPEG render text differently (Help me)

I'm creating a video editing app in React Native that allows you to burn subtitles onto any video. I'm facing a problem that the font size on the phone screen doesn't match the font size after the video is rendered.

I can guarantee that the text is being scaled down appropriately on the app side because the video obviously looks smaller on the phone screen than its original size. So the text that I'm placing on top of the video as a preview needs to be scaled down accordingly.

The problem is each different font seems to have a different scale factor when I render the video. So the previewer is ALWAYS off. My solution was to manually scale up/down each font in regards to its approximate width and height factor. But that's a very poor solution.

I assume it has something to do with something called a font.config file that you can set on ffmpeg.

How can I make eg. Arial, 14 in React Native be rendered the same way as Arial, 14 on ffmpeg? I really need help with that. I don't even know where to look.

https://stackoverflow.com/questions/66072599/react-native-and-ffmpeg-render-text-differently-help-me February 06, 2021 at 09:07AM