Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebRTCによるビデオチャットでもステレオ配信したい!
Search
Atsushi
October 01, 2020
Research
1
1.6k
WebRTCによるビデオチャットでもステレオ配信したい!
WebRTCによるステレオ配信を実現する方法の検証
Atsushi
October 01, 2020
Tweet
Share
Other Decks in Research
See All in Research
大学見本市2025 JSTさきがけ事業セミナー「顔の見えないセンシング技術:多様なセンサにもとづく個人情報に配慮した人物状態推定」
miso2024
0
150
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
0
160
まずはここから:Overleaf共同執筆・CopilotでAIコーディング入門・Codespacesで独立環境
matsui_528
2
500
Google Agent Development Kit (ADK) 入門 🚀
mickey_kubo
2
1.8k
機械学習と数理最適化の融合 (MOAI) による革新
mickey_kubo
1
320
Language Models Are Implicitly Continuous
eumesy
PRO
0
240
EcoWikiRS: Learning Ecological Representation of Satellite Images from Weak Supervision with Species Observation and Wikipedia
satai
3
140
国際論文を出そう!ICRA / IROS / RA-L への論文投稿の心構えとノウハウ / RSJ2025 Luncheon Seminar
koide3
6
4.8k
EarthSynth: Generating Informative Earth Observation with Diffusion Models
satai
3
270
心理言語学の視点から再考する言語モデルの学習過程
chemical_tree
2
590
Agentic AIとMCPを利用したサービス作成入門
mickey_kubo
0
550
Adaptive Experimental Design for Efficient Average Treatment Effect Estimation and Treatment Choice
masakat0
0
110
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
How to Ace a Technical Interview
jacobian
279
23k
The World Runs on Bad Software
bkeepers
PRO
70
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Balancing Empowerment & Direction
lara
3
630
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Thoughts on Productivity
jonyablonski
70
4.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
The Invisible Side of Design
smashingmag
301
51k
Transcript
© DMM.com WebRTCによるビデオチャットでも ステレオ配信したい! 合同会社DMM.com LC事業部 伊藤 惇
© DMM.com 自己紹介 2 • 2019年4月 中途入社 • LC事業部スクラムマスター &
FE • 技術領域 • React + Redux, TypeScript, WebRTC • 趣味 • お絵描き, バイク, 自作キーボード 伊藤 惇 ITO ATSUSHI Corne Cherry KAWASAKI Z400
© DMM.com ライブ配信システム 一対多で映像を視聴するサービス 相互チャット機能 1対1でのビデオチャット機能も搭載 • 双方向のやりとりのため、遅延が品質に大きく影響する 3
© DMM.com ライブ配信の実現方法候補 WebRTC • 1秒未満の低遅延 • UDPで映像をクライアント側に直接送信 • 大規模配信は苦手
• プラグイン不要・ブラウザのみで配信可能 • 数秒〜数十秒程度の遅延アリ • 配信映像をサーバ側で数秒の動画ファイル に分割しクライアント側が受信 • CDNによる高速安定・大規模配信も可能 HLS Http Live Streaming Web Real-Time Communication 低遅延を重視し、WebRTCを採用 4
© DMM.com ライブ配信をとりまく工夫 CMAF • 動画ファイルの分割単位を細かくして低遅延を実現 WebRTC配信→変換→HLS視聴 Common Media Application
Format • WebRTCによるブラウザ単体配信の手軽さ・HLSによる大 規模配信のメリットを両立 • 採用しているサービス • ImageFlux Live Streaming (pixiv Sketch Liveで利用) • YouTube Live 5
© DMM.com WebRTCでステレオ配信したい! 6 バイノーラル・立体音響・ASMR 聞いていて(見ていて)心地よい ASMR動画を楽しんでいる男性のイラストです。
© 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;
© DMM.com WebRTCでステレオ配信したい! …が、ダメッ!! 8 Safariはステレオ未対応・Chromeはモノラル固定 https://bugs.chromium.org/p/webrtc/issues/detail?id=8133 2017年のIssueが 2020年もOpenのまま stream取得時にエコーキャンセルすること
でステレオ(2チャンネル)の AudioTrackは取得可能
© DMM.com 回避案1:WebRTC-HLS 9 YouTubeがステレオ対応しているなら 同じ方式で回避できるはず。 大規模改修コストが必要。 ステレオ配信はそのコストに見合うサービスではない。
© DMM.com 回避案2:2つの音声チャンネルを別の方法で送信 10 本来の挙動 MediaStream VideoTrack AudioTrack 左チャンネル音声 右チャンネル音声
MediaStream VideoTrack AudioTrack 1チャンネル 配信側の生成ストリーム Chromeで受信したストリーム 送信 勝手に1チャンネルに統合されている const stream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
© 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により 左右に音量をふりわけてステレオを擬似的に復元
© DMM.com 回避策2の実験 12 SkyWay • NTT Communicationsが提供する WebRTC開発プラットフォーム WebRTC
SFU Sora • 株式会社時雨堂が提供する WebRTC開発プラットフォーム https://shiguredo.jp/ https://webrtc.ecl.ntt.com/ いずれも個人かつ検証目的なら無償で利用可能な 検証用サーバをご提供いただいております。
© DMM.com 回避策2実験結果①:SkyWay経由の場合 13 1ストリームに複数トラックを入れて送受信できた
© DMM.com 回避策2実験結果②:Sora経由の場合 14 1ストリームに入った複数トラックは 受信側では1トラックになっていた Soraサーバ側で取り除いているのかも?
© DMM.com まとめ 15 ステレオ音声の2チャンネルの渡し方を工夫すれば、 WebRTCでもステレオ配信が実現できる? 聞いていて(見ていて)心地よい ASMR動画をWebRTCで楽しんでいる女性のイラストです。
© DMM.com 16 おわり