---
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/) — リアルタイム音声認識