PeerConnectionリレーとMediaRecorder

1,173 views

Published on

WebRTC Meetup Tokyo 10 の資料です。

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,173
On SlideShare
0
From Embeds
0
Number of Embeds
750
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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!

×