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.

WebRTC getStats - WebRTC Meetup Tokyo 5 LT

3,217 views

Published on

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

Published in: Technology
  • Be the first to comment

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!

×