画飛彡 (SCR Cast): スマホ画面をブラウザやOBSにミラー表示できる無料アプリ (その１)

スマホ/タブレットの画面をローカルネットワーク内のWebブラウザにミラー表示出来る無料アプリ、

『画飛彡 (SCR Cast)』

を作ったので、このアプリの使い方のその１をここにメモしておきます。

👉 その２

「画飛彡 (SCR Cast)」は現在、Android版がGoogle Playで、iOS版がAppストアで公開されていますが、画面のミラーにはWeb基準でもあるWebRTCを使っています。

なので、画像を受け取る側に最近の一般的なブラウザを使えばアプリからコピーしたURLを開くだけでミラー画面が表示出来る様になっていて、他にアプリをインストールする必要はありません。

[目次]

使用例
1. 画面をブラウザにミラー (このメモ)
2. 画面をOBSにミラー (その２)

👉 画飛彡サポートページ @kii-memo-dev

使用例

スマホやPCのWebブラウザに画面をミラー
OBSのブラウザソースにスマホの画面をミラー

※: 画面をミラーするには、画面の送り側のデバイスと受け取りのブラウザの両方で設定をする必要があります。

画飛彡 (SCR Cast)
メイン画面

A. 画面をブラウザにミラー

「画飛彡 (SCR Cast)」(アプリ)を使って、デバイスの画面をブラウザにミラー表示する場合は次の様な流れになります:

1. アプリのサーバーを起動

(i) まずは、アプリのメイン画面の「サーバー(Web+シグナル)」の左にあるボタンを操作してサーバーを起動します。

(ii) これで、ブラウザ用のページを提供する「簡易Webサーバー」と、ミラー時の接続に必要な「シグナリングサーバー」の２つのサーバーが有効になります。

2. URLをアプリからコピーしてブラウザでクライアントページを開く

(i) サーバーを有効にすると、それまで無効になっていた「サーバー(Web+シグナル)」の右にある共有ボタン ( / ) が有効になります。

「URLの共有」ダイアログ

(ii) 有効になった共有ボタンをタップすると、「URLの共有」ダイアログが開き、このダイアログから

「簡易WebサーバーURL」と
「シグナリングサーバーURL」

を共有する事が出来ます。

(iii) ブラウザーでミラー表示する場合は「簡易WebサーバーURL」ボタンをタップして、 簡易WebサーバーのURLを画像受け取り側のブラウザに渡して開きます。

「簡易WebサーバーURL」の共有

(iv) 「画飛彡 (SCR Cast)」がインストールされているデバイスと、ミラー画像を受け取る側のデバイスが同じでない場合が一般的だと思うので、URLをメッセージとして送ったり、クラウドに保存してコピーしたりする必要があります。

(v) 簡易WebサーバーURLは:

「http://<アドレス>:<ポート番号>」

というフォーマットになっているので、ブラウザに直接URLを打ち込む事も可能です。

簡易WebサーバーのURLは「http://」で始まります。「https://」になっているとエラーになります。
アドレスは共有ボタンの左下にある「IPアドレス」に表示される値になりますが、
簡易Webサーバーのポート番号は「設定画面」で指定されている値である必要があります (ポート番号の既定値は「18080」です)。

「設定画面」簡易Webサーバーのポート番号

(vi) ブラウザに正しい簡易WebサーバーのURLが読み込まれると次の様なクライアントページが表示されます。

3.アプリ側でキャスティングを始める

(i) アプリのメイン画面の「　キャスト」ボタンをタップします。

場合によって画面共有やマイク録音などの権限を求められるので各自を許可する必要があります。(初回は権限の要求ダイアログの表示が多めになります。)

4. ブラウザから「Connect」

(i) ブラウザに表示されているクライアントページの「Connect」ボタンをクリックすると、ブラウザからアプリのシグナリングサーバーへの接続が始まり、接続が正しく確立されるとアプリからの画像がクライアントページに表示されます。

※: iOS版だとクライアント接続時にアプリの方に着信画面が表示されるので「応答」をタップする必要があります。

例: 着信画面 (iOS)

OBSでミラー画像を表示する方法はその２で紹介します。

このブログを検索

メモ帳