JavaScript で動画をレンダリングするBeta

動画テンプレートは MP4 としてレンダリングされます。動画の 1 秒が 1 回の生成として数えられ、60 fps では 2 回として数えられます。動画のデザイン方法は、動画の生成で説明しています。

renderAndWaitVideo と renderVideo は、テンプレート ID とオプションのオブジェクトを受け取ります。

レンダリングして URL を待つ

renderAndWaitVideo は、MP4 の URL を含む { result }、または { 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)

進行状況を追う

renderVideo は、イベントの非同期イテレーターを返します。最後のイベントは done または 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)
}

イベント	フィールド
created	id: 動画の ID
queued	ahead: この動画より前にある動画の数
progress	frame、totalFrames、0 から 1 までの progress
done	url: MP4 の URL
error	error: code、message、requestId

無効な API キーやクォータの使い切りなどでリクエストが拒否されると、error イベントが 1 つ返ります。

接続が切れると、renderVideo は ID で同じ動画をもう一度読み取り、最大 4 回まで再接続して、イベントを返し続けます。動画を 2 回レンダリングすることはありません。

待たずに動画を開始する

createVideo は、動画の ID を含む { result }、または { error } をすぐに返します。動画はあとから 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)

動画をもう一度読み取る

プロセスが止まっても、動画は最後までレンダリングされます。あとで読み取れるように、created イベントの id を保存しておいてください。

getVideo は、動画のステータスを含む { result }、または { 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)

フィールド	値
id	動画の ID
status	queued、rendering、done、failed のいずれか
url	MP4 の URL。done になってから入ります
error	動画が failed になった理由

watchVideo は、renderVideo と同じように、動画の最新のイベントから、もう一度イベントを返します。

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