저는 @use-gesture/react 및 @react-spring/web을 사용하여 비디오 위에 드래그 가능하고 크기 조정이 가능한 선택기 오버레이를 만들고 있습니다. 또한 비디오 요소를 기준으로 선택기의 x 및 y 좌표를 얻을 수 있지만 비디오 태그의 높이와 너비를 화면에 맞게 설정했기 때문에 x 및 y 좌표를 얻을 수 있습니다. 전체 해상도 비디오의 위치는 정확히 동일하지 않습니다. 비디오의 특정 부분을 흐리게 하려면 x 및 y 좌표를 ffmpeg에 전달해야 합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
보다 수동적인 방법으로 동일한 좌표 변환을 수행하려면 원시 JavaScript를 사용하여 수행할 수 있습니다.
으아아아예제의
selectorElement를 실제 선택기 요소로 바꾸고 이벤트 리스너와 선택기 좌표 캡처를 특정 구현에 맞게 조정하세요.JavaScript를 사용하여 브라우저에서 FFmpeg 명령을 직접 실행하는 것은 보안 제한으로 인해 간단하지 않을 수 있습니다. 일반적으로 FFmpeg 명령은 서버 측에서 실행되며 프런트엔드는 백엔드로 요청을 보내 이러한 명령을 트리거합니다.