Image Video Exports - cdaein/ssam GitHub Wiki

Image Export

First, you can set the image format in the settings object:

const settings = {
  frameFormat: "jpg",
};

Supported image formats are png(default), jpg/jpeg and webp. When hotkeys is enabled, press CMD + S (Mac) or CTRL + S to export an image. You can also set filename, prefix, suffix in the settings. If you do not set filename, the current datetime string is used.

If you want to export multiple formats at the same time, use an array:

const settings = {
  frameFormat: ["jpg", "png"],
};

☝️ Note: in the webgl or webgl2 mode, you also need to set attributes.preserveDrawingBuffer to true in the settings object. Otherwise, you will only get a blank image.

Image Sequence Export

Currently, Ssam supports PNG image sequence export. Set the format in the settings.framesFormat:

const settings = {
  framesFormat: ["png"],
}

For now, PNG sequence export requires FFMPEG to be present on the development environment. Browser-only export is not supported.

Video Export

You can set the video file format in the settings object.

const settings = {
  framesFormat: "webm",
};

If you want to export multiple formats at the same time, use an array:

const settings = {
  framesFormat: ["gif", "webm"],
};

MP4 Export

MP4 encoding is available using vite-plugin-ssam-ffmpeg plugin. This plugin is already set up with npm create ssam@latest command. MP4 encoding is only available in the development server due to its dependency on ffmpeg.

✋ You will need to have ffmpeg already installed on your machine.

const settings = {
  framesFormat: "mp4",
};

Alternatively, you can first render to WebM using Ssam, and then batch convert the WebM videos to MP4s in CLI:

for i in *.webm; do ffmpeg -i "$i" -c:v libx264 -crf 18 "${i%.*}.mp4"; done

MP4 Export In Browser

If your browser supports WebCodecs API, you can export mp4 in browser without ffmpeg.

const settings = {
  framesFormat: "mp4-browser"
}

Exporting MP4 in browser is finicky so use with caution and please note that browsers and devices all have a varying degree of WebCodecs support. If you want more customization, you can pass an object to settings.framesFormat. This only works for webm and mp4-browser:

const settings = {
  framesFormat: { format: "mp4-browser", codecStrings: ["avc", "avc1.42001f"] }
}

Animated GIF Export

const settings = {
  framesFormat: "gif",
  // ...
};