Search code examples
reactjswatermarkvideo-watermarking

How should I add watermark to a video Using ReactJS


I want to add a watermark to a video and then upload it to firebase , So if i Get the video from firebase it should be shown with watermark and also can be downlowded with watermark appended.

Didn't find any solution yet for this


Solution

  • React is a framework for website presentation not video manipulation. To add a watermark to a video that is also downloadable you need to change the videofile itself.

    Other "solutions" might include a quasi watermark via an overlay in react (so showing a video and then just adding an absolute positioned div or something like that) but thats not really watermarking since the file could be extracted directly.

    Usually watermarking is done on the server hosting the webside not the client using it (react = browser/client, backend can be pretty much anything) E.g. python has some easy to use libraries for a small apis (e.g. https://fastapi.tiangolo.com/) & a lot of tools for video editing (e.g. a watermark via FFmpeg or other library depending on your usage/video files)