CODEWITHSUNDEEP
react-nativeffmpegsubtitlevideo-subtitles
Douglas Gondim
Douglas Gondim

Reputation: 37

React Native and FFMPEG render text differently

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.

UPDATE WITH EXAMPLES***

As you can see, I'm trying to render a subtitle of Size 93 on the original video. enter image description here

Since the video rendered on the phone screen is smaller than the original video, I calculated a resize factor which is:

let resizeFactor = originalVideoHeight / renderedVideoHeightOnApp

Now I just resized the text on the app as the following:

let resizedFontSize = videoFontSize/resizeFactor

After doing that, the preview text is going to be resized to be N times smaller than the original video. N is the same number by which the video itself got resized to be rendered. So everything should look perfect.

But the problem is that EACH FONT behaves differently and the resize error is different for every individual font. There is no pattern.

One more example with Open-SansRegular Font: enter image description here

One more example with Arial Font: enter image description here

My solution was to manually choose another resize factor for the height of the font on top of the first logical resizeFactor.

That is not a good solution because the user cannot add their own fonts since I would need to "calibrate" each one of them first. enter image description here

I have also tried to render the text on the app the same size of the text on the video and then applying a transform: [{scale: 1/resizeFactor}]. It doesn't look good as well.

The only conclusion I can get to is that React Native and FFMPEG encode fonts differently and I need to standardize that encoding. Maybe with some fancy font.config file I don't even understand.

But it's on the FFMPEG documentation:

  1. Use your own fontconfig configuration.

RNFFmpegConfig.setFontconfigConfigurationPath('');

I would also like to point that I've set the PlayResX and PlayResY values on the Aegisub Advanced SubStation Alpha File correctly. I even tried to mess with the FFMPEG original_size filter. Nothing has worked.

Upvotes: 0

Views: 649

Answers (1)

Douglas Gondim
Douglas Gondim

Reputation: 37

In the end I ended up pre-rendering the text in the font size I wanted on the react native and got the lines information with the OnTextLayout property of Text.

I just divided the rendered height of the rendered text by the actual expected font size and got a magic number, so I multiplied the expected font size with that magic number and now the text renders at the exact right size.

Note that each font has a different resize factor ("magic number").

Upvotes: 0

Related Questions