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

1. WebRTC Statistics / getStats を覗いてみる
WebRTC Meetup Tokyo #5 LT
2014.11.26
インフォコム株式会社
がねこまさし

2. WebRTC Statistics API ?
• Identifiers for WebRTC's Statistics API
– http://w3c.github.io/webrtc-stats/webrtc-stats.html
– → 正直、良く分かりません
– → 実装レベルも、まだこれから？
• なので、実際に取れる内容を見てみます
– RTCPeerConnection.getStats()
– Chrome 38の場合

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. 統計情報RTCStatReport の内容
.type ... 情報のタイプ。次の様な種類がある
– googComponent ... WebRTCコンポーネントの情報
– googCandidatePair ... リストアップされたICE Candidate情報
– googCertificate ... 認証情報。SRTPの暗号化に関係？
– googLibjingleSession ... 内部的なライブラリの情報
– googTrac ... オーディオ/ビデオトラックの情報
– ssrc ... 実際に流れているストリームの情報
– ※種類ごとに実際に持つ属性が異なる
.names() …情報が持つ属性の名前の配列を返す
– RDBのレコードのカラム名を、配列で返すようなイメージ
.stat(name) ... 属性名を指定し、その値を取得する
– RDBのレコードから、カラム名を指定してその値を取得するイメージ

5. 属性値の取得
RTCStatReport String: name
String: name
String: name
String: stat
String: stat
String: stat
nameを使って取得
RTCStatReport.stat(name)
RTCStatReport.names()
で取得

6. 統計情報RTCStatReport の属性値
.type === ‘ssrc’ の場合
• googTrackId ... ビデオ/オーディオトラックの内部的なID
• bytesReceived ... 受信用ストリームの場合の、受信したバイト数
– （※前回統計情報を取得してから、今回までの間の値と推定される）
• bytesSent ... 送信用ストリームの場合の、送信したバイト数
– （※前回統計情報を取得してから、今回までの間の値と推定される）
• googCodecName ... コーデック名。オーディオの場合はopus、ビデオの場合はVP8など。
• googFrameHeightReceived ... ビデオ受信ストリームの場合の、映像の高さ（ピクセル数）
• googFrameWidthReceived ... ビデオ受信ストリームの場合の、映像の幅（ピクセル数）
• googFrameRateReceived ... ビデオ受信ストリームの場合の、映像の秒間フレーム数
• googFrameHeightInput ... ビデオ送信ストリームの場合の、入力映像の高さ（ピクセル数）
• googFrameWidthInput ... ビデオ送信ストリームの場合の、入力映像の幅（ピクセル数）
• googFrameHeightSent ... ビデオ送信ストリームの場合の、実際に送信している映像の高
さ（ピクセル数）
• googFrameWidthSent ... ビデオ送信ストリームの場合の、実際に送信している映像の幅
（ピクセル数）
• googFrameRateSent ... ビデオ送信ストリームの場合の、実際に送信している映像の秒間
フレーム数

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. ソース例
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. 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. Thank you!

11. オマケ：時間があまったら

12. 他のステータスイベント
• PeerConnection.onsignalingstatechange
– SDPのやり取りの通知
• PeerConnection.oniceconnectionstatechange
– ICE Candidateのやり取りの通知
• テスト自動化や、エラー検出、トラブルシュー
ティングに上手く使えないか？

13. 正常に通信が確立するまで
（通信を始めるOffer側）
• SDPのやり取り
– PeerConnection.createOffer()
• PeerConnection.setLocalDescription(sdp)
– PeerConnection.onsignalingstatechange 発生
• PeerConnection.signalingState === 'have-local-offer‘
– PeerConnection. setRemoteDescription(sdp)
– PeerConnection.onsignalingstatechange 発生
• PeerConnection.signalingState === 'stable'

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. 正常に通信が確立するまで
（通信を始めるAnswer側）
• SDPのやり取り
– PeerConnection. setRemoteDescription(sdp)
– PeerConnection.onsignalingstatechange 発生
• PeerConnection.signalingState === 'have-remote-offer'
– PeerConnection.createAnswer()
• PeerConnection.setLocalDescription(sdp)
– PeerConnection.onsignalingstatechange 発生
• PeerConnection.signalingState === 'stable'

16. 行儀よく切断するまでの流れ
• PeerConnection.oniceconnectionstatechange 発生
– PeerConnection.iceConnectionState === 'closed'
– PeerConnection.iceGatheringState === 'complete'
• PeerConnection.onsignalingstatechange 発生
– PeerConnection.signalingState === 'closed'
• 適切に通信終了した場合
– どちらのステータスもclosed に

17. 強制的にネットワークを切断した場合
• 切断した側（ネットワークが死んだ側）
– イベントが発生
– PeerConnection.oniceconnectionstatechange 発生
• PeerConnection.iceConnectionState === 'disconnected'
• PeerConnection.iceGatheringState === 'complete'
– これを使えばモバイル環境などでネットワークが切れたこ
とを検出できそう
• ※残念ながら切断された側（自分はネットワークが
生きている側）では、イベントは発生しなかった

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. signalingStateの変遷
（公式http://w3c.github.io/webrtc-pc/ より拝借）
?
?

20. iceConnectionState の変遷
（公式http://w3c.github.io/webrtc-pc/ より拝借）
?

21. Thank you, again!