Rufen Sie die X- und Y-Koordinaten des Video-Pickers ab, um die Größe zu ändern und basierend auf der Videoauflösung zu ziehen

Question

Ich verwende @use-gesture/react und @react-spring/web, um eine ziehbare und in der Größe veränderbare Auswahlüberlagerung über einem Video zu erstellen. Ich kann auch die X- und Y-Koordinaten des Selektors relativ zum Videoelement abrufen, aber da ich die Höhe und Breite des Video-Tags so eingestellt habe, dass das Video auf meinen Bildschirm passt, erhalte ich die X- und Y-Koordinaten befinden sich im Video in voller Auflösung nicht genau an der gleichen Position. Ich muss x- und y-Koordinaten an ffmpeg übergeben, um einen bestimmten Teil des Videos unscharf zu machen.

Answer 1

要以更手动的方式实现相同的坐标转换，可以使用原始JavaScript来实现：

// 获取原始视频尺寸
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);
});

请将示例中的selectorElement替换为实际的选择器元素，并根据您的具体实现调整事件监听器和选择器坐标的捕获。

请注意，使用JavaScript直接在浏览器中运行FFmpeg命令可能不直接，因为存在安全限制。通常，FFmpeg命令在服务器端执行，您的前端会向后端发送请求以触发这些命令。