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
VAGeo: View-specific Attention for Cross-View Object Geo-Localization
satai
3
390
生成的推薦の人気バイアスの分析:暗記の観点から / JSAI2025
upura
0
180
Type Theory as a Formal Basis of Natural Language Semantics
daikimatsuoka
1
220
RapidPen: AIエージェントによるペネトレーションテスト 初期侵入全自動化の研究
laysakura
0
1.5k
引力・斥力を制御可能なランダム部分集合の確率分布
wasyro
0
150
クラウドのテレメトリーシステム研究動向2025年
yuukit
3
950
RHO-1: Not All Tokens Are What You Need
sansan_randd
1
110
A multimodal data fusion model for accurate and interpretable urban land use mapping with uncertainty analysis
satai
3
220
プロシェアリング白書2025_PROSHARING_REPORT_2025
circulation
1
840
NLP2025SharedTask翻訳部門
moriokataku
0
300
SSII2025 [TS3] 医工連携における画像情報学研究
ssii
PRO
2
1.2k
NLP Colloquium
junokim
1
150
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Six Lessons from altMBA
skipperchong
28
3.9k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Code Reviewing Like a Champion
maltzj
524
40k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Navigating Team Friction
lara
187
15k
How STYLIGHT went responsive
nonsquared
100
5.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Being A Developer After 40
akosma
90
590k
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 おわり