ビデオ解像度に基づいてサイズ変更およびドラッグするビデオピッカーの X 座標と Y 座標を取得します。

Question

@use-gesture/react と @react-spring/web を使用して、ビデオ上にドラッグ可能でサイズ変更可能なセレクター オーバーレイを作成しています。 video 要素を基準としたセレクターの x 座標と y 座標を取得することもできますが、ビデオを画面に合わせて video タグの高さと幅を設定しているため、取得している x 座標と y 座標はフル解像度のビデオでは、まったく同じ位置にありません。ビデオの特定の部分をぼかすには、x 座標と y 座標を ffmpeg に渡す必要があります。

Answer 1

同じ座標変換をより手動の方法で実現するには、生の JavaScript を使用して実行できます。 リーリー

例の

selectorElement を実際のセレクター要素に置き換え、特定の実装に従ってイベント リスナーとセレクター座標のキャプチャを調整してください。

JavaScript を使用してブラウザで FFmpeg コマンドを直接実行することは、セキュリティ上の制限により簡単ではない場合があることに注意してください。通常、FFmpeg コマンドはサーバー側で実行され、フロントエンドはバックエンドにリクエストを送信してこれらのコマンドをトリガーします。