From 390ec4dcd4afe53e4107a34e6e1c66185755749b Mon Sep 17 00:00:00 2001 From: koide Date: Tue, 24 Feb 2026 01:28:26 +0000 Subject: [PATCH] =?UTF-8?q?Add:=20=E3=83=AD=E3=83=BC=E3=82=AB=E3=83=AB?= =?UTF-8?q?=E3=82=B5=E3=83=BC=E3=83=90=E3=83=BC=E3=81=A7=E3=83=9E=E3=82=A4?= =?UTF-8?q?=E3=82=AF=E3=83=BB=E3=82=AB=E3=83=A1=E3=83=A9=E3=82=92=E4=BD=BF?= =?UTF-8?q?=E3=81=86=E6=96=B9=E6=B3=95=E3=80=81VibeVoice=E8=A8=98=E4=BA=8B?= =?UTF-8?q?=E3=81=AB=E3=83=AA=E3=83=B3=E3=82=AF=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs-tech/browser-secure-context/index.md | 95 ++++++++++++++++++++++ docs-tech/dgx-spark-vibevoice-asr/index.md | 4 +- 2 files changed, 98 insertions(+), 1 deletion(-) create mode 100644 docs-tech/browser-secure-context/index.md diff --git a/docs-tech/browser-secure-context/index.md b/docs-tech/browser-secure-context/index.md new file mode 100644 index 0000000..69d1e63 --- /dev/null +++ b/docs-tech/browser-secure-context/index.md @@ -0,0 +1,95 @@ +--- +sidebar_position: 99 +title: ローカルサーバーでマイク・カメラを使う方法 +description: HTTP + IPアドレスでブラウザのマイク・カメラが動かない問題の解決策 +hide_table_of_contents: false +displayed_sidebar: 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` にフォワード。 + +```bash +ssh -L 7860:localhost:7860 user@192.168.1.100 +``` + +その後 `http://localhost:7860` でアクセス → マイク使用可能！ + +**複数ポートの場合：** + +```bash +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を有効化。 + +```bash +# 証明書生成 +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 を取得。 + +```bash +ngrok http 7860 +# → https://xxxx.ngrok.io が発行される +``` + +## 早見表 + +| 方法 | 難易度 | セキュリティ | 用途 | +|------|--------|------------|------| +| SSHトンネル | ★☆☆ | ◎ | 開発・日常利用 | +| Chromeフラグ | ★☆☆ | △ | 一時的なテスト | +| 自己署名証明書 | ★★☆ | ○ | チーム共有 | +| ngrok等 | ★★☆ | ◎ | 外部共有・デモ | + +## 関連 + +- [DGX SparkでVibeVoice ASRを動かす](/tech/dgx-spark-vibevoice-asr/) — リアルタイム音声認識 diff --git a/docs-tech/dgx-spark-vibevoice-asr/index.md b/docs-tech/dgx-spark-vibevoice-asr/index.md index 9272df7..72d0866 100644 --- a/docs-tech/dgx-spark-vibevoice-asr/index.md +++ b/docs-tech/dgx-spark-vibevoice-asr/index.md @@ -230,7 +230,9 @@ docker run --gpus all \ ### マイクが認識されない -ブラウザでマイクへのアクセス許可を確認してください。HTTPS または `localhost` からのアクセスが必要です。 +ブラウザでマイクへのアクセス許可を確認してください。`http://IPアドレス` ではマイクが使えません。 + +→ **[ローカルサーバーでマイク・カメラを使う方法](/tech/browser-secure-context/)** を参照 ## 性能の目安