Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
WebRTC Statistics / getStats を覗いてみる 
WebRTC Meetup Tokyo #5 LT 
2014.11.26 
インフォコム株式会社 
がねこまさし
WebRTC Statistics API ? 
• Identifiers for WebRTC's Statistics API 
– http://w3c.github.io/webrtc-stats/webrtc-stats.html ...
統計情報の取り出し方 
• RTCPeerConnection.getStats()を呼ぶ 
– 戻り値ではなく、コールバックで取得 
– コールバックの引数:RTCStatReportの配列 
RTCPeerConnection.getSta...
統計情報RTCStatReport の内容 
.type ... 情報のタイプ。次の様な種類がある 
– googComponent ... WebRTCコンポーネントの情報 
– googCandidatePair ... リストアップされた...
属性値の取得 
RTCStatReport String: name 
String: name 
String: name 
String: stat 
String: stat 
String: stat 
nameを使って取得 
RTCS...
統計情報RTCStatReport の属性値 
.type === ‘ssrc’ の場合 
• googTrackId ... ビデオ/オーディオトラックの内部的なID 
• bytesReceived ... 受信用ストリームの場合の、受信し...
getStats()と、取り出せる情報(全体) 
RTCPeerConnection.getStats(callback(res)) 
RTCStatReport 
RTCStatReport 
RTCStatReport 
res 
Arra...
ソース例 
peerconnection.getStats(function(res){ 
var rtcStatsReports = res.result(); // array of available status-reports 
va...
getStats() 結果サンプル 
type=googComponent googLocalCertificateId:googCertificate_67:92:0C:C9:C7:AA:BF:B6:8A:... 
googRemoteCer...
Thank you!
オマケ:時間があまったら
他のステータスイベント 
• PeerConnection.onsignalingstatechange 
– SDPのやり取りの通知 
• PeerConnection.oniceconnectionstatechange 
– ICE Ca...
正常に通信が確立するまで 
(通信を始めるOffer側) 
• SDPのやり取り 
– PeerConnection.createOffer() 
• PeerConnection.setLocalDescription(sdp) 
– Pee...
正常に通信が確立するまで 
(通信を始めるOffer側) 
• ICE Candidate のやり取り 
– PeerConnection.oniceconnectionstatechange 発生 
• PeerConnection.iceC...
正常に通信が確立するまで 
(通信を始めるAnswer側) 
• SDPのやり取り 
– PeerConnection. setRemoteDescription(sdp) 
– PeerConnection.onsignalingstatec...
行儀よく切断するまでの流れ 
• PeerConnection.oniceconnectionstatechange 発生 
– PeerConnection.iceConnectionState === 'closed' 
– PeerCon...
強制的にネットワークを切断した場合 
• 切断した側(ネットワークが死んだ側) 
– イベントが発生 
– PeerConnection.oniceconnectionstatechange 発生 
• PeerConnection.iceCo...
Firewallなどの影響で通信が確立できない場合 
• SDPのやり取り 
– PeerConnection.onsignalingstatechange 発生 
• PeerConnection.signalingState === 'ha...
signalingStateの変遷 
(公式http://w3c.github.io/webrtc-pc/ より拝借) 
? 
?
iceConnectionState の変遷 
(公式http://w3c.github.io/webrtc-pc/ より拝借) 
?
Thank you, again!
Prochain SlideShare
Chargement dans…5
×

WebRTC getStats - WebRTC Meetup Tokyo 5 LT

4 134 vues

Publié le

WebRTC Meetup Tokyo #5のLT資料です。getStats()について話をします。

Publié dans : Technologie
  • Sex in your area is here: ❤❤❤ http://bit.ly/2u6xbL5 ❤❤❤
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Dating direct: ❶❶❶ http://bit.ly/2u6xbL5 ❶❶❶
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

WebRTC getStats - WebRTC Meetup Tokyo 5 LT

  1. 1. WebRTC Statistics / getStats を覗いてみる WebRTC Meetup Tokyo #5 LT 2014.11.26 インフォコム株式会社 がねこまさし
  2. 2. WebRTC Statistics API ? • Identifiers for WebRTC's Statistics API – http://w3c.github.io/webrtc-stats/webrtc-stats.html – → 正直、良く分かりません – → 実装レベルも、まだこれから? • なので、実際に取れる内容を見てみます – RTCPeerConnection.getStats() – Chrome 38の場合
  3. 3. 統計情報の取り出し方 • RTCPeerConnection.getStats()を呼ぶ – 戻り値ではなく、コールバックで取得 – コールバックの引数:RTCStatReportの配列 RTCPeerConnection.getStats(callback(res)) Array RTCStatReport RTCStatReport RTCStatReport res callbackで取得 peerconnection.getStats(function(res){ var rtcStatsReports = res.result(); // array of available status-reports var reportCount = rtcStatsReports.length; );
  4. 4. 統計情報RTCStatReport の内容 .type ... 情報のタイプ。次の様な種類がある – googComponent ... WebRTCコンポーネントの情報 – googCandidatePair ... リストアップされたICE Candidate情報 – googCertificate ... 認証情報。SRTPの暗号化に関係? – googLibjingleSession ... 内部的なライブラリの情報 – googTrac ... オーディオ/ビデオトラックの情報 – ssrc ... 実際に流れているストリームの情報 – ※種類ごとに実際に持つ属性が異なる .names() …情報が持つ属性の名前の配列を返す – RDBのレコードのカラム名を、配列で返すようなイメージ .stat(name) ... 属性名を指定し、その値を取得する – RDBのレコードから、カラム名を指定してその値を取得するイメージ
  5. 5. 属性値の取得 RTCStatReport String: name String: name String: name String: stat String: stat String: stat nameを使って取得 RTCStatReport.stat(name) RTCStatReport.names() で取得
  6. 6. 統計情報RTCStatReport の属性値 .type === ‘ssrc’ の場合 • googTrackId ... ビデオ/オーディオトラックの内部的なID • bytesReceived ... 受信用ストリームの場合の、受信したバイト数 – (※前回統計情報を取得してから、今回までの間の値と推定される) • bytesSent ... 送信用ストリームの場合の、送信したバイト数 – (※前回統計情報を取得してから、今回までの間の値と推定される) • googCodecName ... コーデック名。オーディオの場合はopus、ビデオの場合はVP8など。 • googFrameHeightReceived ... ビデオ受信ストリームの場合の、映像の高さ(ピクセル数) • googFrameWidthReceived ... ビデオ受信ストリームの場合の、映像の幅(ピクセル数) • googFrameRateReceived ... ビデオ受信ストリームの場合の、映像の秒間フレーム数 • googFrameHeightInput ... ビデオ送信ストリームの場合の、入力映像の高さ(ピクセル数) • googFrameWidthInput ... ビデオ送信ストリームの場合の、入力映像の幅(ピクセル数) • googFrameHeightSent ... ビデオ送信ストリームの場合の、実際に送信している映像の高 さ(ピクセル数) • googFrameWidthSent ... ビデオ送信ストリームの場合の、実際に送信している映像の幅 (ピクセル数) • googFrameRateSent ... ビデオ送信ストリームの場合の、実際に送信している映像の秒間 フレーム数
  7. 7. getStats()と、取り出せる情報(全体) RTCPeerConnection.getStats(callback(res)) RTCStatReport RTCStatReport RTCStatReport res Array Array String: name String: name String: name String: stat String: stat String: stat nameを使って取得 RTCStatReport.stat(name) callbackで取得
  8. 8. ソース例 peerconnection.getStats(function(res){ var rtcStatsReports = res.result(); // array of available status-reports var reportCount = rtcStatsReports.length; var reportIndex; for (reportIndex = 0; reportIndex < reportCount; reportIndex++) { var report = rtcStatsReports[reportIndex]; var line = 'type=' + report.type + ' '; var names = report.names(); var nameIndex; for (nameIndex = 0; nameIndex < names.length; nameIndex++) { var name = names[nameIndex]; var statValue = report.stat(name); line += (name + ':' + statValue + ', '); } console.log(line); } });
  9. 9. getStats() 結果サンプル type=googComponent googLocalCertificateId:googCertificate_67:92:0C:C9:C7:AA:BF:B6:8A:... googRemoteCertificateId:googCertificate_67:92:0C:C9:C7:AA:BF:B6:8A:77:98:90:95:72:EE:... type=googCandidatePair googRemoteAddress:192.168.xx.xx:49392, googWritable:true, googReadable:true, googLocalAddress:192.168.xx.xx:63416, googLocalCandidateType:local, googTransportType:udp, googChannelId:Channel-audio-1, googActiveConnection:true, bytesReceived:271033, googRemoteCandidateType:local, bytesSent:269639, googRtt:399 ... type=VideoBwe googActualEncBitrate:408525, googAvailableSendBandwidth:435792, googRetransmitBitrate:0, googAvailableReceiveBandwidth:442608, googTargetEncBitrate:435792, googBucketDelay:7, googTransmitBitrate:401666, type=googCertificate googFingerprint:67:92:0C:C9:C7:AA:BF:B6:8A:... type=googLibjingleSession googInitiator:true, type=googTrack googTrackId:5178c659-b673-40e7-b388-.... .... type=ssrc googTargetDelayMs:36, packetsLost:0, googDecodeMs:2, googFrameHeightReceived:480, packetsReceived:292, ssrc:1470008958, googRenderDelayMs:10, googMaxDecodeMs:3, googTrackId:9ac40967-7933-4285-b072-86e00f68701e, googFrameWidthReceived:640, transportId:Channel-audio-1, googFrameRateReceived:30, googFrameRateDecoded:0, googNacksSent:0, googFirsSent:0, bytesReceived:237413, googCurrentDelayMs:36, googCaptureStartNtpTimeMs:3625271364920, googMinPlayoutDelayMs:0, googFrameRateOutput:0, googJitterBufferMs:23, googPlisSent:0, type=ssrc googDecodingCTN:613, packetsLost:0, googDecodingPLC:3, packetsReceived:267, googJitterReceived:0, googPreferredJitterBufferMs:20, ssrc:3601597370, ... type=ssrc googFrameHeightInput:480, googFrameWidthInput:640, googCaptureQueueDelayMsPerS:3, packetsLost:0, googRtt:1, googEncodeUsagePercent:38, googCpuLimitedResolution:false, googNacksReceived:0, ssrc:4169404559, googFrameRateInput:0, googPlisReceived:0, googViewLimitedResolution:false, googCaptureJitterMs:23, googAvgEncodeMs:5, ... googFrameHeightSent:480, googEncodeRelStdDev:0, googFrameRateSent:30, googCodecName:VP8, googBandwidthLimitedResolution:false, googAdaptationChanges:0, googFrameWidthSent:640, googFirsReceived:0, packetsSent:292, bytesSent:235786 type=ssrc audioInputLevel:2456, packetsLost:0, googRtt:1, googEchoCancellationReturnLossEnhancement:-100, ...
  10. 10. Thank you!
  11. 11. オマケ:時間があまったら
  12. 12. 他のステータスイベント • PeerConnection.onsignalingstatechange – SDPのやり取りの通知 • PeerConnection.oniceconnectionstatechange – ICE Candidateのやり取りの通知 • テスト自動化や、エラー検出、トラブルシュー ティングに上手く使えないか?
  13. 13. 正常に通信が確立するまで (通信を始めるOffer側) • SDPのやり取り – PeerConnection.createOffer() • PeerConnection.setLocalDescription(sdp) – PeerConnection.onsignalingstatechange 発生 • PeerConnection.signalingState === 'have-local-offer‘ – PeerConnection. setRemoteDescription(sdp) – PeerConnection.onsignalingstatechange 発生 • PeerConnection.signalingState === 'stable'
  14. 14. 正常に通信が確立するまで (通信を始めるOffer側) • ICE Candidate のやり取り – PeerConnection.oniceconnectionstatechange 発生 • PeerConnection.iceConnectionState === 'checking' • PeerConnection.iceGatheringState === 'gathering' – PeerConnection.oniceconnectionstatechange 発生 • PeerConnection.iceConnectionState === 'connected' • PeerConnection.iceGatheringState === 'complete' – PeerConnection.oniceconnectionstatechange 発生 • PeerConnection.iceConnectionState === 'completed' • PeerConnection.iceGatheringState === 'complete' • ここまで来れば通信が確立、ストリーム開始
  15. 15. 正常に通信が確立するまで (通信を始めるAnswer側) • SDPのやり取り – PeerConnection. setRemoteDescription(sdp) – PeerConnection.onsignalingstatechange 発生 • PeerConnection.signalingState === 'have-remote-offer' – PeerConnection.createAnswer() • PeerConnection.setLocalDescription(sdp) – PeerConnection.onsignalingstatechange 発生 • PeerConnection.signalingState === 'stable'
  16. 16. 行儀よく切断するまでの流れ • PeerConnection.oniceconnectionstatechange 発生 – PeerConnection.iceConnectionState === 'closed' – PeerConnection.iceGatheringState === 'complete' • PeerConnection.onsignalingstatechange 発生 – PeerConnection.signalingState === 'closed' • 適切に通信終了した場合 – どちらのステータスもclosed に
  17. 17. 強制的にネットワークを切断した場合 • 切断した側(ネットワークが死んだ側) – イベントが発生 – PeerConnection.oniceconnectionstatechange 発生 • PeerConnection.iceConnectionState === 'disconnected' • PeerConnection.iceGatheringState === 'complete' – これを使えばモバイル環境などでネットワークが切れたこ とを検出できそう • ※残念ながら切断された側(自分はネットワークが 生きている側)では、イベントは発生しなかった
  18. 18. Firewallなどの影響で通信が確立できない場合 • SDPのやり取り – PeerConnection.onsignalingstatechange 発生 • PeerConnection.signalingState === 'have-local-offer' – PeerConnection.onsignalingstatechange 発生 • PeerConnection.signalingState === 'stable' • ICE Candidatenのやり取り – PeerConnection.oniceconnectionstatechange 発生 • PeerConnection.iceConnectionState === 'checking' • PeerConnection.iceGatheringState === 'gathering' • 残念ながらcheckingの状態が続いた – 失敗を表す‘failed’ にはならなかった – 一定時間(60秒とか) checkingが続いたらエラー とみなす必要がありそう
  19. 19. signalingStateの変遷 (公式http://w3c.github.io/webrtc-pc/ より拝借) ? ?
  20. 20. iceConnectionState の変遷 (公式http://w3c.github.io/webrtc-pc/ より拝借) ?
  21. 21. Thank you, again!

×