CCPhoto — Phone Camera Bridge について
CCPhotoは、スマートフォンのブラウザー上のカメラをローカルネットワーク経由でClaude CodeにつなぐMCPサーバーです。スマートフォンアプリなしで、撮影、ライブ映像による案内、音声入力と読み上げ、画面への情報表示を行えます。
主な機能
- 01スマートフォンで撮影・写真取得
- 02送信前の写真への注釈
- 03案内用の動画フレーム配信
- 04テキスト・画像・生成UIの送信
- 05音声入力と音声読み上げ
活用シーン
- 01Claude Codeに基板やホワイトボードを見せる
- 02カメラで対象を確認しながら案内を受ける
- 03ハンズフリー作業中にスマートフォンで手順を確認
- 04質問を話して回答を音声で聞く
MCP 対応
MCPサーバーは、撮影、写真の待機・取得、スマートフォンへのコンテンツ送信、ライブ配信の開始、最新フレームの取得を行うツールを公開します。スマートフォンはローカルネットワーク上でブラウザーから接続します。
設定
ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。
ツール
ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。
詳細
CCPhoto
ローカルネットワーク経由で、スマートフォンのカメラを Claude Code に接続します。
CCPhoto は、スマートフォンで撮影した写真を Claude Code に直接送信できる MCP サーバーです。スマートフォンを回路基板やホワイトボード、ラベルなど、何にでも向けると、Claude がすぐに確認できます。アプリのインストールは不要です。スマートフォンのブラウザーのカメラだけで動作します。
+----------+ WiFi +-----------+ MCP +-------------+
| Phone | photos, voice, | CCPhoto | image/text | Claude |
| Camera | mode switches | Server | data | Code |
| + Mic | <--------------- | (local) | <--------------- | |
+----------+ TTS, guidance +-----------+ send_to_phone +-------------+
クイックスタート
npx ccphoto --setup # One-time: register CCPhoto as an MCP server
あとは Claude Code に 「写真を撮って」 と言うだけです。あとは Claude が処理します。
動作の仕組み
- Claude が
capture_photoMCP ツールを呼び出します。 - ターミナルに QR コードが表示されます。
- スマートフォンでスキャンすると、ブラウザーでカメラページが開きます。
- 写真を撮ると、画像が Claude に直接送信されます。
アプリのインストールは不要です。<input capture> HTML 属性を通じて、スマートフォンのネイティブカメラにアクセスします。
常時接続モード
最初の capture_photo 呼び出し時にサーバーが起動し、セッション全体を通して実行されます。スマートフォンは接続されたままなので、QR コードを再スキャンする必要はありません。好きなだけ写真を撮影し、Claude に頼んでその中から写真を取得できます。
写真リクエスト通知
スマートフォンがすでに接続されている状態で、Claude が再び capture_photo を呼び出すと、スマートフォンに SSE プッシュ通知が届きます。Claude が新しい写真を待っていることを知らせるため、撮影ボタンが点滅します。タップして撮影するだけです。
双方向メッセージ
Claude は send_to_phone ツールを使って、スマートフォンにコンテンツを送信できます。テキスト、Markdown、画像が折りたたみ可能なパネルに表示されます。これにより、スマートフォンを参照画面として使えます。両手で作業しながら、Claude に配線手順、ピン配置図、コードスニペットなどを表示してもらえます。
写真への注釈
写真を撮影すると、送信前に画像へ描き込める注釈画面が表示されます。色付きペン（赤、青、緑、白）を使って、部品を丸で囲んだり、矢印を描いたり、注目箇所を強調したりできます。「Send」をタップすると注釈付き画像をアップロードし、「Skip」をタップすると注釈なしの元の写真を送信します。
ライブ動画アシスタント
スマートフォンのカメラから、準リアルタイムの動画ストリームを開始します。Claude はライブ映像（3 秒ごとに 1 フレーム）を確認し、リアルタイムでガイダンスを提供します。Claude の指示に従ってカメラを向けると、スマートフォンの画面で案内を受けられます。
カメラへのアクセスには HTTPS が必要です。Android Chrome では、証明書の警告を一度承認してください。現在は Android／Chrome のみ対応しており、iOS のサポートは今後予定されています。
音声でのやり取り
スマートフォンのマイクボタンをタップして、Claude に話しかけられます。音声はブラウザー内蔵の Speech Recognition API を使って文字起こしされ、テキストとして送信されます。Claude は send_to_phone の speak: true を使って音声で応答でき、Text-to-Speech によってスマートフォンから返答が読み上げられます。
これにより、ハンズフリーのワークフローを実現できます。はんだごてを持ちながら質問し、画面を見ずに答えを聞くことができます。マイクボタンは、Speech Recognition に対応したブラウザー（Android Chrome）でのみ表示されます。
ジェネレーティブ UI
Claude は、認識した内容に基づいて、スマートフォンにコンテキストに応じたリッチな UI を生成できます。カメラを製品、部品、レシピなどに向けると、Claude が内容を分析し、カスタムのインタラクティブなインターフェースをスマートフォンの画面に送信します。
コンポーネントは 12 種類です。Card、Text、Image、Metric、MetricGrid、Checklist、StepByStep、Alert、Table、Timer、Badge、Divider。Claude はこれらを組み合わせて、植物の世話用チェックリスト付きカード、ピン配置図付きの回路部品テーブル、タイマー付きの修理手順ガイドなど、状況に応じたレイアウトを作成します。
ui_spec パラメーターを指定して send_to_phone を使うと、カスタム UI を生成できます。
インストール
npx（推奨、インストール不要）
npx ccphoto --setup
グローバルインストール
npm install -g ccphoto
ccphoto --setup
ソースから
git clone https://github.com/stepankaiser/ccphoto.git
cd ccphoto
npm install
npm run build
node dist/index.js --setup
--setupを使わずにMCP サーバーを手動で登録する場合：
claude mcp add ccphoto -- npx ccphoto --mcp
MCP ツールのリファレンス
| ツール | 説明 | パラメーター |
|---|---|---|
capture_photo | サーバーを起動し、QR コードを表示します。すでにスマートフォンが接続されている場合は、代わりにプッシュ通知を送信します。 | -- |
wait_for_photo | 写真がアップロードされるか、タイムアウトになるまで待機します。capture_photoの直後に呼び出してください。 | timeout_seconds（省略可、デフォルト：120） |
get_latest_photo | 最新の写真、またはファイル名を指定した写真を返します。 | filename（省略可） |
list_photos | 撮影したすべての写真を、ファイル名、タイムスタンプ、サイズとともに一覧表示します。 | -- |
send_to_phone | テキスト、画像、またはリッチな生成 UI をスマートフォンの画面に送信します。スマートフォンを、手順、図、ピン配置図などを表示するリファレンス画面として使用できます。 | text、image_base64、image_mime_type、speak、ui_spec（すべて省略可） |
start_livestream | スマートフォンのカメラからライブ動画ストリームを開始します。HTTPS 証明書を生成し、QR コードを返します。 | -- |
get_live_frame | ライブカメラストリームから最新フレームを取得し、その鮮度を示すタイムスタンプも返します。 | -- |
スタンドアロン CLI モード
CCPhoto は Claude Code を使わずに、単独で実行することもできます。
npx ccphoto # Start with defaults
npx ccphoto --port 4000 --output-dir ./photos # Custom port and directory
ターミナルに QR コードが表示されます。スキャンして写真を撮ると、ディスクに保存されます。サーバーは複数回の撮影に対応するため、起動したままになります。
CLI オプション
| オプション | 説明 | デフォルト |
|---|---|---|
--setup | Claude Code に CCPhoto を MCP サーバーとして登録します | -- |
--mcp | MCP サーバーとして実行します（Claude Code 内部で使用） | -- |
--port <number> | HTTP サーバーのポート | 3847 |
--output-dir <path> | 写真の保存先ディレクトリ | ~/.ccphoto/captures/ |
--help | ヘルプを表示します | -- |
設定
| 環境変数 | 説明 | デフォルト |
|---|---|---|
CCPHOTO_DIR | デフォルトの写真保存ディレクトリを上書きします | ~/.ccphoto/captures/ |
セキュリティ
- セッショントークン -- サーバーセッションごとに、暗号学的に安全なランダムな 32 文字の 16 進数トークンが生成されます。すべてのリクエストにこのトークンを含める必要があります。
- タイミングセーフな比較 -- トークンの検証には
crypto.timingSafeEqualを使用し、タイミング攻撃を防ぎます。 - ローカルネットワークのみ -- サーバーはローカルネットワークの IP にバインドされます。データがネットワークの外部に送信されることはありません。
- 外部サービス不使用 -- 写真は LAN 上の HTTP を介して、スマートフォンとサーバーの間で直接転送されます。クラウドにアップロードされることはありません。
トラブルシューティング
ローカルネットワークの IP を検出できない
コンピューターが WiFi に接続されていることを確認してください（一部の構成では、イーサネット接続だけでは不十分です）。CCPhoto が必要とするのは、スマートフォンから接続できる LAN IP アドレスです。
QR コードをスキャンできない
ターミナルのフォントサイズを大きくするか、ターミナルの幅を狭くして、QR コードがスキャン可能な解像度で表示されるようにしてください。QR コードの下に表示される URL をコピーして、スマートフォンのブラウザーに手動で入力することもできます。
スマートフォンのカメラが起動しない
一部のブラウザーではカメラ撮影機能に HTTPS が必要ですが、ほとんどのモバイルブラウザーでは、ローカルネットワークアドレスであれば通常の HTTP でも使用できます。ブラウザーがカメラへのアクセスをブロックする場合は、Safari（iOS）または Chrome（Android）をお試しください。
アップロードに失敗する
スマートフォンとコンピューターが同じ WiFi ネットワークに接続されていることを確認してください。クライアント分離が有効な企業ネットワークでは、デバイス間の通信がブロックされることがあります。代わりに、個人用ホットスポットまたは自宅のネットワークをお試しください。
開発
npm install # Install dependencies
npm run build # Compile TypeScript
npm run dev # Watch mode (recompile on change)
npm test # Run the test suite (94 tests)
テストには Node.js 組み込みのテストランナーを使用します。また、TypeScript の実行にはtsx開発依存関係が必要です。
プロジェクト構成：
src/
index.ts CLI entry point and arg parsing
mcp.ts MCP server with tool definitions
server.ts HTTP server, SSE, upload handling
mobile-page.ts Self-contained HTML for the phone camera page
storage.ts Photo file management
network.ts Local IP detection
token.ts Session token generation and validation
types.ts Shared TypeScript interfaces
ロードマップ
- 実ドメインと Let's Encrypt 証明書 -- 登録済みドメインと有効な証明書を使用し、iOS Safari を含むあらゆるデバイスでブラウザーの警告が表示されないようにします。
- iOS のライブ動画サポート -- ライブ動画ストリーミングは現在、Android/Chrome で動作します。iOS Safari のサポートには信頼できる証明書が必要です。
- カメラ映像への AR オーバーレイ -- ライブカメラ映像にリアルタイムで注釈を直接描画します。
- マルチカメラサポート -- 複数のスマートフォンを同時に接続し、異なるアングルから映像を表示します。
- WebRTC ストリーミング -- Claude のビジョン処理のレイテンシが改善したら、HTTP によるフレームのポーリングを WebRTC に置き換えます。
コントリビューション
コントリビューションを歓迎します。
- リポジトリをフォークします
- 機能ブランチを作成します（
git checkout -b my-feature） - 変更を加えます
npm testを実行し、問題がないことを確認します- 変更をコミットします（
git commit -m "Add my feature"） - ブランチにプッシュします（
git push origin my-feature） - プルリクエストを作成します
バグを報告する際は、Node.js のバージョン、OS、および問題を再現する手順を記載してください。
ライセンス
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。