WebRTC Meetup Tokyo 10 の資料です。

1. PeerConnection リレーと
MediaRecorder
WebRTC Meetup Tokyo #10
2016.05.17
インフォコム株式会社
がねこまさし
@massie_g

2. WebRTC Meetup Tokyo #2 にて
• 「音声が多段中継できない」
PeerConnection
MediaStream
PeerConnectionMediaStream
配信元
PeerConnection
PeerConnectionMediaStream
中間層
視聴者
音が出ない！！
映像は出る

3. Issue 2192
Investigate/ 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.
根が深い、やっかいな問題らしい。残念

4. 遂に対応！ Chrome 49でリリース
ISSUE 2192
Chrome M49 WebRTC Release Notes

5. で、やってみた（同一タブだけど）
PeerConnection
MediaStream
PeerConnectionMediaStream
PeerConnection
PeerConnectionMediaStream
音も出た！！
映像は出る
PeerConnection PeerConnectionMediaStream

6. デモ
https://mganeko.github.io/webrtcexpjp/self/relay.html
短縮URL https://goo.gl/dPOIRU

7. で、何ができるか？
• ディレイ!

8. 音声ディレイのデモ（録画）

9. 映像ディレイのデモ
https://mganeko.github.io/webrtcexpjp/self/relay_delay.html
短縮URL https://goo.gl/jo3Hhl

10. もう少し真面目に、何が嬉しいの？
• 社内イベント配信にWebRTC利用中
• 社内ネットワークが細い箇所がある
拠点1
拠点2
拠点4 拠点3
拠点6
拠点5

11. こんな形で社内配信できるかも（未実施）
拠点1
拠点2
拠点4
拠点3
拠点6
拠点5

12. MediaRecorder

13. Chrome 49からMediaRecorderも改善
PeerConnection
PeerConnectionMediaStream
MediaStream
MediaRecorder
MediaRecorder
WebM
WebM
ローカルOK
Chrome 49から
リモートのストリームも
録画可能に

14. MediaRecorder で気になること
MediaStream
MediaRecorder
WebM
ビットレート
1～2Mbps
VLC で確認
10秒で1.3MB、1分で7MB程度

15. BandWidthを制限したら？
PeerConnection
PeerConnectionMediaStream
MediaStream
MediaRecorder
MediaRecorder
WebM
WebM
ローカルOK
ビットレート
1～2Mbps
通信制限
SDPのb=ASで 256kbps
ビットレート
256kbps?
• https://mganeko.github.io/webrtcexpjp/self/record_bandwidth.html
• 短縮URL https://goo.gl/6J6yFE

16. 結果 chrome://webrtc-internals/
通信は256kbps

17. 結果 VLC
ビットレート
1～2Mbps

18. BandWidthを制限しても
PeerConnection
PeerConnectionMediaStream
MediaStream
MediaRecorder
MediaRecorder
WebM
WebM
ローカルOK
ビットレート
1～2Mbps
通信制限
SDPのb=ASで 256kbps
ビットレート
1～2Mbps
で、変わらず

19. MediaRecorder と VP9
• https://mganeko.github.io/webrtcexpjp/self/record_relay_vp9.html
• 短縮URL https://goo.gl/agr3Yk
PeerConnection
PeerConnectionMediaStream
MediaStream
MediaRecorder
MediaRecorder
WebM
WebM
SDPで
Codec VP9指定
（普通にやると）
VP8
やっぱり VP8

20. 録画のエンコーダー
• 通信用のエンコーダーと、録画用のエンコーダーは独立している
PeerConnectionPeerConnectionMediaStream
MediaRecorder
MediaStream
Encoder
WebM
Encoder
MediaRecorder
Encoder
WebM

21. もともと複数のエンコーダーあり
• 複数の相手と通信する場合、別々のエンコーダーを利用
PeerConnectionPeerConnectionMediaStream Encoder
MediaRecorder
Encoder
WebM
PeerConnection PeerConnectionEncoder
PeerConnection PeerConnectionEncoder

22. VP9で録画する正しい方法
// Chrome 50 で確認
var options = {mimeType: 'video/webm; codecs=vp9'};
var recorder = new MediaRecorder(localStream, options);
https://mganeko.github.io/webrtcexpjp/self/record_vp9.html
短縮URL https://goo.gl/3hpkhA

23. MediaRecorderでビットレート調整（将来）
// 仕様にはあるけど、今は効かない
var options = {
audioBitsPerSecond : 32000,
videoBitsPerSecond : 256000,
mimeType : 'video/webm'
};
var mediaRecorder = new MediaRecorder(stream, options);

24. Thank you!