Recherche avancée

Sur d’autres sites (12242)

• React Native and FFMPEG render text differently

  13 février 2021, par Douglas Gondim

  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.


  


  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 :


  


  One more example with Arial Font :


  


  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.


  


  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 :

  


  

  13. 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.

  


• What's the most performant way to encode an mp4 video of frames from a webgl canvas using Javascript in a web browser ?

  17 janvier 2024, par Keith Carter

  I can capture the frames from the canvas using readPixels (https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/readPixels) but then what ?

  


  I think there are a few wasm versions of ffmpeg but they're slow.

  


  I found this web assembly mp4 encoder but it's no longer supported and doesn't work in Chrome on my phone (Android 13).

  


  Any other suggestions ?

  


• Can this be done in Handbrake or FFMPEG

  2 décembre 2022, par Takin

  Just wonder this could be done in Handbrake or FFMPEG.
Any other transcoding software in Windows or MacOS would also be acceptable.

  



  I have many family videos, shooted with DSLR/action cam/phone.
And the files are really huge without transcoding them.
There are something I would like to have,

  



  


  1. Metadata should be all captured. Using Handbrake would not be able to capture the information of the used device. Also, the capture date will become the transcoding date which is definitely unacceptable.

  


  2. I would like to transcode them into HEVC (H.265)

  


  3. I need to batch transcode them since there're a lot of videos.

  


  



  If it's possible (not neccessary), I would also like to have the filename as "YYYYMMDD_HHMMSS".

  



  I think both 1 and 3 are quite frequently asked questions.
This thread will be quite useful to all people who are looking for the same answer as well.
Thanks a lot !