Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
PeerConnection リレーと
MediaRecorder
WebRTC Meetup Tokyo #10
2016.05.17
インフォコム株式会社
がねこまさし
@massie_g
WebRTC Meetup Tokyo #2 にて
• 「音声が多段中継できない」
PeerConnection
MediaStream
PeerConnectionMediaStream
配信元
PeerConnection
PeerConn...
Issue 2192
Investigate/ Implement adding remote audio track/stream to a PeerConnection.
• Aug 7, 2013
– Split from
https:/...
遂に対応! Chrome 49でリリース
ISSUE 2192
Chrome M49 WebRTC Release Notes
で、やってみた(同一タブだけど)
PeerConnection
MediaStream
PeerConnectionMediaStream
PeerConnection
PeerConnectionMediaStream
音も出た!!
映像は出...
デモ
https://mganeko.github.io/webrtcexpjp/self/relay.html
短縮URL https://goo.gl/dPOIRU
で、何ができるか?
• ディレイ!
音声ディレイのデモ(録画)
映像ディレイのデモ
https://mganeko.github.io/webrtcexpjp/self/relay_delay.html
短縮URL https://goo.gl/jo3Hhl
もう少し真面目に、何が嬉しいの?
• 社内イベント配信にWebRTC利用中
• 社内ネットワークが細い箇所がある
拠点1
拠点2
拠点4 拠点3
拠点6
拠点5
こんな形で社内配信できるかも(未実施)
拠点1
拠点2
拠点4
拠点3
拠点6
拠点5
MediaRecorder
Chrome 49からMediaRecorderも改善
PeerConnection
PeerConnectionMediaStream
MediaStream
MediaRecorder
MediaRecorder
WebM
WebM
ローカ...
MediaRecorder で気になること
MediaStream
MediaRecorder
WebM
ビットレート
1~2Mbps
VLC で確認
10秒で1.3MB、1分で7MB程度
BandWidthを制限したら?
PeerConnection
PeerConnectionMediaStream
MediaStream
MediaRecorder
MediaRecorder
WebM
WebM
ローカルOK
ビットレート
...
結果 chrome://webrtc-internals/
通信は256kbps
結果 VLC
ビットレート
1~2Mbps
BandWidthを制限しても
PeerConnection
PeerConnectionMediaStream
MediaStream
MediaRecorder
MediaRecorder
WebM
WebM
ローカルOK
ビットレート
1...
MediaRecorder と VP9
• https://mganeko.github.io/webrtcexpjp/self/record_relay_vp9.html
• 短縮URL https://goo.gl/agr3Yk
PeerC...
録画のエンコーダー
• 通信用のエンコーダーと、録画用のエンコーダーは独立している
PeerConnectionPeerConnectionMediaStream
MediaRecorder
MediaStream
Encoder
WebM
E...
もともと複数のエンコーダーあり
• 複数の相手と通信する場合、別々のエンコーダーを利用
PeerConnectionPeerConnectionMediaStream Encoder
MediaRecorder
Encoder
WebM
Pee...
VP9で録画する正しい方法
// Chrome 50 で確認
var options = {mimeType: 'video/webm; codecs=vp9'};
var recorder = new MediaRecorder(localS...
MediaRecorderでビットレート調整(将来)
// 仕様にはあるけど、今は効かない
var options = {
audioBitsPerSecond : 32000,
videoBitsPerSecond : 256000,
mim...
Thank you!
Upcoming SlideShare
Loading in …5
×

PeerConnectionリレーとMediaRecorder

2,554 views

Published on

WebRTC Meetup Tokyo 10 の資料です。

Published in: Technology
  • Be the first to comment

PeerConnectionリレーとMediaRecorder

  1. 1. PeerConnection リレーと MediaRecorder WebRTC Meetup Tokyo #10 2016.05.17 インフォコム株式会社 がねこまさし @massie_g
  2. 2. WebRTC Meetup Tokyo #2 にて • 「音声が多段中継できない」 PeerConnection MediaStream PeerConnectionMediaStream 配信元 PeerConnection PeerConnectionMediaStream 中間層 視聴者 音が出ない!! 映像は出る
  3. 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. 4. 遂に対応! Chrome 49でリリース ISSUE 2192 Chrome M49 WebRTC Release Notes
  5. 5. で、やってみた(同一タブだけど) PeerConnection MediaStream PeerConnectionMediaStream PeerConnection PeerConnectionMediaStream 音も出た!! 映像は出る PeerConnection PeerConnectionMediaStream
  6. 6. デモ https://mganeko.github.io/webrtcexpjp/self/relay.html 短縮URL https://goo.gl/dPOIRU
  7. 7. で、何ができるか? • ディレイ!
  8. 8. 音声ディレイのデモ(録画)
  9. 9. 映像ディレイのデモ https://mganeko.github.io/webrtcexpjp/self/relay_delay.html 短縮URL https://goo.gl/jo3Hhl
  10. 10. もう少し真面目に、何が嬉しいの? • 社内イベント配信にWebRTC利用中 • 社内ネットワークが細い箇所がある 拠点1 拠点2 拠点4 拠点3 拠点6 拠点5
  11. 11. こんな形で社内配信できるかも(未実施) 拠点1 拠点2 拠点4 拠点3 拠点6 拠点5
  12. 12. MediaRecorder
  13. 13. Chrome 49からMediaRecorderも改善 PeerConnection PeerConnectionMediaStream MediaStream MediaRecorder MediaRecorder WebM WebM ローカルOK Chrome 49から リモートのストリームも 録画可能に
  14. 14. MediaRecorder で気になること MediaStream MediaRecorder WebM ビットレート 1~2Mbps VLC で確認 10秒で1.3MB、1分で7MB程度
  15. 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. 16. 結果 chrome://webrtc-internals/ 通信は256kbps
  17. 17. 結果 VLC ビットレート 1~2Mbps
  18. 18. BandWidthを制限しても PeerConnection PeerConnectionMediaStream MediaStream MediaRecorder MediaRecorder WebM WebM ローカルOK ビットレート 1~2Mbps 通信制限 SDPのb=ASで 256kbps ビットレート 1~2Mbps で、変わらず
  19. 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. 20. 録画のエンコーダー • 通信用のエンコーダーと、録画用のエンコーダーは独立している PeerConnectionPeerConnectionMediaStream MediaRecorder MediaStream Encoder WebM Encoder MediaRecorder Encoder WebM
  21. 21. もともと複数のエンコーダーあり • 複数の相手と通信する場合、別々のエンコーダーを利用 PeerConnectionPeerConnectionMediaStream Encoder MediaRecorder Encoder WebM PeerConnection PeerConnectionEncoder PeerConnection PeerConnectionEncoder
  22. 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. 23. MediaRecorderでビットレート調整(将来) // 仕様にはあるけど、今は効かない var options = { audioBitsPerSecond : 32000, videoBitsPerSecond : 256000, mimeType : 'video/webm' }; var mediaRecorder = new MediaRecorder(stream, options);
  24. 24. Thank you!

×