1

I am working an app in flutter in which user can add image on a video like the given screenshot. The user should be able to move the image widget anywhere on the screen, resize it, and rotate it also.

For now I have used Stack and MatrixGestureDetector to let the user move the images on the screen.

From the user placed image I would like to acquire:

  • position/coordinates
  • scale
  • rotation

This data will then be used in ffmpeg, but this question is only about getting the placement data.

Example of image and draw text in canvas over a video:

As you can see, we can move image and draw text in canvas over a video. After doing all this, how to get exact positions about where to merge the images

llogan
  • 121,796
  • 28
  • 232
  • 243
Sarthak Singhal
  • 1,175
  • 12
  • 16
  • I need help with getting coordinates, scale and rotation from the user. – Sarthak Singhal Oct 12 '20 at 18:57
  • I suggest you [edit] your question to be specifically about getting coordinates, scale and rotation from the user and not a general, overly broad question of "How to make overlay like in tiktok?" Then it can be voted to reopen. As it is you'll never get anything but general, overly broad answers. You can make new questions to address the other steps once you figure out the coordinates issue. – llogan Oct 12 '20 at 19:03
  • I have edited the question but can you please tell me that my overall logic is correct or wrong? – Sarthak Singhal Oct 12 '20 at 19:23
  • Not sure. I don't know anything about flutter, dart, android, or flutter-ffmpeg. I can only help with the ffmpeg commands. – llogan Oct 12 '20 at 20:22

1 Answers1

0

there are two ways that you can do this, there is a hard way and there's an easy way:

  • easy way:
    you can use packages like tapioca to add text overlay to your videos

  • hard way : you basically split the video into single image frames and add a text overlay every single frame using a stack widget, which is not easy to implement.

imcouri
  • 124
  • 4
  • 9