画飛彡 (SCR Cast): サポートページ

スマホの画面をローカルネットワークのWiFi経由でブラウザにミラー表示出来る無料アプリ

『画飛彡 (SCR Cast)』

を作ってみました。

Android版 by kii_memo_jp

iOS版 by BIBO-HQ

03/Jul/2024: iOS版も公開されました。

[目次]

kii_memo_jp プライバシーポリシー (個人情報保護方針)

機能

ローカルネットワーク内であれば、「画飛彡」を使ってスマホ/タブレットの画面をWebブラウザにミラーする事が出来ます。

( スマホ/タブレット ➡︎ Webブラウザ )

音声と画像の転送にはWebRTCの機能を使っているので、ミラー画像を受け取るブラウザ側では、アプリの簡易Webサーバーからダウンロード可能な、専用のHTMLクライアントページを読み込む必要があります。

また、クライアントページをOBSのブラウザソースで読み込むとスマホの画面をOBS上に表示することも可能になります。

メイン画面

メイン画面上部 (緑色の部分)には、デバイスの画面共有の種類を選択するラジオボタン、画面共有を開始/停止する「 キャスト」ボタンがあります。

メイン画面下部のオレンジ色の部分には、「簡易Webサーバー」と「シグナリングサーバー」用の表示パネルがあり、このパネルの左上のスイッチで２つのサーバーを有効/無効に出来ます。

簡易Webサーバー: アプリの簡易Webサーバーからミラー画面の表示に必要なクライアントページを読み込む事が出来ます。
シグナリングサーバー: クライアントページからの接続を受け入れて、ミラーリングに必要なWebRTCの設定を確立します。

設定画面

設定画面では、簡易Webサーバーとシグナリングサーバーのポート番号を指定する事が出来ます。

※: 簡易Webサーバーとシグナリングサーバーのポート番号には違う値を指定する必要があり、同じ値を設定する事は出来ません。

設定

簡易Webサーバーとシグナリングサーバーのアドレスは、「画飛彡」がインストールされているデバイスのIPアドレスと同じである必要があります。また、使っているネット環境によってはIPアドレスが定期的に変更される場合もあるので注意が必要になります。

その１

設定方法「その１」では、クライントページをアプリの簡易Webサーバーから読み込む為、常に最新のIPアドレスとポート値が既定値として指定される仕様になっています。

メイン画面下部にある「サーバー(Web+シグナル)」の左横にあるスイッチをオンにしてサーバーを有効にします。
「サーバー(Web+シグナル)」の右にある (共有) ボタンをタップして「URLの共有 」ダイアログを開きます。

「URLの共有」ダイアログ

(※: ステップ１でサーバーを有効にしないと共有ボタンが有効にならない場合があります。)
ダイアログ内にある「簡易WebサーバーURL」ボタンからURLをコピーしてミラー画像を表示したいデバイス上のブラウザでコピーしたURLを開きます。
ブラウザで開いたクライアントページには既に「画飛彡」への接続に必要なURLが入力されているので、「画飛彡」でキャストを有効にした後であれば、クライアントページ上の「Connect」ボタンをクリックするとミラーリングが始まります。

例: クライアントページ

その２

「その２」はクライアントページをファイルに保存して使う方法で、何かしらの理由でIPアドレスが更新された場合やシグナリングサーバーのポート番号を更新した場合は、クライアントページで指定するURLを更新する必要があります。

専用のクライアントページをアプリの簡易Webサーバーからダウンロードしてファイルとして任意の場所に保存します。
WebRTC対応のブラウザで保存したファイルを開いてクライアントページを表示します。
「画飛彡」が起動しているデバイスのIPアドレスとシグナリングサーバーのポート番号(規定値: 18060)をページに次のフォーマットで入力します:
ws://[IPアドレス]:[ポート]
「画飛彡」でサーバーとキャストを有効にした後に「Connect」ボタンをクリックするとミラーリングが開始されます。

iOS版「画飛彡」の場合

画面のキャスト開始時

iOS版の画飛彡を使っている場合は「 キャスト」ボタンを押した場合に「画面のブロードキャスト」についてのダイアログが表示されます。

「収録を開始」をタップすると画面のミラーリングが開始されますが、タップする前に、必ず「SCR Cast Capture ✓」が選択されている事を確認して下さい。

❌ 初回起動時などに、違うアプリが選択されている場合があります。

⭕ 必ず「SCR Cast Capture」が選択されている事を確認して下さい。

このダイアログで別のアプリが選択されていると画面のキャプチャ映像が別のアプリに送られてしまうので注意して下さい。

クライアント接続時

iOS版では、クライアントがアプリのシグナリングサーバーに接続した際に、着信画面が表示されるので✔️ボタンをタップして接続を開始して下さい。

✔️ボタンをタップをしない場合は、アプリがバックグラウンド時に画面共有機能が停止します。

Android版「画飛彡」の場合

画面のキャスト開始時

iOS版の画飛彡の場合は「 キャスト」をタップした際にいくつかの権限の確認ダイアログが表示されますが、「他のアプリの上に重ねて表示」画面が表示された場合は、リストから「画飛彡」のアイコンを探して、アプリの設定を有効にする必要があります。

これ以降に他のシステム権限確認のダイアログが多数表示されますが、初回以降は数が減ります。

動作メモ

※: ~~現バージョンでは他アプリからの音声はクライアントページにミラーされません~~
他アプリからのスピーカー出力がクライアントページにミラーされる仕様になりました。

Android版はver. 0.0.3より他アプリのスピーカー出力音のミラーに対応しています。
iOS版はver. 0.0.6より他アプリのスピーカー出力音のミラーに対応しています。

再接続時にクライアント側でミラー画像が表示されない場合は、クライアントページを再読み込みしてから再接続をしてみて下さい。
画面をミラー共有出来るのは同じローカルネットワーク内です。
学校・企業・団体などのイントラネット上での利用は、ネットワーク管理権限を持つ担当者又は団体から利用許可を得た上で利用して下さい。

更新履歴

バージョン		更新内容
Android	iOS	更新内容
ver. 0.0.7		カメラ/マイクのアクセス権限が無効になっている場合の表示を追加。写真権限の表示を修正。キャスト画面の背景選択画面のプレビューに背景色を反映。キャスト画面の背景設定で画蔵インポート時にアプリがバックグラウンドで停止した後、アプリ再開時に同じ設定画面に戻る仕様に更新。
(30/Jul/2024 公開)	(31/Jul/2024 公開)
ver. 0.0.6		写真へのアクセス権限が無効化されている場合に表示するメッセージを追加。 [iOS] 他のアプリからのスピーカ音の共有(キャスト)を有効化。 [Android] ターゲットAPIを34に更新。 AdMobの追加。
(11/Jul/2024 公開)	(08/Jul/2024 公開)
ver. 0.0.5		Appアイコンを更新。 [iOS] 初回リリース。
(03/Jul/2024 公開)	(03/Jul/2024 公開)	Appアイコンを更新。 [iOS] 初回リリース。
ver. 0.0.4		キャスト画面の背景設定(背景色と背景画像)を追加。 [iOS] 初回リリースに向けての調整。
(01/Jul/2024 公開)	-	キャスト画面の背景設定(背景色と背景画像)を追加。 [iOS] 初回リリースに向けての調整。
ver. 0.0.3		UIを一部更新 [Android] 他のアプリからのスピーカ音の共有(キャスト)を有効化。
(27/Jun/2024 公開)	-	UIを一部更新 [Android] 他のアプリからのスピーカ音の共有(キャスト)を有効化。
ver. 0.0.2		HTMLクライアントの更新 (v0.0.2) UIの更新画面キャプチャ時にマイク音声を有効化。画面キャプチャ/カメラ切り替えと画面オリエンテーション変更後に送信が途切れてしまった不都合を修正。
(24/Jun/2024 公開)	-
ver. 0.0.1		Android 初回リリース
(02/Jun/2024 公開)	-	Android 初回リリース

このブログを検索

kii-memo-dev

ラベル

アーカイブ