search

sagark1510 / react-native-video-watermark

use image as watermark over video
7 stars 9 forks source link

Set logo position and use logo from app local file #4

Open pperron opened 4 years ago

pperron commented 4 years ago

Hi, installed the lib and tested it on Android. First result, it is working. From what I'm seing, your lib position the logo on the top left corner.

Could you add the option to specify the position of the logo ? Would be useful to position where we want to like bottom right corner of video.

Next, if we want to use an image built-in in the app if we want to watermark the video with the app logo, is there a way to either use an app local file or use a Base64 image ?

Thanks !

pperron commented 4 years ago

OK, took a dive into your source code and seen a quick implementation for the logo position... Disclaimer: I'm not an IOS or Java programmer, juste a programmer that like to look at code ;)

For Android, your using "Mp4Composer-android" with function call "GlWatermarkFilter". That function has 2 definition, one if just an image (the one you are using) and a second one with as second argument the logo position "public GlWatermarkFilter(Bitmap bitmap, Position position)".

You can just add the option in your "VideoWatermark.convert" command and pass it to the "GlWatermarkFilter" function.

For IOS, it seems to be where you call the line "[myImage drawInRect:CGRectMake(0, 0, sizeOfVideo.width, sizeOfVideo.height)];", so I'm guessing that the "0,0" is the position pf the logo...

Will do some testing changing your code to see if Android version working changing logo position...

Will wait for the local logo or Base64 image answer meanwhile ;)

pperron commented 4 years ago

Ok, opened up the Mp4Composer code hood and found how to specify the position. If you change your line 51 with: .filter(new GlWatermarkFilter(BitmapFactory.decodeStream(reactContext.getContentResolver().openInputStream(Uri.fromFile(new File(imagePath)))), GlWatermarkFilter.Position.RIGHT_BOTTOM)) We just need to specify "LEFT_TOP", "LEFT_BOTTOM", "RIGHT_TOP" or "RIGHT_BOTTOM" to position the logo...

Just need to figure out how to do the same with IOS ;)

If you could just add the code in your lib, that would be pretty useful !

ManigandanRaamanathan commented 4 years ago

@sagark1510 can provide the feature to set position, image height and width?