マルチモーダル: ビデオ入力

リアルタイムエージェントは見ることができます。オーディオストリームに加えて、カメラ（または画面）からの画像フレームをモデルにプッシュできるため、ユーザーは何かを説明する代わりに、エージェントに見せることができます。例えば、返品用の破損した製品、画面上のエラー、文書などです。

その API

Runner 上のメソッドの1つで、send_audio をミラーリングします:

runner.send_video_frame("image/jpeg", &base64_jpeg).await?;

これは、より低レベルの RealtimeRunner および RealtimeSession でも直接利用できます。デフォルトの trait implementation はno-opであるため、視覚入力を受け入れない providers/models はフレームを単に無視します。

各プロバイダーがフレームを処理する方法

2つの backends は vision の扱いが異なり、それがフレームを送信する頻度に影響を与えるはずです:

Geminiは連続ビデオ向けに構築されています: フレームは音声のように流れ、モデルは動画を推論します。OpenAIのリアルタイムビジョンはイメージインコンテキストです: 各フレームは会話アイテムとなるため、毎秒多数のフレームを送信するとコンテキストが溢れ、コストが増加します。OpenAIには、有用なとき（例：ユーザーが「これを見て」と言ったとき）にフレームを送信し、毎ティック送信しないでください。

サンプルのUIはこれをエンコードします:

const intervalMs = provider === 'gemini' ? 700 : 2500;  // ~1.4 fps vs ~0.4 fps

ブラウザでのフレームキャプチャ

カメラを取得し、<video>をキャンバスに描き、JPEGフレームをWebSocket経由で送信します（サーバーサイドブリッジがそれらをsend_video_frameに転送します）:

const stream = await navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480 } });
video.srcObject = stream;

const canvas = document.createElement('canvas');
setInterval(() => {
  if (ws.readyState !== WebSocket.OPEN) return;
  canvas.width = 640; canvas.height = 480;
  canvas.getContext('2d').drawImage(video, 0, 0, 640, 480);
  const data = canvas.toDataURL('image/jpeg', 0.6).split(',')[1];  // strip data: prefix
  ws.send(JSON.stringify({ type: 'video_frame', mime: 'image/jpeg', data }));
}, intervalMs);

サーバー側で、モデルに転送します:

ClientMsg::VideoFrame { mime, data } => {
    let _ = runner.send_video_frame(&mime, &data).await;  // non-fatal on error
}

フレームは控えめに（640×480、JPEG品質約0.6）してください — ビジョンはフル解像度を必要とせず、フレームが小さいほどレイテンシとコストが低くなります。

ビジョンに対するプロンプト

エージェントに視覚があることを伝え、自然にカメラを使用するようにします:

You can hear the customer and SEE what they show their camera. When they show
you an item (e.g. a damaged product for a return), briefly describe what you see
and use it to help resolve the issue.

試してみる

customer_serviceの例にはカメラパネルがあります: カメラを起動し、オブジェクトをかざして、「これを返品したいのですが、見えますか？」と言ってみてください。Gemini（連続ビデオ）で最もよく機能します。OpenAIでは、エージェントは定期的なスナップショットに基づいて推論します。

次へ: 感情的な対話 →