Node canvasとFFmpegでタイマー動画を作る

概要

スクリプトとコマンドを使用して、30秒を計る動画を作成する。

今回の実装では動画の長さは「大体30秒（31秒）」になるが、正確さを重視していないため許容する。

環境

canvas 2.6.1
ffmpeg 4.3.1

実装

const fs = require('fs')
const path = require('path')
const { createCanvas } = require('canvas')

for (let i = 0; i < 31; i++) {
  const canvas = createCanvas(320, 240)
  const ctx = canvas.getContext('2d')

  ctx.fillStyle = '#fff'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  ctx.fillStyle = '#000'
  ctx.font = '96px sans-serif'
  ctx.textBaseline = 'middle'
  ctx.textAlign = 'center'
  ctx.fillText(30 - i, canvas.width / 2, canvas.height / 2)

  const url = path.resolve(__dirname, 'output', `image${i}.png`)
  const data = canvas.toBuffer()
  fs.writeFileSync(url, data)
}

コマンドの実行

ffmpeg -r 1 -i output/image%d.png -pix_fmt yuv420p output/output.mp4

参考

• それFFmpegで出来るよ！ - Qiita