首頁  >  問答  >  主體

取得視訊選擇器的x和y座標,以根據視訊解析度進行調整和拖曳

我正在使用 @use-gesture/react 和 @react-spring/web 來創建一個可拖曳和可調整大小的選擇器覆蓋在視訊上。我還能夠獲取選擇器相對於視頻元素的x 和y 坐標,但由於我為視頻標籤設置了高度和寬度,以使視頻適應我的屏幕,所以我獲取到的X 和Y 坐標在完整分辨率視頻中並不處於完全相同的位置。我需要將 x 和 y 座標傳遞給 ffmpeg,以模糊影片的特定部分。

P粉578680675P粉578680675417 天前642

全部回覆(1)我來回復

  • P粉821808309

    P粉8218083092023-09-20 00:03:34

    要以更手動的方式實現相同的座標轉換,可以使用原始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命令在伺服器端執行,您的前端會向後端發送請求以觸發這些命令。

    回覆
    0
  • 取消回覆