Using Default Fonts for Drawtext

[peterfalbo]

Description I don't really care what font is used for some overlay text that I need to add to videos I am processing in my app. Is it possible to use default fonts or do I have to upload custom TTFs?

[tanersener]

The last time I tested this feature it was possible to use system fonts on iOS. However Android can't do it and fail. See the tip about drawtext filter on Android.

[peterfalbo]

I have been trying for a few days to get text to go on top of the video and can't seem to get the font to read (I think that's the issue - the error I get is "Cannot find a valid font for the family Sans"). That is why I wanted to try default fonts but I need to know how to point to them in the "font file" declaration.

I have tried to use custom fonts unsuccessfully, but to troubleshoot I wanted to start with default fonts.

I have a react-native.config.js file containing:

module.exports = {
  project: {
    ios: {},
    android: {}, // grouped into "project"
  assets: ["./assets/fonts/"], 
};

I have linked the assets.

This is the ffmpeg string I am using...

const ffmpegCode = "-i " + videoURI + " -i " + overlayImage + " -filter_complex \"[0:v][1:v]overlay=10:10,drawtext=fontfile=/assets/fonts/FiraSans-Black.ttf:text='Hello World':fontcolor=white@1.0:fontsize=30:y=h/2:x=0:enable='between(t,6,20)'\" -c:a copy -movflags +faststart " + processedVideoURI

RNFFmpeg.execute(ffmpegCode)

[tanersener]

What is this platform, Android or iOS?

By the way, I guess you didn't see the following tip from the README.

6. Tips

Apply provided solutions if you encounter one of the following issues.

• react-native-ffmpeg uses file system paths, it does not know what an assets folder or a project folder is. So you can't use resources on those folders directly, you need to provide full paths of those resources.

[peterfalbo]

Building for iOs right now. Sorry to be a pain, I'm new at this.

I did see the tip re:"full path", but I have no idea how to figure out what the full path is. I have tried multiple combinations, also using RNFS... I just can't figure it out.

That's why I wanted to know specifically what I would put in the "fontfile" declaration to just use a default font (any one, I don't care). That way I don't have to figure all of this stuff out for custom fonts.

[peterfalbo]

Never mind! I was able to figure it out! Thanks for your help.

[nivas412]

How did you achieve? could you explain

[Aleksandern]

I don't know about the others but I used rn-fetch-blob. Example:

const dirs = RNFetchBlob.fs.dirs;
const fontFile = `${dirs.MainBundleDir}/RobotoBold.ttf`;

const cmd = `-i ${pathFile} -filter:v "drawtext=text='Neha':fontcolor=black:fontsize=20:x=10:y=30:fontfile=${fontFile}'" ${pathNewFile}`;

https://github.com/joltup/rn-fetch-blob/wiki/File-System-Access-API Read Differences between File Source->Asset Files

[jonitef]

Never mind! I was able to figure it out! Thanks for your help.

What was your solution?