kiwamulet / qr-remote-camera

QR Remote Camera

スマートフォン等のカメラからの映像を、手軽に PC 等のブラウザで表示できるようにする Web アプリです。スマートフォンから PC への画像の伝送には WebRTC を使っています。

• 注意点
  • 受信側(PC 等)と送信側(スマートフォン等)とは同じ LAN に繋がっている必要があります。
    「PC は LAN, スマートフォンは LTE 経由でインターネットに接続」という構成では現状動作しません。
  • 受信側でも送信側でも、モダンブラウザ(Chrome, Safari, Firefox など)の最近の版数のものを利用するようにしてください(Internet Explorer には対応していません)。

なお、スマートフォンを PC の仮想カメラにするソフトウェアはいろいろありますので、実用上はそちらのほうが便利な場合のほうが多いでしょう。

デモサイト

https://qr-remote-camera.web.app/

受信側にしたい PC(あるいは Mac, iPad 等) のブラウザで上記の URL を開くと QR コードが表示されます。

それを送信側にしたいスマートフォン等、例えば iPhone の QR コードスキャナでスキャンすると、

"qr-remote-camera.web.app"がカメラへのアクセスを求めています
[キャンセル] [許可]

のようなダイアログが出てくるので、「許可」を押します。

すると、iPhone のリアカメラからの映像が PC のブラウザに表示されます。 (同じ映像が、iPhone の QR コードスキャナ内のブラウザでも表示されます)

送信をやめたいときは iPhone 側で画面左上の「閉じる」を押してください。
映像の送信が終了し、受信側の PC のブラウザでは新しい QR コードが表示されます。

たまに映像が送出されない場合があるようです。その場合は一旦 iPhone の QR コードスキャナ画面左上の「閉じる」を押した上で、再度 QR コードをスキャンしてみてください。

なお、ここでは説明のため映像送信を iPhone から行うものとしましたが、iPad からでも送信できます。作者自身は試していませんが、Android でも動くそうです。

また、上述の通り、現状では受信側(PC 等)と送信側(スマートフォン等)とは同じ LAN に繋がっている必要があります。

ローカル環境での実行方法について

以下では本リポジトリをチェックアウトした PC/Mac 上で本アプリケーションの動作確認を行う場合のやり方について説明します。この手順では Web サーバー/受信側ブラウザ/送信側ブラウザが同一の PC(あるいは Mac)で動作することになります。

1. あらかじめ https://ayame-labo.shiguredo.jp/ で Ayame Labo にサインアップしておく(その際 GitHub アカウントが必要)。

2. PC/Mac 上で動く QR コード読み取り用のアプリをインストールしておく(たとえば Mac だと‎QR Journalが利用可能)。
   また、外付けの USB カメラを接続しておく(下記ステップ 6 で、カメラで画面を撮像できる必要があるが、ラップトップ内蔵のカメラは内蔵ディスプレイの画面を撮像できない点に注意)

3. .envファイルを本プロジェクトのルートに作成し、以下のように編集する。ここで、GitHub アカウントの Username, Ayame Labo のシグナリングキーは上記 1 でそれぞれ設定、取得したもの。

BASE_SENDER_URL="https://localhost:8080/camera"
BASE_ROOM_ID="<GitHub アカウントの Username>"
SIGNALING_KEY="<Ayame Laboのシグナリングキー>"

4. その上で次を実行すると、テスト用の Web サーバーが起動する。

yarn start

5. 'https://localhost:8080/' をウェブブラウザで開くと、QR コードが表示されている画面が出てくる。

6. 上記 2 で用意した QR コード読み取り用のアプリを起動し、5 で表示した QR コードをスキャンする。
   すると別のブラウザが開き、そのブラウザがカメラ利用の許可をダイアログボックスで要求する。
   許可すれば、そのブラウザから映像が送信され、 5 の QR コードを表示していたブラウザで受信、表示される。

   なお、上記 5 で表示した QR コードをスマートフォンでスキャンしても通常は機能しない(Web サーバーが動いているのが PC/Mac であり、URL のホスト名が localhost であるため；スマートフォン側でポートフォワーディングを行う設定を行うことで閲覧可能にする方法があるが、ここでは説明を割愛する)。

ビルド・デプロイ

ビルドした生成物は HTTPS で配信する必要があります(WebRTC の API を使っているため)。以下では、ドメイン example.com が利用可能であるとして、そこからアプリを配信する場合について説明します。実際には example.com の部分を実際に使うドメインに読み替えてください。

1. https://ayame-labo.shiguredo.jp/ で Ayame Labo にサインアップしておく(上記「ローカル環境での実行方法について」と同じ；すでにサインアップしていれば、同じシグナリングキーを用いればいい)

2. 本プロジェクトのルートの.envファイル(なければ作成)を、以下のように編集する(上記「ローカル環境での実行方法について」からBASE_SENDER_URL を変更)

BASE_SENDER_URL="https://example.com/camera"
BASE_ROOM_ID="<GitHubアカウントのUsername>"
SIGNALING_KEY="<Ayame Laboのシグナリングキー>"

3. 次のコマンドでビルドする。

yarn build

4. dist ディレクトリの内容を example.com にデプロイする。

5. ブラウザーで example.com を閲覧する。

あとは上記「デモサイト」の説明と同様の手順になります。

実装等について

React + TypeScript で実装しています。

QR コードの表示には、react-qrious - npmを使っています。

動画の送信には WebRTC を使っています。 その際、シグナリングには時雨堂の Ayame Labo を利用しています。

video 要素を React で扱うやり方などについては、書籍 カメラアプリで体感する Web Appを参考にさせてもらっています。

上述のデモサイト https://qr-remote-camera.web.app/ は Firebase Hosting で公開しているものです。