note-articles/docs-tech/browser-secure-context/index.md

sidebar_position, title, description, hide_table_of_contents, displayed_sidebar

sidebar_position	title	description	hide_table_of_contents	displayed_sidebar
99	ローカルサーバーでマイク・カメラを使う方法	HTTP + IPアドレスでブラウザのマイク・カメラが動かない問題の解決策	false	null

ローカルサーバーでマイク・カメラを使う方法

問題

ローカルネットワーク上のサーバー（例: http://192.168.1.100:7860）にブラウザからアクセスすると、マイクやカメラが使えない。

NotAllowedError: Permission denied

原因

ブラウザの セキュアコンテキスト 制限。getUserMedia()（マイク・カメラ API）は以下の条件でのみ動作：

• https:// — HTTPS接続
• http://localhost — ローカルホスト
• http://127.0.0.1 — ループバック

http://192.168.x.x は対象外。

解決策

方法1: SSHトンネル（推奨）

最も簡単。リモートサーバーのポートを localhost にフォワード。

ssh -L 7860:localhost:7860 user@192.168.1.100

その後 http://localhost:7860 でアクセス → マイク使用可能！

複数ポートの場合：

ssh -L 7860:localhost:7860 -L 8000:localhost:8000 user@192.168.1.100

方法2: Chromeフラグで許可

テスト用途に。特定のIPをセキュアコンテキストとして扱う。

1. Chromeで chrome://flags にアクセス
2. Insecure origins treated as secure を検索
3. 許可するURLを追加（例: http://192.168.1.100:7860）
4. Chrome再起動

:::warning セキュリティが低下するため、開発・テスト用途に限定してください。 :::

方法3: 自己署名証明書でHTTPS化

本格運用向け。サーバー側でHTTPSを有効化。

# 証明書生成
openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes \
  -subj "/CN=192.168.1.100"

# Pythonの場合（例: Gradio）
python app.py --ssl-keyfile key.pem --ssl-certfile cert.pem

ブラウザで https://192.168.1.100:7860 にアクセスし、証明書警告を許可。

方法4: ngrok / Cloudflare Tunnel

外部サービス経由でHTTPS URL を取得。

ngrok http 7860
# → https://xxxx.ngrok.io が発行される

早見表

方法	難易度	セキュリティ	用途
SSHトンネル	★☆☆	◎	開発・日常利用
Chromeフラグ	★☆☆	△	一時的なテスト
自己署名証明書	★★☆	○	チーム共有
ngrok等	★★☆	◎	外部共有・デモ

関連

• DGX SparkでVibeVoice ASRを動かす — リアルタイム音声認識