画飛彡 (SCR Cast): スマホ画面をブラウザやOBSにミラー表示できる無料アプリ (その１)
スマホ/タブレットの画面をローカルネットワーク内のWebブラウザにミラー表示出来る無料アプリ、
を作ったので、このアプリの使い方のその１をここにメモしておきます。
「画飛彡 (SCR Cast)」は現在、Android版がGoogle Playで、iOS版がAppストアで公開されていますが、画面のミラーにはWeb基準でもあるWebRTCを使っているので、画像を受け取る側のブラウザが最近のものであればアプリからコピーしたURLを開くだけでミラー画面が表示出来る様になっていて、他にアプリをインストールする必要はありません。
[目次]
- 使用例
- 画面をブラウザにミラー
- 画面をOBSにミラー (その２)
- ローカルネットワーク限定
- キャスト接続画面のカスタマイズ
使用例
- スマホやPCのWebブラウザに画面をミラー
- OBSのブラウザソースにスマホの画面をミラー
※: 画面をミラーするのには、画面の送り側と受け取りの両方で設定をする必要があります。
メイン画面
A. 画面をブラウザにミラー
「画飛彡 (SCR Cast)」(アプリ)を使って、デバイスの画面をブラウザにミラー表示する場合は次の様な流れになります:
1. アプリのサーバーを起動
まずは、アプリのメイン画面の「サーバー(Web+シグナル)」の左にあるボタンを操作してサーバーを起動します。
これで、ブラウザ用のページを提供する「簡易Webサーバー」 と、ミラー時の接続に必要な「シグナリングサーバー」の２つのサーバーが有効になります。
2. URLをアプリからコピーしてブラウザでクライアントページを開く
サーバーを有効にすると、それまで無効になっていた「サーバー(Web+シグナル)」の右にある共有ボタン ( / ) が有効になります。
有効になった共有ボタンをタップすると、「URLの共有」ダイアログが開き、このダイアログから
- 「簡易WebサーバーURL」と
- 「シグナリングサーバーURL」
を共有する事が出来ます。
ブラウザーでミラー表示する場合は「簡易WebサーバーURL」ボタンをタップして、 簡易WebサーバーのURLを画像受け取り側のブラウザに渡して開きます。
「画飛彡 (SCR Cast)」がインストールされているデバイスと、ミラー画像を受け取る側のデバイスが同じでない場合が一般的だと思うので、URLをメッセージとして送ったり、クラウドに保存してコピーしたりする必要があります。
簡易WebサーバーURLは:
というフォーマットになっているので、ブラウザに直接URLを打ち込む事も可能です。
- 簡易WebサーバーのURLは「http://」で始まります。「https://」になっているとエラーになります。
- アドレスは共有ボタンの左下にある「IPアドレス」に表示される値になりますが、
- 簡易Webサーバーのポート番号は「設定画面」で指定されている値である必要があります (ポート番号の既定値は「18080」です)。
ブラウザに正しい簡易WebサーバーのURLが読み込まれると次の様なクライアントページが表示されます。
3.アプリ側でキャスティングを始める
アプリのメイン画面の「 キャスト」ボタンをタップします。
場合によって画面共有やマイク録音などの権限を求められるので各自を許可する必要があります。(初回は権限の要求ダイアログの表示が多めになります。)
4. ブラウザから「Connect」
ブラウザに表示されているクライアントページの「Connect」ボタンを押すと、ブラウザからアプリのシグナリングサーバーへの接続が始まり、接続が正しく確立されるとアプリからの画像がクライアントページに表示されます。
※: iOS版だとクライアント接続時にアプリの方に着信のダイアログが表示されるので着信を許可する必要があります。
OBSでミラー画像を表示する方法はその２で紹介します。
コメント
コメントを投稿