Recherche avancée

Sur d’autres sites (4734)

• nodejs fluent-ffmpeg process is too slow

  22 août 2021, par snovosel

  I'm attempting to run the following ffmpeg command using fluent-ffmpeg and locally this command will take between 5-10 seconds. I have the same service deployed to a digital ocean server with 4CPU and 32GB of RAM as a test and the command will hang for sometimes up to 40 minutes. I'm uploading files 15mb-50mb in size as .mov files or .mp4 files. In all cases this has been too slow to be feasible... How can I begin to debug this ?

  


  const handleVideoResize = async (filePath) => {
  try {
    const { height, width } = await getVideoDimensions(filePath); // ffmpeg probe to get the dimensions

    const newWidth = 423;
    const newHeight = 534;

    const x = width - (newWidth / newHeight) * height;

    const destFilePath = path.resolve(`./tmp/final-${uuidv4()}.webm`);

    const outputStream = fs.createWriteStream(destFilePath);

    FFmpeg()
      .input(filePath)
      .input(path.resolve("assets/watermark.png"))
      .complexFilter([
        `[0]crop=${width - x}:${height},scale=${newWidth}:${newHeight}[a]`,
        "[1]scale=iw*0.2:-1[wm];[a][wm]overlay=x=(W-w)-15:y=(H-h)-15",
        `colorchannelmixer=aa=0.6[1]`
      ])
      .format("webm")
      .outputFormat("webm")
      .on("start", () => {
        printText("ffmpeg child process spawned ---");
      })
      .on("end", () => {
        printText("video stream finished");
      })
      .on("error", err => {
        printError("err ffmpeg", err);
      })
      .output(outputStream)
      .run();
  } catch (error) {
    printError("error handle video resize", error);
    return;
  }
};


  


• Web-based video editor

  13 avril 2021, par Danny

  We have a web-based editor currently that allows users to build animated web apps. The apps are made up of shapes, text, images, and videos. Except for videos, all other elements can also be animated around the screen. The result of building a animated app is basically a big blob of JSON.

  



  The playback code for the web app is web-based as well. It takes the JSON blob and constructs the HTML, which ends up playing back in some sort of browser environment. The problem is that most of the time this playback occurs on lower-end hardware like televisions and set-top boxes.

  



  These performance issues go away if there is some way to be able to convert a digital sign to video. Then the STB/smart TV simply plays a video, which is much more performant than playing back animations in a web view.

  



  Given a blob of JSON describing each layer and how to draw each type of object, its animation points, etc, how could I somehow take that and convert it to video on the server ?

  



  My first attempt at this was using PhantomJS to load the playback page in a headless browser, take a series of screenshots, and then use ffmpeg to merge those screenshots into a video. That worked great so long as there is no video. But it does not work with video since there is no HTML5 video tag support in PhantomJS, and even if there was, I would lose any audio.

  



  The other way I was thinking of doing it would be to again load the playback page in PhantomJS, but turn off the video layers and leave them transparent, then take screenshots as a series of PNGs with transparency. I would then combine these with the video layers.

  



  None of this feels very elegant though. I know there are web-based video editors out there that basically do what I'm trying to accomplish, so how do they do it ?

  


• Web-based video editor

  10 octobre 2014, par Danny

  We have a web-based editor currently that allows users to build animated web apps. The apps are made up of shapes, text, images, and videos. Except for videos, all other elements can also be animated around the screen. The result of building a animated app is basically a big blob of JSON.

  The playback code for the web app is web-based as well. It takes the JSON blob and constructs the HTML, which ends up playing back in some sort of browser environment. The problem is that most of the time this playback occurs on lower-end hardware like televisions and set-top boxes.

  These performance issues go away if there is some way to be able to convert a digital sign to video. Then the STB/smart TV simply plays a video, which is much more performant than playing back animations in a web view.

  Given a blob of JSON describing each layer and how to draw each type of object, its animation points, etc, how could I somehow take that and convert it to video on the server ?

  My first attempt at this was using PhantomJS to load the playback page in a headless browser, take a series of screenshots, and then use ffmpeg to merge those screenshots into a video. That worked great so long as there is no video. But it does not work with video since there is no HTML5 video tag support in PhantomJS, and even if there was, I would lose any audio.

  The other way I was thinking of doing it would be to again load the playback page in PhantomJS, but turn off the video layers and leave them transparent, then take screenshots as a series of PNGs with transparency. I would then combine these with the video layers.

  None of this feels very elegant though. I know there are web-based video editors out there that basically do what I’m trying to accomplish, so how do they do it ?