ヘルプ · スマホのペアリング
スマホペアリングのトラブルシューティング。
要点: スマホとエディタの両方がWebRTCに対応し、データ通信が正常であることが必要です。よくある原因は、企業のファイアウォールによるWebRTCのブロック、またはWebRTCハンドシェイクの停止です。両側を更新してやり直してください。
ペアリングの仕組み
エディタ側(デスクトップのブラウザ)がPeerJS接続を開いて6文字のPINを生成します。PINはQRコードにエンコードされ、スマホ側のURL screenshotify.app/app?peer=ID&pin=PIN の一部として埋め込まれます。スマホがQRを読み取るとそのURLを開き、エディタ側に接続します。PINが検証されるとデータチャンネルが開きます。その後、スマホ側の写真選択ボタン(スマホアプリの現在の表示言語でラベルが表示されます)が、WebRTC経由で画像データをエディタに直接送信します。
QR接続のトラブル
- 両方のブラウザがWebRTCに対応している必要があります。 Safari 17+、Chrome 100+、Firefox 100+、Edge。古いバージョンのSafariはデータチャンネルAPIが有効になっていません。
- 両側でインターネット接続が必要です。 ペアリングはPeerJSのシグナリングサーバーを使って直接接続をセットアップします。どちらか一方でも通信が途切れていると、QRハンドシェイクが失敗します。
- 企業・学校のファイアウォールがWebRTCをブロックすることがあります。 ゲストネットワークや社内VPNを使用している場合、WebRTCのSTUN/TURNトラフィックがフィルタリングされる可能性があります。スマホのモバイルホットスポットをお試しください。
- 認証ハンドシェイクのタイムアウト。 スマホがエディタのデータチャンネルに接続すると、認証メッセージを送るまでの猶予は3秒です。通信の瞬断やブラウザタブがバックグラウンドに移ったことでハンドシェイクが止まると、エディタは接続を切断します。「Connect phone」をもう一度クリックして新しいセッションを開始してください。モーダルが開いている間、PINは有効です。
iOS Safariの「Camera permission denied」エラー
iOS Safariはカメラへのアクセスを厳しく制限します。以下の3点を確認してください。
- Safari Settings → Camera → Ask または Allow(screenshotify.app に対して)
- QRスキャナーにアプリのカメラ許可は不要です。システムのQRスキャナーが使われます
- ファイルピッカー(カメラではなく)を使う場合、カメラ許可はまったく必要ありません
スキャン後の「未接続」表示
データチャンネルは開いていますが、エディタ側がスマホを認識できていません。スマホ側が認証メッセージを送る前にPINチェックがタイムアウトしたことが主な原因です。スマホ側のタブを閉じ、エディタ側で新しいQRを生成して、再度スキャンしてください。
画像が届かないときの確認事項
画像データの転送はスマホからエディタの一方向です。スマホが「送信済み」と表示した後もエディタに画像が届かない場合は、以下を確認してください。
- QRをスキャンしたのと同じブラウザタブでエディタが開いたままになっているか
- エディタ側で別のページに移動していないか(移動すると接続が切れます)
- 画像が5MB未満かどうか(非常に大きなキャプチャはデータチャンネルを詰まらせることがあります)
プライバシーについて
スクリーンショットのデータはWebRTCを介してスマホからエディタへ直接転送されます。サーバーを経由しません。シグナリングサーバー(PeerJS)は2つのPeerが接続しようとしていることを認識するだけで、画像のペイロードは参照しません。