Goでスマホカメラをを映すWebアプリを作る
思いつき
OBSにはWebカメラを追加して映像を重ねて映すことができますが、
普段ミーティングに使うWebカメラを動かさずに別視点のカメラが欲しくなったんです。
しかし、Webカメラを買い足すよりも優秀なカメラがスマホについてることに気づきました。
そういえばmacOSとiPhoneの組み合わせでiPhoneがWebカメラとして使える機能があるそうな。
Androidを持っているならWebカメラになれるアプリなどがあったりします。
しかし、環境ごとに違う操作やアプリを利用するのは面倒なので、ホスト側もカメラ側も任意のデバイスで映す方法が欲しくなりました。
そこでWebRTCですよ、と。
ホスト画面にQRコードを表示、スマホでそれを読み取ることでWebRTCで接続。
スマホのカメラをホスト画面に表示するという戦略でどうだろう？
成果物
ここを開いて、表示されるQRコードをスマホで読み取ってそのリンクをブラウザで開く。
表示される「Camera ON」ボタンを押すとシグナリング処理でネゴって繋がります。
すると、スマホカメラの映像が最初のブラウザに表示されるようになります。
ソースコード
採用技術について
WebRTC & WASM
GoのWASM出力機能を使って、JavaScriptのWebRTC関連APIを利用するコードを書いた。
UUIDv7
タイムスタンプベースのUUIDの新規約
後述のシグナリングにはピアごとにユニークなキーが必要なので、
このUUIDv7による値２つを利用した。
operatorとは？
rtctunnnel考案者の作ったシグナリングサーバー相当機能。
ユニークなキー文字列をIDとしてPub-Subするサーバー。
OBSのブラウザソース
ブラウザ表示を録画配信画面に重ねることができる。
この表示内容に「 https://nobonobo.github.io/SmartWebcam 」を指定することで、
ここにスマホカメラの映像を映すことができる。
結果
このように手元の撮影をスマホカメラで行いその映像を配信・録画画面に重ねることができた。
そのうえ低遅延で実現できているように見えますね！
このようなWebアプリがGoだけで書けちゃうのすごくない？
Discussion
作ってから似たようなサービスがあることを知るなう。