Embed Size (px)
DESCRIPTION
WebRTC Meetup Tokyo 4 で発表する資料です。 WebRTC＋αで無理やりやってみた×3 http://peatix.com/event/51641
Citation preview
WebRTC + α で無理やりやってみた ×3WebRTC Meetup Tokyo #4 LT
2014.10.03
インフォコム株式会社がねこまさし
最初に• 今回は（も）、邪道な内容です• 本来、ブラウザだけで色々できる WebRTC ですが、
それ以外の小道具を使って実現しました• 今日は（も）、ソースコードは一切ありません
• ※ スケールしない方法なので、お勧めしません
(1) 無理やり Firewall を越えてみた
まだ TURN サーバーの動かし方が分からなかった頃
• 社外で行われたイベントを、社内ネットワークで中継したい！– 岩沼 みんなの家（宮城県）で、社内ハッカソン
を実施– 作品発表会を、オフィスの人たちに見せたい
https://www.facebook.com/minnanoie.iwanuma.infocom
まだ Firewall を超えられない…
でも、無理やり超えてやる！
「光学的」 Firewall 越え
※ 音声はアナログで Firewall 越え ヘッドフォン端子→マイク端子
結果• 反射して見にくい• 音が割れて聞きにくい
… さんざんなコメントでも、「楽しそうな雰囲気は伝わった」とのこと
• その後、 TURN サーバーの使い方が分りました– 「壁を越えろ！ WebRTC で NAT/Firewall を越えて通信しよう」– http://html5experts.jp/mganeko/5554/– ※ 「 WebRTC firewall 」 で検索！
(2) 中継を「無理やり中継」してみた
WebRTC Meetup Tokyo #2 にて• 「音声が多段中継できない」
PeerConnection
MediaStream
PeerConnectionMediaStream
配信元
PeerConnection
PeerConnectionMediaStream
中間層
視聴者
音が出ない！！
映像は出る
discuss-webrtc Group に（最近）質問• リモートの音声をリレーできないんだけど、どう
して？– WebRTC audio is not passed, while relaying remote stream
to another.• I am trying to relay mediastream of WebRTC, using three
Chrome 37 browsers.• In Browser3, playing video is OK, but there is no audio.• Is it limitaion of specification of WebRTC, or something wrong
with me?
• → 現状できないよ。 Issue 2192 を見ろ– Relaying audioTracks is not supported currently, see issue
2192.– https://code.google.com/p/webrtc/issues/detail?id=2192
Issue 2192Investigate/ Implement adding remote audio track/stream to a PeerConnection.
• Aug 7, 2013 – Split from https://
code.google.com/p/webrtc/issues/detail?id=383 (Mar 21, 2012) for tracking the work on the audio side.
• May 28, 2014– They are replumbing all the audio stack so it takes some time.
Here is a rough roadmap given earlier this year (march):• Move the WebRTC APM to Chrome• Implement a media stream render mixer in Chrome.• Change the render callback from a pull model to a push model, and
connect the render data to the mixer• Allow WebRtc to pass un-mix data to Chrome through Libjingle, and
add support for relaying the stream.
根が深い、やっかいな問題らしい。残念
待て、俺には「無理やり」がある！
WebRTC 多段中継：試し
PeerConnection
MediaStreamPeerConnection
PeerConnection
MediaStream
中間層
視聴者
「別の」音が出る
映像は出る
VideoTracks
MediaStream
MediaStream
AudioTracks
生成
「別の」音を入力
「映像」だけ取り出し
「音が出た！」
WebRTC 多段中継：無理やり
PeerConnection
MediaStreamPeerConnection
PeerConnection
MediaStream
中間層
視聴者
「元の」音が出た！
映像は出る
VideoTracks
MediaStream
MediaStream
AudioTracks
生成
再生して、また拾う
自分のヘッドフォン端子 → マイク端子
※ ハウリングの危険！
絶対にマイクの音をモニター再生しないで！
ヘッドフォンマイク
結果• 狙い通り視聴者に元の音を届けるこがで
きた• が、非常に音質が悪い
• … 使えない
おまけ：ステレオミキサーの場合• Windows には「ステレオミキサー」なる仮想的な音声
入力デバイスがある• PC で鳴らす音を全部取得することが可能
おまけ：ステレオミキサーの場合• Windows には「ステレオミキサー」なる仮想的な音声
入力デバイスがある• PC で鳴らす音を全部取得することが可能
• 一旦再生した音声を再度デジタル化する
• その分のディレイが発生• 動画と合わせるとかなり
の違和感
やっぱり、使えない…
おまけ：ステレオミキサーの場合• Windows には「ステレオミキサー」なる仮想的な音声
入力デバイスがある• PC で鳴らす音を全部取得することが可能
• 一旦再生した音声を再度デジタル化する
• その分のディレイが発生• 動画と合わせるとかなり
の違和感
やっぱり、使えない…
※ 高性能の USB オーディオインターフェイスを使えば、行けるかも…
(3) 多人数の映像を無理やり合成してみた
きっかけ「 10 人で Web 会議したい」• 人事部 「 WebRTC とやらで出来るんで
しょ？」• 俺 「…それ、無理です（ P2P だし）」• 人事部 「なんだあ（しょぼい…）」• 俺 「（くそう…涙）」
実際試してみた → 社内開発機では意外と行けたが、インターネット環境が絡むと、 6 人以上はストリームが流れないケースが多発
待て、俺には「無理やり」がある！
※ アイデアは @satoru_tk さんから
頂きました
各メンバーの映像を、 1台にまとめる
多対 1 、片方向通信
HDMIキャプチャーユニット
別の PC でキャプチャー
「ドライバ必要なし USB 接続の HDMI ビデオキャプチャユニット 」 を利用http://febon.blogspot.com/2013/12/uvc-usbhdmi.html （台湾の個人事業主っぽい）
←FEBON168 HDMI Grabber Card
※ ステマじゃないよ。お金は貰ってません！
ブラウザはカメラとして認識
映像を、 1 対多の片方向配信
HDMIキャプチャーユニット
ここまで、全体像
ところで、音声は？
• この方式で音声も合成した場合– 自分の声が、少し遅れて帰ってくる– … かなり話し辛い
• 本来は、「マイナス ワン」の音声が必要– 自分以外の人たちの音声を合成してほしい– かなり面倒
• →別の方法で実現
音声は、 Peer-to-Peer で
HDMIキャプチャーユニット
全体像
結果• 社内実験環境ではできた（～ 12 人まで実験）
• ※ インターネット越しの実践投入はまだ
HDMIキャプチャーユニット
メディアサーバー /MCU がやってること
ところで、
「餅は餅屋」に任せるのが良さそうDialogic XMS, Intel CS for WebRTC, Kurento （←鋭意調査中）
END
良い子は、けっして真似しないでください
