Googleの メディア生成 API(Nano Banana / Veo3 / Lyria)と FFmpeg.wasmで動画つくる

Googleの メディア生成 API(Nano Banana / Veo3 / Lyria)と FFmpeg.wasmで動画つくる

2025.09.12

Introduction

先日、思考する画像生成モデルであるNano Banana(Gemini 2.5 Flash Image)がリリースされました。
これ以外にもVeo3(動画生成)やLyria(音楽生成)をさわる機会があったので、
それらをAPIで使用し、FFmpegのWASMで簡単な編集をしてみました。
これによりブラウザ上で画像・音楽・動画の生成から編集まで(クライアントサイドだけで)実行できます。

本記事では

  • Gemini 2.5 Flash Imageで画像生成
  • Veo3で動画生成
  • Lyria-002で音楽生成
  • WASM版のffmpegで生成したメディアの編集

をやってみます。

Environment

  • MacBook Pro (14-inch, M3, 2023)
  • OS : MacOS 14.5
  • Claude Code SDK: v1.0.x
  • Google Cloud SDK : 523.0.0
  • Node : v20.x

Setup

まずはGoogle Projectのセットアップです。
プロジェクトを作成して各種APIを有効化しましょう。

Setup

Google Cloudプロジェクトの作成

			
			# Google Cloudプロジェクトの作成
gcloud projects create <YOUR_PROJECT_ID> --name="AI Media Project"

		

APIの有効化

とりあえずVertex AIが有効化されてればOKなはず。

			
			# Vertex AI APIを有効化
gcloud services enable aiplatform.googleapis.com

# gcloud services enable compute.googleapis.com
# gcloud services enable storage.googleapis.com

		

認証の設定

Vertex AI用の認証(Veo3, Lyria-002)

ログインしておく。

			
			
# ログイン
gcloud auth login

		

Google AI Studio APIキーの取得

SDK用にAPIキーが必要なので、以下手順で取得します。

  1. Google AI Studioにアクセス
  2. 「Create API Key」をクリック
  3. プロジェクトを選択
  4. 生成されたAPIキーを保存

あとで.envに設定しておく。

Node.jsセットアップ

必要なモジュールをセットアップします。

			
			npm init -y

# 必要なパッケージのインストール
npm install express cors dotenv
npm install @google/generative-ai  # Gemini SDK
npm install @ffmpeg/ffmpeg @ffmpeg/core


		

環境変数の設定

.envをプロジェクト直下に作成して、
プロジェクト名、さきほど取得したキーなどを設定しておきましょう。

			
			# Google Cloud設定
GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID
GOOGLE_CLOUD_LOCATION=us-central1

# Google AI Studio APIキー(Gemini用)
GOOGLE_AI_STUDIO_API_KEY=your_gemini_api_key_here

		

使用技術

  • 画像生成 : Gemini 2.5 Flash Image Preview (Google AI Studio)
  • 音楽生成 : Lyria-002 (Vertex AI)
  • 動画生成 : Veo3 (Vertex AI)
  • 動画編集 : FFmpeg.wasm

これらを使用して各種生成や編集をします。
これ以外にExpressも一部使用し、Webアプリとして動作するようにしました。
(claude codeで適当にWEBアプリにしてもらった)

Create Image(Gemini 2.5 Flash Image Preview)

Nanobananaをつかってテキストプロンプトから画像を生成します。

サンプル実装

実装はこんな感じです。パラメータは適当。
プレビュー中なことも影響しているのか、
失敗することもあります。英語プロンプトのほうがよいらしい。

			
			// Google AI Studio SDKを使用
const { GoogleGenerativeAI } = require('@google/generative-ai');

async function generateImage(prompt) {
  const API_KEY = process.env.GOOGLE_AI_STUDIO_API_KEY;

  const genAI = new GoogleGenerativeAI(API_KEY);
  const model = genAI.getGenerativeModel({ 
    model: 'gemini-2.5-flash-image-preview',
    generationConfig: {
      temperature: 0.4,
      topK: 32,
      topP: 1,
      maxOutputTokens: 8192
    }
  });

  // 画像生成
  const result = await model.generateContent(prompt);
  const response = result.response;

  const imageData = response.candidates[0].content.parts.find(
    part => part.inlineData
  )?.inlineData.data;

  return `data:image/png;base64,${imageData}`;
}

		

Create Music(Lyria-002)

Lyria-002は、Vertex AIで利用可能な音楽生成モデルです。
テキストプロンプトからWAV形式の音楽を生成します。

サンプル実装

REST APIで音楽を生成。
これは英語プロンプトのみ対応してます。

			
			const { execSync } = require('child_process');

function getAccessToken() {
  return execSync('gcloud auth print-access-token', { encoding: 'utf8' }).trim();
}

// 音楽生成
async function generateMusic(prompt) {
  const PROJECT_ID = 'your-project-id';
  const LOCATION = 'us-central1';
  const endpoint = `https://${LOCATION}-aiplatform.googleapis.com/v1/projects/${PROJECT_ID}/locations/${LOCATION}/publishers/google/models/lyria-002:predict`;

  const response = await fetch(endpoint, {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${getAccessToken()}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      instances: [{
        prompt: prompt  // ex. "slow jazz piano"
      }],
      parameters: {
        sample_count: 1
      }
    })
  });

  const result = await response.json();
  const audioContent = result.predictions[0].bytesBase64Encoded;

  // WAVファイルとして保存
  const audioBuffer = Buffer.from(audioContent, 'base64');
  return audioBuffer;
}

		

Create Movie(Veo3)

Veo3は、Googleの最新動画生成モデルです。
テキストや画像から最大8秒の動画を生成できます。

サンプル実装

Veo3はテキストのみで生成もできますが、
画像をベースに生成させることもできます。

			
			// テキストから動画生成
async function generateVideo(prompt, params = {}) {
  const PROJECT_ID = 'your-project-id';
  const LOCATION = 'us-central1';
  const endpoint = `https://${LOCATION}-aiplatform.googleapis.com/v1/projects/${PROJECT_ID}/locations/${LOCATION}/publishers/google/models/veo-3.0-generate-001:predictLongRunning`;

  const response = await fetch(endpoint, {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${getAccessToken()}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      instances: [{
        prompt: prompt
      }],
      parameters: {
        aspectRatio: params.aspectRatio,
        durationSeconds: params.duration,
        resolution: params.resolution ,
        sampleCount: 1,
        generateAudio: false,
        seed: params.seed
    })
  });

  const operation = await response.json();
  return operation.name;
}

// 画像から動画生成
async function generateVideoFromImage(imageBase64, prompt) {
  const requestBody = {
    instances: [{
      prompt: prompt || '',
      image: {
        bytesBase64Encoded: imageBase64,
        mimeType: 'image/jpeg'
      }
    }],
    parameters: {
      aspectRatio: '16:9',
      durationSeconds: 8,
      resolution: '720p'
    }
  };

}

		

Edit Media(ffmpeg)

FFmpeg.wasmを使ってブラウザ上で動画編集します。

			
			// FFmpeg.wasmの読み込みと初期化
const { FFmpeg } = FFmpeg;
const ffmpeg = new FFmpeg();

async function initFFmpeg() {
  await ffmpeg.load({
    coreURL: 'https://unpkg.com/@ffmpeg/core@0.11.0/dist/ffmpeg-core.js',
    wasmURL: 'https://unpkg.com/@ffmpeg/core@0.11.0/dist/ffmpeg-core.wasm'
  });

  // SharedArrayBufferのサポート確認
  if (!crossOriginIsolated) {
    console.warn('SharedArrayBuffer is not available');
  }
}

		

トリミングは↓みたいな感じでできます。

			
			async function trimVideo(videoBlob, startTime, endTime) {
  // 動画データをFFmpegに書き込み
  const videoData = new Uint8Array(await videoBlob.arrayBuffer());
  await ffmpeg.writeFile('input.mp4', videoData);

  // トリミング実行
  const duration = endTime - startTime;
  await ffmpeg.exec([
    '-i', 'input.mp4',
    '-ss', startTime.toString(),
    '-t', duration.toString(),
    '-c', 'copy',  // 再エンコードなし
    'output.mp4'
  ]);

  // 結果を取得
  const data = await ffmpeg.readFile('output.mp4');
  return new Blob([data.buffer], { type: 'video/mp4' });
}

		

同じ要領で動画結合、音楽の追加をしたり、フェードイン/フェードアウトとかも実装できます。
(このへんの実装はcodex/claude codeあたりに依頼すればまるっと作成してくれる)

Check

実際に確認してみます。
さきほどの処理をWEBアプリ的に実装してブラウザで操作できるようにしました。

テキスト入力して楽曲生成。
veo-1.png

30秒くらいで音楽ファイルが生成される。
veo-2.png

Nano Bananaで動画にベースとなる画像生成依頼。
veo-3.png

azz barでピアノを弾くピアニストを作成してもらいました。
veo-4.png

それをベースにVeo3で動画生成。1分くらいでできます。
veo-5.png

あとは生成した動画と音楽をffmepg(WASM)で編集して、
音楽つきの動画にします。

veo-6.png

実際に作成した動画はこんな感じです。
アニメーションgifなのでカクカクしてますが、実際はなめらかな動画です。

veo3-opt2.gif

ここまでトータル5分くらいです。
編集ツール自体も簡単に生成できるので楽です。

Summary

Google CloudのAI APIとFFmpeg.wasmを組み合わせることで、
ブラウザ上で動作するメディア生成・編集アプリをつくってみました。
非常に簡単に実装でき、生成も高速です。
いまのところ動画生成はコストがネックですが、今後下がっていけばもっと手軽にできるようになりそうです。

References

この記事をシェアする

FacebookHatena blogX

関連記事