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.4k
WebRTCによるビデオチャットでもステレオ配信したい!
WebRTCによるステレオ配信を実現する方法の検証
Atsushi
October 01, 2020
Tweet
Share
Other Decks in Research
See All in Research
インタビューだけじゃない!ユーザーに共感しユーザーの目👀を手に入れるためのインプット
moco1013
0
200
データで診て考える合志市の渋滞と公共交通 ~めざせ 車1割削減、渋滞半減、公共交通2倍~
trafficbrain
0
460
LLMマルチエージェントを俯瞰する
masatoto
26
16k
訓練データ作成のためのCloudCompareを利用した点群の手動ラベリング
kentaitakura
0
530
フルリモートワークでのスクラムのスケール
kmorita1111
2
1k
Breaking Tradeoffs: Extremely Scalable Multi-Agent Pathfinding Algorithms
kei18
0
140
Evolutionary Optimization ofModel Merging Recipes (2024/04/17, NLPコロキウム)
iwiwi
9
2.9k
[2023 CCSE] ZOZOTOWN検索における 研究開発の取り組みについて
tomoyayama
0
130
20240209 データを肴に熊本の交通を考える会「車1割削減、渋滞半減、公共交通2倍」をめざし世界に学ぼう
trafficbrain
0
810
Generative AI - practice and theory
gpeyre
1
560
Embodied AIについて / About Embodied AI
nttcom
1
540
The Theory behind Vector DB
matsui_528
0
1.6k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
How STYLIGHT went responsive
nonsquared
92
4.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Atom: Resistance is Futile
akmur
259
25k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Product Roadmaps are Hard
iamctodd
44
9.7k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Infographics Made Easy
chrislema
238
18k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
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 おわり