気になる点はいくつかある

テザリングで端末間の通信はできるのか

簡単にノートパソコン 2 台をスマホのテザリングで接続し
片方でローカルウェブサーバを起動し
片方でアクセスした

成功した
特にテザリングした中では端末間の送信は禁止されていなかった
場合によっては設定で変更かもしれない。。。

ローカルだけで WebRTC 接続できるのか

普通にできるっぽい
インターネット越しに通話するとなるとサーバを使って使えそうな経路を調べることになるが、特にその設定をしなければローカルの経路情報だけが用意されて互いに通信するらしい

SDP は QR コードにできるのか

試しに生成したローカルの経路情報付き SDP を QR コードにしてみた
ものすごい細かさなので読み取りが難しいが読むことはできた
あまりに使い勝手が悪ければ複数の QR コードに分ける手もあるので受け渡し方法は QR で問題なさそう

ざっくりと設計

テザリングをするといっても
親機は SIM のない、モバイルルーターや使わなくなった端末かもしれない
そのため、インターネット接続がなくても動作するようにしたい
ネイティブアプリか PWA が考えられる

~~かなりどちらでもよかったが Flutter 触りたいのでネイティブアプリとして作る~~
と思ったがライブラリがビルドできないエラーを抱えているようだったので React(Next)を使った PWA に路線変更した

画面設計

ナビゲーションバーを使ってどの画面へも好きなタイミングで遷移できる

画面名	見えるもの	できること
TOP	マイクデバイス	使用デバイスの変更
	接続状態
	接続中のセッション数
招待	リクエスト QR
QR 読み取り	カメラプレビュー	QR の読み取り
	レスポンス QR

※リクエストの QR の読み取り完了後は自動でレスポンスの QR を表示する
※レスポンスの QR の読み取り完了後は自動で TOP 画面へ遷移する

ユーザの利用フロー

全員、アプリをインストール
全員、同じ Wi-Fi に接続
全員、アプリを起動
親が QR コードを表示する(招待画面)
子が QR コードを読み取る(QR 読み取り画面）
子が QR コードを表示する(QR 読み取り画面にて QR が自動で表示される）
親が QR コードを読み取る(QR 読み取り画面）

これで通話できる
本来ならサーバ経由で送り合う SDP を QR コードで渡すことで通信を確立する
親 → 子だけでなく、レスポンスとなる子 → 親の情報伝達も必要になる
Flutter であれば親機をサーバにして子 → 親のステップを省けるはずだった
PWA ではサーバ機能を提供できないので断念

使えそうなライブラリ調査

PWA

CSS フレームワーク

まぁ、、、とりあえず Bootstrap でいいか。。。
みんな使ってるし。。。

一応ここで使用率はチェック

WebRTC

そもそも Javascript で WebRTC が扱える
概念的には親子間で通信する際に互いに自分と相手の SDP を設定することで使えるらしい
設定するものとしては以下の表の通り
番号は今回の処理フローにおける設定順
QRで送っているのは1と3の情報

	LocalDescription	RemoteDescription
親	1 親の OfferSDP	4 子の AnswerSDP
子	3 子の AnswerSDP	2 親の OfferSDP

QR コード生成

React 向けのもあるが
より人気のあるこっちにした
QR コード画像の URL を発行してくれる

QR コードリーダー

すごくいろいろあったが React 使うならこれでよさそう

こちらの記事が大変参考になりました

状態管理

React 標準の context で作ってみる
Redux は Vuex を使ったことがあるのでなんとなく思想がわかったのと
実際に使うとなると学習コストがかかりそうだったので今回はパス

作ってみる

Next.js プロジェクトの初期化

npx create-next-appコマンドは Nuxt ほどじゃないが気軽に使えてよかった
今回は Typescript と ESLint を有効にした
できれば CSS フレームワークやほかの Linter の導入も支援してほしい。。。

ライブラリの導入

一旦使いそうなライブラリをすべて導入してビルドしてみる
Flutter で最初開発してて、中盤に差し掛かって導入したライブラリがビルドできないとかいう悲劇があったので、今回は最初にその可能性をつぶしておく

Bootstrap は特に問題なし、ついでに空のページとナビバーを追加してページ切り替えの動作確認

QR コードの読み取りは少しトラブル発生
React18 系に標準だと対応していなかった
Issue を参考にnpm i react-qr-reader --legacy-peer-depsでインストールした
あまりいい対応ではないが動いたのでヨシ

QR コード生成は難なく成功

PWA は各ページのキャッシュ方法が分からなかったが
cacheOnFrontEndNav という設定があったので助かった

ひとまずどのライブラリも問題なく入って動かせた

音声通話を実現する

1 対 1 の通信確立にチャレンジする
この記事がものすごくわかりやすかった
https://lealog.hateblo.jp/entry/2019/04/22/095422

OfferSDPはQRにできたがAnswerSDPが若干容量オーバーでQRにできなかった
そもそもQRが細かすぎてスマホ同士で読める気がしないので
SDPを分割して複数のQRを一定間隔で表示することで情報を渡すことにした
QRの冒頭にインデックス情報をつけることで結合できるように工夫

意外な挙動をもう一つ確認した
AndroidはChromeでマイクを使用しているとChromeを通話アプリとして扱うらしい
このせいで音量が0にできなかった
さらにどのタブかは関係ないらしく、マイクを使っていないタブの音も通話扱いになっていた
今回は通話するためのアプリなのでいったん気にせず進めるが、音量を0にできないのでデバッグ中にハウリングが止まらない

複数人との通話を実現する

接続を複数持って管理できるようにする
これは単純でRTCPeerConnectionのインスタンスを複数持てるようにObjectに格納して保管するだけ

デプロイ

誰でも使えるように公開する
Vercelを使ったことがなく、Nextに触れたこのタイミングで使ってみることにした
驚くほど簡単だった
もうHerokuは時代遅れなのかもしれない。。。