Obtenez les coordonnées x et y du sélecteur vidéo pour redimensionner et faire glisser en fonction de la résolution vidéo

Question

J'utilise @use-gesture/react et @react-spring/web pour créer une superposition de sélecteur déplaçable et redimensionnable sur une vidéo. Je peux également obtenir les coordonnées x et y du sélecteur par rapport à l'élément vidéo, mais comme j'ai défini la hauteur et la largeur de la balise vidéo pour adapter la vidéo à mon écran, les coordonnées x et y que j'obtiens sont dans la vidéo pleine résolution et ne sont pas exactement dans la même position. Je dois transmettre les coordonnées x et y à ffmpeg pour flouter une partie spécifique de la vidéo.

P粉821808309 · Answer

Pour réaliser la même transformation de coordonnées de manière plus manuelle, vous pouvez le faire en utilisant du JavaScript brut :

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

Veuillez remplacer le selectorElement dans l'exemple par un élément de sélection réel et ajuster l'écouteur d'événement et la capture des coordonnées du sélecteur à votre implémentation spécifique.

Veuillez noter que l'exécution des commandes FFmpeg directement dans le navigateur à l'aide de JavaScript peut ne pas être simple en raison de restrictions de sécurité. En règle générale, les commandes FFmpeg sont exécutées côté serveur et votre frontend envoie des requêtes au backend pour déclencher ces commandes.