WebRTCによるビデオチャットでもステレオ配信したい！

Transcript

1. © DMM.com WebRTCによるビデオチャットでも ステレオ配信したい！ 合同会社DMM.com LC事業部 伊藤 惇

2. © DMM.com 自己紹介 2 • 2019年4月 中途入社 • LC事業部スクラムマスター &

   FE • 技術領域 • React + Redux, TypeScript, WebRTC • 趣味 • お絵描き, バイク, 自作キーボード 伊藤 惇 ITO ATSUSHI Corne Cherry KAWASAKI Z400

3. © DMM.com ライブ配信システム 一対多で映像を視聴するサービス 相互チャット機能 1対1でのビデオチャット機能も搭載 • 双方向のやりとりのため、遅延が品質に大きく影響する 3

4. © DMM.com ライブ配信の実現方法候補 WebRTC • 1秒未満の低遅延 • UDPで映像をクライアント側に直接送信 • 大規模配信は苦手

   • プラグイン不要・ブラウザのみで配信可能 • 数秒〜数十秒程度の遅延アリ • 配信映像をサーバ側で数秒の動画ファイル に分割しクライアント側が受信 • CDNによる高速安定・大規模配信も可能 HLS Http Live Streaming Web Real-Time Communication 低遅延を重視し、WebRTCを採用 4

5. © DMM.com ライブ配信をとりまく工夫 CMAF • 動画ファイルの分割単位を細かくして低遅延を実現 WebRTC配信→変換→HLS視聴 Common Media Application

   Format • WebRTCによるブラウザ単体配信の手軽さ・HLSによる大 規模配信のメリットを両立 • 採用しているサービス • ImageFlux Live Streaming (pixiv Sketch Liveで利用) • YouTube Live 5

6. © DMM.com WebRTCでステレオ配信したい！ 6 バイノーラル・立体音響・ASMR 聞いていて（見ていて）心地よい 
 ASMR動画を楽しんでいる男性のイラストです。 


7. © DMM.com WebRTCでステレオ配信したい！ …が、ダメッ！！ 7 Firefox間では可能 Chrome, Safariはモノラル音声になってしまう WebRTCでやりとりするとき、事前にAudio, Videoがお互いどんなフォー

   マットでやりとりできるかSDPという情報で確認しあう。 そこではステレオはOKになっているのに。。。 a=rtpmap:109 opus\/48000\/2 a=fmtp:109 maxplaybackrate=48000;stereo=1;sprop-stereo=1;minptime=10;ptime=20;

8. © DMM.com WebRTCでステレオ配信したい！ …が、ダメッ！！ 8 Safariはステレオ未対応・Chromeはモノラル固定 https://bugs.chromium.org/p/webrtc/issues/detail?id=8133 2017年のIssueが 2020年もOpenのまま stream取得時にエコーキャンセルすること

   でステレオ(2チャンネル)の AudioTrackは取得可能

9. © DMM.com 回避案１：WebRTC-HLS 9 YouTubeがステレオ対応しているなら 同じ方式で回避できるはず。 大規模改修コストが必要。 ステレオ配信はそのコストに見合うサービスではない。

10. © DMM.com 回避案２：2つの音声チャンネルを別の方法で送信 10 本来の挙動 MediaStream VideoTrack AudioTrack 左チャンネル音声 右チャンネル音声

    MediaStream VideoTrack AudioTrack 1チャンネル 配信側の生成ストリーム Chromeで受信したストリーム 送信 勝手に1チャンネルに統合されている const stream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});

11. © DMM.com 回避案２：2つの音声チャンネルを別の方法で送信 11 2つの音声チャンネルをWeb Audio APIで分解して 2つのAudioTrackとして送信すればどうか？ MediaStream VideoTrack

    AudioTrack 左チャンネル音声 右チャンネル音声 配信側の元のストリーム Channel Splitter Channel Splitter MediaStream VideoTrack AudioTrack 1チャンネル 配信側の送信用ストリーム AudioTrack 1チャンネル 受信側は2つのAudioTrackをStereoPannerNodeにより 左右に音量をふりわけてステレオを擬似的に復元

12. © DMM.com 回避策２の実験 12 SkyWay • NTT Communicationsが提供する WebRTC開発プラットフォーム WebRTC

    SFU Sora • 株式会社時雨堂が提供する WebRTC開発プラットフォーム https://shiguredo.jp/ https://webrtc.ecl.ntt.com/ いずれも個人かつ検証目的なら無償で利用可能な 検証用サーバをご提供いただいております。

13. © DMM.com 回避策２実験結果①：SkyWay経由の場合 13 1ストリームに複数トラックを入れて送受信できた

14. © DMM.com 回避策２実験結果②：Sora経由の場合 14 1ストリームに入った複数トラックは 受信側では1トラックになっていた Soraサーバ側で取り除いているのかも？

15. © DMM.com まとめ 15 ステレオ音声の2チャンネルの渡し方を工夫すれば、 WebRTCでもステレオ配信が実現できる？ 聞いていて（見ていて）心地よい 
 ASMR動画をWebRTCで楽しんでいる女性のイラストです。 


16. © DMM.com 16 おわり