gatsby-transformer-ffmpeg

gatsby-transformer-ffmpeg

Creates VideoFFMPEG nodes from locally hosted video files.

Install

npm install --save gatsby-transformer-ffmpeg gatsby-plugin-ffmpeg

How to use

// In your gatsby-config.js
module.exports = {
  plugins: [`gatsby-transformer-ffmpeg`],
}

Please note that you must have a source plugin (which brings in images) installed in your project. Otherwise no VideoFFMPEG nodes can be created for your files. The recommended example would be gatsby-source-filesystem.

Parsing algorithm

Currently it only detects files with the extensions avi, mp4, mov, mkv. If you have a different container and would like it added, open an issue or create a PR and I'm happy to include it.

Each image file is parsed into a node of type VideoFFMPEG.

Example Query

This query generates both webm and h264 mp4 files for every video file found.

{
  allVideoFfmpeg {
    edges {
      node {
        webm: transcode(codec: "libvpx-vp9", maxWidth: 900, maxHeight: 480, fileExtension: "webm", outputOptions: ["-crf 20", "-b:v 0"]) {
          width
          src
          presentationMaxWidth
          presentationMaxHeight
          originalName
          height
          aspectRatio
        }
        mp4: transcode(codec: "libx264", maxWidth: 900, maxHeight: 480, fileExtension: "mp4", options:[["-profile:v", "main"], ["-pix_fmt", "yuv420p"]], outputOptions: ["-movflags faststart"]) {
          width
          src
          presentationMaxWidth
          presentationMaxHeight
          originalName
          height
          aspectRatio
        }
      }
    }
  }
}

Specific files

In your gatsby-config, have a filesystem source plugin that loads a certain folder for example.

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/packages/resources`,
        name: 'resources',
        ignore: [`**/\.*`],
      },
    },

With a video file in packages/resources/videofile.mp4 we will be able to grab the following:

{
  file(relativePath: {eq: "videofile.mp4"}) {
    childVideoFfmpeg {
      mp4: transcode(maxWidth: 900, maxHeight: 480, fileExtension: "mp4", codec: "libx264", options:[["-profile:v", "main"], ["-pix_fmt", "yuv420p"]], outputOptions: ["-movflags faststart"]) {
        width
        src
        presentationMaxWidth
        presentationMaxHeight
        originalName
        height
        aspectRatio
      }
    }
  }
}

Funding

Work on gatsby-transformer-ffmpeg is funded by Electric UI. If you need to design an Arduino GUI, want visualisations for a complex robotics system or generally need a user interface for your hardware project, please take a look at the website.