WebRTCでループバックの通信をしたときにChromeで音声が再生されない不具合のワークアラウンド

はじめに

Google ChromeでWebRTCのループバック通信をしたところ、音声が再生されない不具合があったので、原因調査の流れとワークアラウンドを記録しておこうと思います。

環境

原因調査

とりあえず、MediaStreamとMediaStreamTrackをconsole.log()で出力してみました。ループバックする側もされる側も、AudioのMediaStreamTrackはきちんと送受信できていました。
次にハードウェアの不具合を疑ってみました。
まず、WebRTC Troubleshooterで一通りチェックしてみました。
test.webrtc.org
実行したところ、デバイス関係でエラーはありませんでした。
次に、navigator.mediaDevices.enumerateDevices()でデバイス一覧を取得し、deviceIdを指定してnavigator.mediaDevices.getUserMedia()を呼んでみました。これも、結果は変わりませんでした。
また、WebRTC samplesSelect sources & outputsで音声の取得と再生をチェックしてみましたが、取得・再生ともきちんとできていました。
webrtc.github.io
次に、通信周りを疑ってみました。
ここまではループバックする側では映像、音声の出力を行わずにループバックしていましたが、きちんと送受信できていることを確認するため、videoタグを追加して映像・音声の出力をしてみました。ここで、ループバックする側でHTMLMediaElementに出力すると、音声が正常にループバックされて再生されることに気づきました。
この辺りでChromeのバグを疑ったので、Safariで試してみました。結果は、Chromeのみで再現する不具合だということが分かりました。
最後に、Chromeのバグ報告を検索したところ、一発で同じ症状が出てきました。
bugs.chromium.org
報告があったのは4月2日なので、約1ヶ月半前には発生していた不具合のようです。
示されているワークアラウンドもHTMLMediaElementのsrcObjectにMediaStreamをセットするという内容でした。
以上の結果を踏まえ、Chromeのバグであると判明しました。

ワークアラウンド

MediaStreamをHTMLMediaElementのsrcObjectにセットすれば大丈夫ですが、実際にHTML側にvideoタグを追加する必要はありませんでした。
以下のコードを追加するだけで大丈夫でした。

document.createElement('video').srcObject = mediaStream;

終わりに

幸い、簡単に対応できるワークアラウンドが存在したので大きな問題にはなりませんでした。
このバグもそのうちのアップデートで修正されると思います。