Dapatkan koordinat x dan y pemilih video untuk mengubah saiz dan seret berdasarkan peleraian video

Question

Saya menggunakan @use-gesture/react dan @react-spring/web untuk membuat tindanan pemilih yang boleh diseret dan boleh diubah saiz pada video. Saya juga boleh mendapatkan koordinat x dan y bagi pemilih berbanding dengan elemen video, tetapi memandangkan saya menetapkan ketinggian dan lebar untuk teg video agar muat video pada skrin saya, koordinat x dan y yang saya perolehi berada dalam video resolusi penuh tidak berada dalam kedudukan yang sama. Saya perlu menghantar koordinat x dan y ke ffmpeg untuk mengaburkan bahagian tertentu video.

Answer 1

Untuk mencapai transformasi koordinat yang sama dengan cara yang lebih manual, anda boleh melakukannya menggunakan JavaScript mentah:

// 获取原始视频尺寸
const originalWidth = ...; // 获取视频的原始宽度
const originalHeight = ...; // 获取视频的原始高度

// 获取缩放后视频元素的当前宽度和高度
const scaledVideoWidth = ...; // 获取缩放后视频元素的当前宽度
const scaledVideoHeight = ...; // 获取缩放后视频元素的当前高度

// 计算缩放因子
const scaleX = originalWidth / scaledVideoWidth;
const scaleY = originalHeight / scaledVideoHeight;

// 用于获取选择器坐标的事件监听器
function handleSelectorDrag(x, y) {
  const originalX = x * scaleX;
  const originalY = y * scaleY;

  // 现在可以使用originalX和originalY执行诸如使用FFmpeg进行模糊处理等操作
  // 示例：运行FFmpeg命令以在视频的某个部分进行模糊处理
  const ffmpegCommand = `ffmpeg -i input.mp4 -vf "crop=w=100:h=100:x=${originalX}:y=${originalY},boxblur=10" output.mp4`;

  // 使用您喜欢的方法（例如，在Node.js中使用child_process）运行FFmpeg命令
}

// 示例拖动事件的事件监听器
const selectorElement = document.getElementById('selector'); // 请替换为实际的选择器元素
selectorElement.addEventListener('drag', (event) => {
  const x = event.clientX;
  const y = event.clientY;
  handleSelectorDrag(x, y);
});

Sila gantikan selectorElement dalam contoh dengan elemen pemilih sebenar dan laraskan pendengar acara dan tangkapan koordinat pemilih kepada pelaksanaan khusus anda.

Sila ambil perhatian bahawa menjalankan arahan FFmpeg secara langsung dalam penyemak imbas menggunakan JavaScript mungkin tidak mudah disebabkan oleh sekatan keselamatan. Biasanya, arahan FFmpeg dilaksanakan di bahagian pelayan, dan bahagian hadapan anda menghantar permintaan ke bahagian belakang untuk mencetuskan arahan ini.