音声ハウリング対策：ウェブ会議・WebRTCで忘れがちなポイント

向かいの席の人がビデオ通話アプリを作ってて、めちゃくちゃハウリングしてた。原因は単純で、ローカルプレビューの muted 忘れ。自分も忘れがちなのでメモ。

ハウリングの仕組み

マイク → 送信 → 相手のスピーカー
                    ↓
相手のマイク ← 拾う ←┘
                    ↓
自分のスピーカー ← 受信
        ↓
自分のマイク ← 拾う ←┘
        ↓
     無限ループ

スピーカーから出た音がマイクに入り、それがまた相手に送られ…のループ。通信技術（WebSocket、WebRTC、Agora等）に関係なく発生する。

対策1：ローカル再生をミュート（最重要）

自分のカメラ映像をプレビュー表示するとき、音声は絶対にミュートする。

// ローカルプレビュー用
const localVideo = document.getElementById('local-video');
localVideo.srcObject = localStream;
localVideo.muted = true;  // これがないとハウリング

リモート側の映像・音声はミュートしない。

// リモート（相手）の映像・音声
const remoteVideo = document.getElementById('remote-video');
remoteVideo.srcObject = remoteStream;
// muted は設定しない（相手の声が聞こえなくなる）

対策2：エコーキャンセレーション有効化

getUserMedia でマイクを取得するとき、エコーキャンセレーションを有効にする。

const stream = await navigator.mediaDevices.getUserMedia({
  audio: {
    echoCancellation: true,   // エコーキャンセル
    noiseSuppression: true,   // ノイズ抑制
    autoGainControl: true     // 自動ゲイン調整
  },
  video: true
});

これでブラウザが「スピーカーから出た音」と「マイクに入った音」を比較して、エコー成分を除去してくれる。

対策3：ハードウェア対策

ソフトウェア対策が効かない場合のフォールバック。

• ヘッドホン使用 - 物理的にループを断ち切る
• スピーカーとマイクの距離を離す - エコーキャンセルの負荷を下げる
• 指向性マイク使用 - スピーカー方向の音を拾いにくくする

ウェブ会議でハウリングする人は、大体スピーカー使ってる＋エコーキャンセルが効いてない。ヘッドホンに切り替えると一発で解決する。

通信技術に依存しない

ハウリング対策は通信レイヤーと無関係。

通信技術	ハウリング対策
WebRTC	同じ
WebSocket + MediaRecorder	同じ
Agora / Twilio	同じ
LiveKit	同じ

「データをどう運ぶか」と「音声入出力をどう扱うか」はレイヤーが違う。どの技術を使っても、ブラウザ側でローカル音声をスピーカーに流せばハウリングする。

チェックリスト

実装時に確認する項目。

• ローカルの <video> / <audio> に muted 属性がある
• getUserMedia で echoCancellation: true を指定している
• リモートストリームはミュートしていない
• テスト時はヘッドホンを外してスピーカーで確認

特に最後が重要。開発中ヘッドホンしてると気づかない。