Googleの メディア生成 API(Nano Banana / Veo3 / Lyria)と FFmpeg.wasmで動画つくる
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キーが必要なので、以下手順で取得します。
- Google AI Studioにアクセス
- 「Create API Key」をクリック
- プロジェクトを選択
- 生成された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アプリ的に実装してブラウザで操作できるようにしました。
テキスト入力して楽曲生成。
30秒くらいで音楽ファイルが生成される。
Nano Bananaで動画にベースとなる画像生成依頼。
azz barでピアノを弾くピアニストを作成してもらいました。
それをベースにVeo3で動画生成。1分くらいでできます。
あとは生成した動画と音楽をffmepg(WASM)で編集して、
音楽つきの動画にします。
実際に作成した動画はこんな感じです。
アニメーションgifなのでカクカクしてますが、実際はなめらかな動画です。
ここまでトータル5分くらいです。
編集ツール自体も簡単に生成できるので楽です。
Summary
Google CloudのAI APIとFFmpeg.wasmを組み合わせることで、
ブラウザ上で動作するメディア生成・編集アプリをつくってみました。
非常に簡単に実装でき、生成も高速です。
いまのところ動画生成はコストがネックですが、今後下がっていけばもっと手軽にできるようになりそうです。