📚

Google Transcoder APIを使って動画のサムネイル画像を生成する

2021/12/10に公開

Firebase

前回に引き続きGoogle Transcode APIについて。今回はスプライトシートを生成する機能を使ったサムネイル画像の抽出についてです。

スプライトシート

Google Transcode APIには動画をトランスコードする際にスプライトシートを作成する機能が備わっています。動画のプレビュー用の画像として使われることが多いですが、パラメータをいじれば動画サムネイルの作成にも使えます。ドキュメントはここ

スプライトシートのサンプル

コードは非常にシンプルで、トランスコードする際にスプライトシートを生成する設定を追加するだけです。

const videoTranscoder = require('@google-cloud/video-transcoder').v1

const videoTranscoderServiceClient = new videoTranscoder.TranscoderServiceClient()
const request = {
  parent: videoTranscoderServiceClient.locationPath(PROJECT_ID, TRANSCODER_REGION),
  job: {
    inputUri: INPUT_URI,
    outputUri: OUTPUT_URI,
    config: {
      // 動画トランスコードの設定
      elementaryStreams: [
        // ...
      ],
      muxStreams: [
        // ...
      ],

      // スプライトシート
      spriteSheets: [
        {
          filePrefix: 'small-sprite-sheet',
          spriteHeightPixels: 32,
          spriteWidthPixels: 64,
          columnCount: 10,
          rowCount: 10,
          totalCount: 100,
        },
        {
          filePrefix: 'large-sprite-sheet',
          spriteHeightPixels: 72,
          spriteWidthPixels: 128,
          columnCount: 10,
          rowCount: 10,
          totalCount: 100,
        },
      ],
    },
  },
}
const [response] = await videoTranscoderServiceClient.createJob(request).catch((error) => {
  return
})

動画サムネイル生成

上のサンプルコードを見ればもうわかると思いますが、書き出す画像の数を1枚にして、動画開始後どのタイミングで生成するかを設定すればサムネイルとして利用できます。

spriteSheets: [
  {
    filePrefix: `thumbnail`,
    spriteHeightPixels: 720,
    spriteWidthPixels: 1280,
    columnCount: 1,
    rowCount: 1,
    totalCount: 1,
    startTimeOffset: { seconds: 5 },
    quality: 40,
  },
],

スプライトシート

動画サムネイル生成

Discussion