ブログ、一回書くとほかにもネタが思いつくので、よく言われる着手すればやる気は湧いてくるを実感している、というのはおいといて。
前置き1
前回のブログの外出先でもミニPCを使う、で映像出力をどうにしかしてUVCにするデバイスを漁っていて気づいたのが、最終的に選んだAverMediaのGC313Proしかり、DP Alt Modeの出力を受けて、UVCで出すというデバイスが少ないながら商品化されているんだなということに気づいた。
実際、安いものであれば、スイッチ向けのこれとかは3000-4000円程度で手にはいるので、スマホを充電しながら映像出力をUVCでPCに入れたいとなったらなかなか良いのでは、と思ったのが始まり。
（余談だが、この写真はChatGPTに「影を消して、被写体以外の背景の必要なさそうなものを消して、画像をクリーンアップして」と指示しただけでできあがったもの。こういうレタッチ的なやつ本当にすごい精度になったなと思ってびびる。）
形状的にハブっぽくてHDMIやUSB-Aのポートもあるのでちょっと大きく感じるので、もっとケーブルっぽいのもないかなとおもって探したら同じシリーズっぽいのに充電ナシならあった。これなら直結っぽく見えるので、三脚とかと組み合わせるならいいかもなとおもいつつ。
最終的に、Aliexpressであれば同じようなシリーズで、最近はよくみるHagibisブランドの、PDでの充電+DP→UVCだけを備えた、まさに意図的通りな製品があった。
前置き2
というわけで、本題の前置き。
コロナ禍以降、やたら性能があがって画質のいいスマホをウェブカムにしたい、というのは割と定番の要望だとおもうのだが、あんまり定番の解決方法がないなと思っている。
macOSのContinuous Camera(日本語だと連携カメラ？が正しいのかな)は悪くないのだが、macOS+iPhoneじゃないとダメなので使えない環境が多いし、Windows 11 23H2以降であればAndroidスマホをカメラにすることもできるのだが、Windowsにリンクというアプリを入れておかねばならず、Foreground Serviceでうごいて常駐っぽく動くのであまり嬉しくない＆手元で試すかぎり、うまくつながらないことが多くてなかなかストレスフル。
で、この手のネットワークで連携するやつはサードパーティーのものもいくつあるのは分かってるのだが、どれも遅延がそこそこあるのでリップシンクとるの難しかったり、Windows側によくわからんドライバ入れるのはちょっとなぁとか、大体は720/30pくらいが限界のものが多くてなんともイマイチだなぁという気持ち。
あと、個人的には、自分としては思い入れのある AeroCaster LIVE/SwitcherはiPadアプリとして、あまり謳ってないが、しれっとUVCデバイスのキャプチャに対応している。これを利用して、有線接続のPCやスマホをつなげる、というのを満たすのも配線がごちゃごちゃして現実的じゃないなぁと思っていた（スマホ/PC→USB Type-Cハブ(ここにPDで充電)→HDMIキャプチャ→iPadという接続になりがちで、ネットワーク経由だとめんどくさいという人に、違う面倒くさいことを要求する感じになってチグハグ感がある）
あたりを諸々考えると、距離が取れないとかはありながらも、素直に有線でつなげられればいいんだよなとおもいつつ、配線がめんどくさくてちょっとしたときに使う気にもならないというのが課題だなぁと思っていた。
実際の配線
というわけで、前置き1で出てきたほぼ直結に見えるケーブルの出番。これだと、スマホ側のUSB-Cのポートと、PC側にもUSB-Cのポートがあれば双方に接続すると（実際には接続方向があるが）、スマホが外部ディスプレイに接続したものがそのままUVCデバイスとしてPCから見える。（AeroCasterの場合は、PCのDP Alt Modeでの外部ディスプレイ対応のType-CポートとiPadを接続する）
充電が必要であればもう1本ACアダプタから接続が必要だが、そうでなければ1本接続すればUVCで見えるカメラになるので、ちまたのWebカメラと同じ使用感にできる。スマホ自体は適当なスタンドで立ててもいいが、リモート会議用であれば、MacのContinuous Camera用のマウントはMagSafe対応のケースなどにしていればAndroidでもノートPCに固定できるので、わたしはこれを使ってノートPCの上にマウントしている。
カメラ映像の外部ディスプレイ出力
これを試していて一番困ったのがカメラ映像を外部ディスプレイにUIやOSD的な表示なく映像だけ出せるようにすること。（いわゆるクリーンアウトとかそういうやつ）
iOSだと最近は定番のBlackMagic Cameraがあって、各種画質調整ができるし、Clean HDMI outが明示的に指定できるので、ほぼコレ一択で決まる（検索すると出てくるAirmix Soloはすでに開発おわってたり、FiLMiC Proは今はサブスクになったりしたのでハードルが高いというのもあって、意外と選択肢がすくない）
ただ、iPhoneの場合、DP Alt Modeで出せるのはiPhone 15以降のUSB-Cが載ってるものじゃないといけなくて、個人的には持ってないので、会社にあるiPhone 15 Proを業務で使うときだけこの構成を使ってみている。
なので、私用のときとかはAndroidのほうがいいなぁというのがあるのだが、残念ながら、BlackMagic CameraはAndroidでは動作確認されている限られたスマホだけでしか動作しないのであんまり使いたい感じにはならない。（Xiaomi 15 Ultraを買おうかなと思っているので、DP Alt Modeも対応してそうだし、そのうちBlackMagic Cameraが対応する気はしているが……）
いろいろとそれっぽく外部ディスプレイにカメラ映像を出せるアプリを探してみたのだが、どうもよさそうなのが見つからない（FiLMiC Proは出せそうだったが、入れてみた感じ、手元のスマホだとうまくうごかないこともあるのと、サブスクなので今回の用途だとさすがにつらい）
というわけで、最近話題のvive codingしてみたかったし、さくっと作ってみるかということにした。
というわけで、自作のカメラアプリ（というか、AIでコーディングの雑感）
ご多分に漏れず、ということで、最近はAIでコーディングを自分もやってみていて、ReplitやらJulesやらCodexやらといろいろ試していた。特にウェブサイトをReactで作ってみるとかであれば、本当にいい感じで作れるのは分かった（とくに私はデザイン/UIといった側面が苦手なので、そこを華麗に解決してくれるのは本当にありがたい）が、モバイルアプリ開発となるとコンパイル自体をためしたりをVM側でやらせるのは難しかったりして、どうもうまくいかないというか煩雑なことが多いなーと思っていた。が、最近話題のClaude Codeをせっかくだし一度は試してみるかということにしてみて、$200課金したところ、かなりいい感じだということに気づいた、というお話。
Claude Codeは本当によくできているなーというのが大筋の感触で、CLIで使えるのが本当にアプリ開発としては使い勝手がよい。生成されたコードをいざビルドするとSyntax Errorをいつまでも治せなくてイライラするとかもなく、コード修正→コンパイル通るか確認→テスト通るか確認→adbでデバッグビルドを実機に送って実行、までを勝手にやってくれるので本当に使い勝手がよいなーと実感したところ。MAXプランだと課金を気にしなくてもよいのも体験としては良い（といっても、毎月$100-$200を払うかというとなーというのはあるが）
このアプリはほんとうに試しに作っただけなので、別にもう公開でいいやということで、Githubにそのままコードを置いている。
リポジトリは、コチラ。
こだわりもないので、MITライセンスにしている（が、Claude Codeで生成したコードのライセンスってどうなんだろうという疑問はあるっちゃあるのだがよくわからん。）
こちらに一応リリースビルドしたapkも置いているので、たぶん使いたければ使える気はする。Google Playでの配布は最近大変そうなのでたぶんやらないので、apkをそのまま入れる感じ使い方がいればぜひどうぞ。
機能としては、CLAUDE.mdに書いてある通りだが、ほぼ単機能に近い。
- スマホのカメラ映像を外部ディスプレイに表示するアプリ
- 内蔵カメラの前後切替、ズーム率だけいじれる（WB、Exposure、Focusは全部自動）
- カメラ映像の上下反転、左右反転ができる（設定は保存される）
- オーディオはマイクからの音をそのまま、外部デバイスにスルーアウトする（出力先はUIから選べる）
カメラのWB,Exposure,Focusあたりは触れるようにするといい気はしつつ、自分の利用ケースだとまあそんなに要らないんだよなというのでとりあえず省略。
CLAUDE.mdに大体書かれているくらいの内容であとはAIにお任せで作ったコード。どこまでまともにうごくのかは私も良く分かってないってやつではある。動作確認って大変だよね。
実際には、CLAUDE.mdのApp overviewを中心に、ちょっとずつ加筆修正していって、エラー解消関連は直接指示して修正させるという感じで、積み上げながら機能追加をしていった。
ソースコードの内容もある程度把握しようかとは思ったけど、まさに誰かからコードを引き継いだときの気分で、読んで頭の中で理解できている状態にもっていくのがしんどいので、エラー解消の時に局所的に読んで修正はしたが、それ以外では結局、ほとんど読んでいない（ので、把握していない箇所はそれなりにある。）
苦労ポイントとしては、下記のようなところだろうか。
- 外部ディスプレイのスペックにあわせて、スケールや回転を意図通りにさせるのにかなりの回数リテイクした（これを従量課金でやるのは怖いレベル）
- 現在も本当にどんな相手でもそれなりに動くのは怪しい気がしている。修正としても、いくらいっても治らなくてもう最後のほうは、「現在の状態だと270°回転してしまっているので、90°回転してくれ」とか相当個別なエッジケースに対して、修正指示して帳尻を合わせたので、動かないケースはそれなりにありそうな予感がしている
- 縦横回転を考慮させると大体どれかのケースで破綻するので横向き(landscape)固定にした
- まあ、自分で作るときにもうまくいかないことはAIにもうまくはやれないということなのかもしれないが、端末の回転、映像の回転、UIの回転、内蔵／外部ディスプレイの回転と条件の組み合わせが非常に複雑な場合、どれかをなおすとどれかがダメになって、組み合わせが増えるのを全部まともに解決するのはうまくいかないなぁというのが実感。ただ、カメラアプリを作っていると別に自分でマトリックス書いて実装してもハマる部分なので、しょうがないのかもしれない。ある程度妥協して破綻しないところを環境条件を固定して合わせないと無理だったので、landscape固定、映像も横長した対応しない、ということにした。
- テストのカバレッジを上げるのは大変
- まずはカバレッジとかはきにせずに、ユニットテストを実装してくれ、テスト実装がむずかしければリファクタリングしてくれ、というので何度かためしたが、自分でつくったテストが通らなくなって、治せないので勝手に削除したりしちゃって、網羅的なテストを通る状態のまま維持するのは非常に大変である。正直、テストを提案させるのはよいが、最終的にテストの調整をするのと修正は自分でやらないと厳しいのかなというのが現在の気持ち。まあ、仕様の最終判断は自分であることを考えると、テストのレビューはこちらでせざるを得ないといえばそう。ただ、下記のテスターの気分というのもそうだが、楽しいコーディングの時間は削られるが、レビューとテストは全部やらねばらなぬ、となるので、あんまり楽しくない気がするのが一番の悩み。まあ慣れるしかないのか。
- 大きく機能を足すときのデグレ防止が難しい
- 機能追加をするときは既存のテストを修正するなという制限を加えながら、できるだけ細かく機能追加指示をしないと割と簡単に既存の動きの何かを壊してしまう。なので、テストを毎回通させつつ、手元で割と入念な動作確認が必要、というのがある。
- 気持ち的にはAIさんの専属テスターとして自分がずっと稼動することになって、端的に言ってあまり楽しくない。これは仕事で外注していると、結局、検収作業だけは誰にもオフロードできなくて、延々と動作確認している発注元という立場によく似ているなという気がしている。つまり、AI特有というよりは、自分以外にコーディングをしてもらう上でのストレスポイントでしかなさそうだが。
- 遅延を小さくしたいのでネイティブに実装を寄せて、みたいなのはマイナーだからか難しい
- Oboe+AAudioみたいな構成で、オーディオ周りをネイティブにしてくれとか、Vulkan使って、HardwareBufferつかってコピーを減らしてレンダリングを高速にしてくれ、とかをもうちょっと詳しく設計を示しながら、参考ドキュメントとかも合わせて食わせて指示してみるが、まあうまくいかない。たぶん世にサンプルが少ないことが要因かなーと思っているが、うまくいかなさすぎて、自分で書いた方がいいなというのがこの辺の雰囲気。不得意なところをやらせないようにするという判断がすごく難しい。
といっても、大体、丸二日間はあれこれを指示をしながら合間で仕事したり動画見たりしていたら使えるレベルにはなったので、短期間の成果としてはすごいなーという実感は世間の評価と同じ。ただ、指示に関しては、利用するライブラリやUIフレームワークも明確に個別に指定しているし、外部ディスプレイやオーディオデバイスに指定では利用するシステムサービスなども名指ししたりしているし、ファイル構成などもある程度手動で構成しているし、AIが袋小路に陥ったときにはコードをみながら具体的な修正案を出したりしているので、コードが書けない人がこれができるかというとやはり現状ではなかなか難しいのかなというのは思う。企画の人がこのアプリを錬成できるかというと……というところではある。
とはいえ、プログラマなら余裕かというと、これをやっている間のコンテキストスイッチのコストはやっぱりそれなりに高くて、指示してその作業が終わるまでの間にほかのことをしてるとやっぱり戻ってきたときに何してたっけから始まって指示を頭の中で形作っていくので、なかなかの認知負荷だなぁというのを感じるところ。
これって、なんかこうまさに仕事でマネージャーやってる気分で、定例でメンバーの皆さんから進捗報告と課題をもらって、その場で答えるか、一旦受け取って、手元で調べて次の方針やタスクを示すというまさにアレを短期間で繰り返しやってる感じ。この手のプロジェクトが今の仕事だと大体4-5つあるので、定例やら関係のうちあわせが週に各2-3回あると週10-15回くらいの打ち合わせがあって、それにチームMTGやらの組織の縦構造側の打ち合わせを+5回くらいすると週20回になって、ほらずっと打ち合わせしてる課長の完成みたいなやつなのだが、この定例打ち合わせと同じような負荷をClaude Code相手に感じるところがある。ちなみに、現実のチームでは、メンバーの中でもほぼ自走してくれて、こちらで課題の把握や指示が必要のない、いわゆるベテランが何名か居るのだが、AIは今のところ、それには遠く及ばず、だれかが言っていた無知だけど優秀な新入社員という位置づけはすごく良く分かるなというのも思うところ。なので、これを並行で働かせるということは、チームに新入社員が3-4人配属されて、割と細かく指示しながら成果を出していくみたいな発想になるんだなというのに気づく。まあ、そんなこんなで、Claude Code使ってると内容に拘わらず、なんかプライベート時間なのに仕事してる気分になる。言葉にするのは難しいが。
というわけで、AIでのコーディング(vive coding)への雑感と愚痴はおいといて。
そうやって完成したコードは、上記リポジトリにおいて、一応リリースビルドしたapkもあるので、今回の構成で使ってみたい方は使ってほしいなという気持ち。
というわけで、実際の使い方
基本的には、Androidスマホに上記apkをつっこんで起動するだけ。前後カメラや反転の設定は保存されているので一度設定すればすぐに動くはず。
PCでリモート会議とかで使うなら、上記にもあったような感じでノートPCにマウントするのが無難かなと思っている。
OBSなどで配信で使いたいときは、映像キャプチャデバイスとマイクを該当デバイスに指定すると利用できるはず。
AeroCasterで使う場合は、スマホの映像を撮りたいというのは少ないかなと思っていて（メイン機能として、ネットワーク経由で低遅延に映像と音声を送れるところだし）、どちらかというと、PCの画面をURL発行してブラウザで共有して、という手順を省くために、PCのDP Alt Modeで出力できるポートにつないで、iPad側に直結してしまうという形で、PC画面を入力として使いたい、という方法につかえるんじゃないかと思っている（下記のような使い方）
意味があるかはなんともいえないが、iPadに対してスマホのカメラを1本で入力できる（映像では左右反転しているが、それは設定で変えられる）
あとは、稀にだけど、ホワイトボード的に書いてるものをそのまま相手に共有したくなることがあるんだけど、そのときはiPadのフリーボードをひらいていると外部ディスプレイにもそのまま表示されるのでそれを第二カメラの共有みたいな機能がZoomにもTeamsにもあるのでそちらをつかって会話するのにも使える（がまあこういうときはわざわざこのデバイスじゃなくてもという気はする）
AIコーディングしてみたかったが実際の主題で、まあ、スマホをウェブカムにするのはやってみたかっただけみたいな感じになってしまったが、というあたりで、スマホというか、DP Alt Modeでの出力可能なデバイスをウェブカムにする方法のぐだぐだしたまとめでした、というお話。