I'm using @use-gesture/react and @react-spring/web to create a draggable and resizable selector overlay over a video. I'm also able to get the x and y coordinates of the selector relative to the video element, but since I set the height and width for the video tag to fit the video to my screen, the x and y coordinates I'm getting are in the full resolution video are not in exactly the same position. I need to pass x and y coordinates to ffmpeg to blur a specific part of the video.
To achieve the same coordinate transformation in a more manual way, you can use raw JavaScript to do it:
Please replace
selectorElement
in the example with the actual selector element, and adjust the event listener and capture of selector coordinates according to your specific implementation.Please note that running FFmpeg commands directly in the browser using JavaScript may not be straightforward due to security restrictions. Typically, FFmpeg commands are executed server-side, and your frontend sends requests to the backend to trigger these commands.