前回の続きです。前回は、Androidスマートフォンをサーバとするアプリ開発の方法を書きました。
今回は、このコードをベースとして、Androidスマートフォンがサーバ+カメラになって部屋の映像を送信し、別の部屋にあるPCやタブレットなどが映像を確認できる仕組みを作りました。
なお、今回もGitHub CopiotのClaude3.7 Sonnetを使いながら作っています。
1. Androidのプロジェクト構成
今回はこのようなプロジェクトを作りました。
追加や変更対象には赤枠をつけています。1つずつ説明します。
1.1 AndroidManifest.xml
カメラに関するpermissionを追加しています。 gist.github.com
1.2 CameraCapture.kt
カメラで撮影し、その結果をwebsocketで送るための機能です。 gist.github.com
MainActivity.ktの中では、このようにCameraCaptureクラスを呼んで使っています。
val cameraCapture = CameraCapture(this) try { cameraCapture.startCamera(session)
1.3 MainActivity.kt
ここでは、冒頭の画面、Ktorを使ったサーバ起動 (別端末のブラウザでアクセスした時のページを準備するため)、websocketの起動などを担当しています。
1.4 index.htmlとclient.js
これはAndroidスマートフォンをサーバとしているため、別端末のブラウザでアクセスした時に表示するファイルです。
このように書きました。
また、これらのファイルを格納するためのフォルダを作っています。まず、"Android"となっているHierarchyの状態で、"app"で右クリックして New > Directory、ここでassetsが候補に出てくるので選択します。(出てこない場合は自分でassetsと入力すれば良いはずです)
その後、今度は"assets"フォルダを右クリックして、New > Directory、ここでstaticと入力します。
staticフォルダができたら、この中にindex.htmlとclient.jsを格納します。
1.5 network_security_config.xml
http通信を許可するためのファイルです。このように書きました。
なお、このファイルはAndroidManifest.xmlでも使われています。
android:networkSecurityConfig="@xml/network_security_config" tools:targetApi="31">
1.6 build.gradle
前回のKtorによるサーバと大きくは変わりませんが、websocketを使うためのモジュールを追加しています。
gist.github.com
2. 動作確認
Androidスマートフォン (Surface Duo) を赤ちゃん用ベッドの側に配置して、このアプリを起動します。
現時点では、アプリのGUIはとてもシンプルです。このように、起動すると「サーバ開始&映像伝送開始」ボタンが表示されます。このボタンを押すと、Ktorによるサーバ+Websocket通信+カメラが起動して映像伝送が始まります。
この状態で別端末のブラウザ (今回はiPhoneのSafari)から"http://192.168.0.8:8080"を開きます。
すると、このようにSafari上でSurface Duoのカメラ映像を取得できます。
ここでは静止画ですが、実際はSurface Duoを動かすとiPhoneのSafariで映像が変わることが確認できました。
ただし、現時点のコードでは以下の問題があります。
- Surface Duoがスリープになると、サーバが自動的に切れることがある
- Surface Duoに対して1つのクライアントしか接続できない。2台目が接続すると、1台目の映像表示が止まる
- メニューとかボタンとかが考慮されていないので、まだ家族が使えるほどではない
まだ動作確認を始めたばかりなので、これから修正していきます。
3. おわりに
あとは、安定性を強化したり、メニューやボタンをわかりやすくしていきます。
生成AIによる開発はかなりよいですね。丸投げではなく、ある程度理解した状態であれば強力なサポートを得られると思います。