WebRTCによるビデオチャットでもステレオ配信したい!
by
Atsushi
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
© DMM.com WebRTCによるビデオチャットでも ステレオ配信したい! 合同会社DMM.com LC事業部 伊藤 惇
Slide 2
Slide 2 text
© DMM.com 自己紹介 2 • 2019年4月 中途入社 • LC事業部スクラムマスター & FE • 技術領域 • React + Redux, TypeScript, WebRTC • 趣味 • お絵描き, バイク, 自作キーボード 伊藤 惇 ITO ATSUSHI Corne Cherry KAWASAKI Z400
Slide 3
Slide 3 text
© DMM.com ライブ配信システム 一対多で映像を視聴するサービス 相互チャット機能 1対1でのビデオチャット機能も搭載 • 双方向のやりとりのため、遅延が品質に大きく影響する 3
Slide 4
Slide 4 text
© DMM.com ライブ配信の実現方法候補 WebRTC • 1秒未満の低遅延 • UDPで映像をクライアント側に直接送信 • 大規模配信は苦手 • プラグイン不要・ブラウザのみで配信可能 • 数秒〜数十秒程度の遅延アリ • 配信映像をサーバ側で数秒の動画ファイル に分割しクライアント側が受信 • CDNによる高速安定・大規模配信も可能 HLS Http Live Streaming Web Real-Time Communication 低遅延を重視し、WebRTCを採用 4
Slide 5
Slide 5 text
© DMM.com ライブ配信をとりまく工夫 CMAF • 動画ファイルの分割単位を細かくして低遅延を実現 WebRTC配信→変換→HLS視聴 Common Media Application Format • WebRTCによるブラウザ単体配信の手軽さ・HLSによる大 規模配信のメリットを両立 • 採用しているサービス • ImageFlux Live Streaming (pixiv Sketch Liveで利用) • YouTube Live 5
Slide 6
Slide 6 text
© DMM.com WebRTCでステレオ配信したい! 6 バイノーラル・立体音響・ASMR 聞いていて(見ていて)心地よい ASMR動画を楽しんでいる男性のイラストです。
Slide 7
Slide 7 text
© 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;
Slide 8
Slide 8 text
© DMM.com WebRTCでステレオ配信したい! …が、ダメッ!! 8 Safariはステレオ未対応・Chromeはモノラル固定 https://bugs.chromium.org/p/webrtc/issues/detail?id=8133 2017年のIssueが 2020年もOpenのまま stream取得時にエコーキャンセルすること でステレオ(2チャンネル)の AudioTrackは取得可能
Slide 9
Slide 9 text
© DMM.com 回避案1:WebRTC-HLS 9 YouTubeがステレオ対応しているなら 同じ方式で回避できるはず。 大規模改修コストが必要。 ステレオ配信はそのコストに見合うサービスではない。
Slide 10
Slide 10 text
© DMM.com 回避案2:2つの音声チャンネルを別の方法で送信 10 本来の挙動 MediaStream VideoTrack AudioTrack 左チャンネル音声 右チャンネル音声 MediaStream VideoTrack AudioTrack 1チャンネル 配信側の生成ストリーム Chromeで受信したストリーム 送信 勝手に1チャンネルに統合されている const stream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
Slide 11
Slide 11 text
© DMM.com 回避案2:2つの音声チャンネルを別の方法で送信 11 2つの音声チャンネルをWeb Audio APIで分解して 2つのAudioTrackとして送信すればどうか? MediaStream VideoTrack AudioTrack 左チャンネル音声 右チャンネル音声 配信側の元のストリーム Channel Splitter Channel Splitter MediaStream VideoTrack AudioTrack 1チャンネル 配信側の送信用ストリーム AudioTrack 1チャンネル 受信側は2つのAudioTrackをStereoPannerNodeにより 左右に音量をふりわけてステレオを擬似的に復元
Slide 12
Slide 12 text
© DMM.com 回避策2の実験 12 SkyWay • NTT Communicationsが提供する WebRTC開発プラットフォーム WebRTC SFU Sora • 株式会社時雨堂が提供する WebRTC開発プラットフォーム https://shiguredo.jp/ https://webrtc.ecl.ntt.com/ いずれも個人かつ検証目的なら無償で利用可能な 検証用サーバをご提供いただいております。
Slide 13
Slide 13 text
© DMM.com 回避策2実験結果①:SkyWay経由の場合 13 1ストリームに複数トラックを入れて送受信できた
Slide 14
Slide 14 text
© DMM.com 回避策2実験結果②:Sora経由の場合 14 1ストリームに入った複数トラックは 受信側では1トラックになっていた Soraサーバ側で取り除いているのかも?
Slide 15
Slide 15 text
© DMM.com まとめ 15 ステレオ音声の2チャンネルの渡し方を工夫すれば、 WebRTCでもステレオ配信が実現できる? 聞いていて(見ていて)心地よい ASMR動画をWebRTCで楽しんでいる女性のイラストです。
Slide 16
Slide 16 text
© DMM.com 16 おわり