The video is not loading and not merging

[xts-bit]

Describe the bug The video is not loading and not merging, I'm trying to merge audio to a video using ffmpeg Can anyone please help me to do that using this package? uinsg react + vite

To Reproduce npm run dev

import { useState, useRef } from "react";
import { FFmpeg } from "@ffmpeg/ffmpeg";
import { toBlobURL, fetchFile } from "@ffmpeg/util";

function App() {
  const [loaded, setLoaded] = useState(false);
  const ffmpegRef = useRef(new FFmpeg());
  const videoRef = useRef<HTMLVideoElement | null>(null);
  const messageRef = useRef<HTMLParagraphElement | null>(null);

  const load = async () => {
    const baseURL = "https://unpkg.com/@ffmpeg/[email protected]/dist/esm";
    const ffmpeg = ffmpegRef.current;
    ffmpeg.on("log", ({ message }) => {
      if (messageRef.current) messageRef.current.innerHTML = message;
    });
    // Load FFmpeg
    await ffmpeg.load({
      coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
      wasmURL: await toBlobURL(
        `${baseURL}/ffmpeg-core.wasm`,
        "application/wasm"
      ),
      workerURL: await toBlobURL(
        `${baseURL}/ffmpeg-core.worker.js`,
        "text/javascript"
      ),
    });
    setLoaded(true);
  };

  const transcode = async () => {
    const videoURL1 = "https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"; // Replace with your video URLs
    const videoURL2 = "https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"; // Replace with your video URLs
    const ffmpeg = ffmpegRef.current;

    // Write the input videos to temporary files
    await ffmpeg.writeFile("input1.webm", await fetchFile(videoURL1));
    await ffmpeg.writeFile("input2.webm", await fetchFile(videoURL2));

    // Interlace (blend) the two videos using the filter_complex option
    await ffmpeg.exec([
      "-i", "input1.webm",
      "-i", "input2.webm",
      "-filter_complex",
      "[0:v][1:v]blend=all_expr='A*(if(eq(0,N/2),1,T))+B*(if(eq(0,N/2),T,1))'",
      "output.mp4",
    ]);

    // Read the resulting MP4 file and display it
    const fileData = await ffmpeg.readFile('output.mp4');
    const data = new Uint8Array(fileData as ArrayBuffer);
    if (videoRef.current) {
      videoRef.current.src = URL.createObjectURL(
        new Blob([data.buffer], { type: 'video/mp4' })
      )
    }
  };

  return loaded ? (
    <>
      <video ref={videoRef} controls></video>
      <br />
      <button onClick={transcode}>Interlace and Save as MP4</button>
      <p ref={messageRef}></p>
    </>
  ) : (
    <button onClick={load}>Load ffmpeg-core</button>
  );
}

export default App;

Expected behavior It should merge the audio with the video

Desktop (please complete the following information):

• OS: macOS
• Browser chrome
• Version 116.0.5845.110

[erdkse]

I have the same issue, when I want to merge video and audio, command execution hangs.

[erdkse]

I believe these issues are related to this one #597 #578