Render videos in JavaScriptBeta

A video template renders as an MP4. Each second of the video counts as one generation, and as two at 60 fps. Generate videos explains how to design one.

renderAndWaitVideo and renderVideo take a template id and an options object.

Render and wait for the URL

renderAndWaitVideo returns { result } with the URL of the MP4, or { error }.

const { result: url, error } = await bannerify.renderAndWaitVideo("tpl_xxx", {
  modifications: [
    { name: "headline", text: "Summer sale" },
    { name: "music", src: "https://example.com/song.mp3" },
  ],
})

if (error) throw new Error(error.message)

console.log(url)

Follow the progress

renderVideo returns an async iterator of events. The last event is done or error.

for await (const event of await bannerify.renderVideo("tpl_xxx", {
  modifications: [{ name: "headline", text: "Summer sale" }],
})) {
  if (event.type === "created") console.log(`video ${event.id}`)
  if (event.type === "queued") console.log(`${event.ahead} videos before this one`)
  if (event.type === "progress") console.log(`${Math.round(event.progress * 100)}%`)
  if (event.type === "done") console.log(event.url)
  if (event.type === "error") console.error(event.error.message)
}

Event	Fields
created	id: the id of the video
queued	ahead: the number of videos before this one
progress	frame, totalFrames, and progress from 0 to 1
done	url: the URL of the MP4
error	error: code, message, and requestId

A refused request, such as an invalid API key or a used-up quota, gives one error event.

When the connection drops, renderVideo reads the same video again by its id, up to four times, and goes on with its events. It never renders the video twice.

Start a video without waiting

createVideo returns { result } with the id of the video at once, or { error }. Read the video later with getVideo.

const { result, error } = await bannerify.createVideo("tpl_xxx", {
  modifications: [{ name: "headline", text: "Summer sale" }],
})

if (error) throw new Error(error.message)

console.log(result.id)

Read a video again

The video renders to its end also when your process stops. Keep its id from the created event to read it later.

getVideo returns { result } with the status of the video, or { error }:

const { result: video, error } = await bannerify.getVideo("vid_xxx")

if (error) throw new Error(error.message)

if (video.status === "done") console.log(video.url)
if (video.status === "failed") console.error(video.error)

Field	Value
id	The id of the video
status	queued, rendering, done, or failed
url	The URL of the MP4, once done
error	Why the video failed

watchVideo returns the events of the video again, from the latest one, as renderVideo does:

for await (const event of await bannerify.watchVideo("vid_xxx")) {
  if (event.type === "done") console.log(event.url)
}