Embed Size (px)
DESCRIPTION
WebRTC Meetup Tokyo #5のLT資料です。getStats()について話をします。
Citation preview
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()
– Chrome 38の場合
統計情報の取り出し方
• RTCPeerConnection.getStats()を呼ぶ
–戻り値ではなく、コールバックで取得
– コールバックの引数：RTCStatReportの配列
peerconnection.getStats(function(res){ var rtcStatsReports = res.result(); // array of available status-reports var reportCount = rtcStatsReports.length;
);
RTCPeerConnection.getStats(callback(res))
RTCStatReportRTCStatReport
RTCStatReport
res
Arraycallbackで取得
統計情報 RTCStatReportの内容
.type ... 情報のタイプ。次の様な種類がある– googComponent ... WebRTCコンポーネントの情報– googCandidatePair ... リストアップされたICE Candidate情報– googCertificate ... 認証情報。SRTPの暗号化に関係？– googLibjingleSession ... 内部的なライブラリの情報– googTrac ... オーディオ/ビデオトラックの情報– ssrc ... 実際に流れているストリームの情報– ※種類ごとに実際に持つ属性が異なる
.names() …情報が持つ属性の名前の配列を返す– RDBのレコードのカラム名を、配列で返すようなイメージ
.stat(name) ... 属性名を指定し、その値を取得する– RDBのレコードから、カラム名を指定してその値を取得するイメージ
属性値の取得
RTCStatReport String: nameString: name
String: name
String: statString: stat
String: statnameを使って取得
RTCStatReport.stat(name)
RTCStatReport.names()で取得
統計情報 RTCStatReportの属性値.type === ‘ssrc’ の場合• googTrackId ... ビデオ/オーディオトラックの内部的なID• bytesReceived ... 受信用ストリームの場合の、受信したバイト数
– （※前回統計情報を取得してから、今回までの間の値と推定される）
• bytesSent ... 送信用ストリームの場合の、送信したバイト数– （※前回統計情報を取得してから、今回までの間の値と推定される）
• googCodecName ... コーデック名。オーディオの場合はopus、ビデオの場合はVP8など。• googFrameHeightReceived ... ビデオ受信ストリームの場合の、映像の高さ（ピクセル数）• googFrameWidthReceived ... ビデオ受信ストリームの場合の、映像の幅（ピクセル数）• googFrameRateReceived ... ビデオ受信ストリームの場合の、映像の秒間フレーム数• googFrameHeightInput ... ビデオ送信ストリームの場合の、入力映像の高さ（ピクセル数）• googFrameWidthInput ... ビデオ送信ストリームの場合の、入力映像の幅（ピクセル数）• googFrameHeightSent ... ビデオ送信ストリームの場合の、実際に送信している映像の高さ（ピクセル数）
• googFrameWidthSent ... ビデオ送信ストリームの場合の、実際に送信している映像の幅（ピクセル数）
• googFrameRateSent ... ビデオ送信ストリームの場合の、実際に送信している映像の秒間フレーム数
RTCPeerConnection.getStats(callback(res))
RTCStatReportRTCStatReport
RTCStatReport
res
ArrayArray
String: nameString: name
String: name
String: statString: stat
String: stat nameを使って取得
RTCStatReport.stat(name)
callbackで取得
getStats()と、取り出せる情報（全体）
ソース例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);
}
});
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, ...
getStats()結果サンプル
Thank you!
オマケ：時間があまったら
他のステータスイベント
• PeerConnection.onsignalingstatechange
– SDPのやり取りの通知
• PeerConnection.oniceconnectionstatechange
– ICE Candidateのやり取りの通知
• テスト自動化や、エラー検出、トラブルシューティングに上手く使えないか？
正常に通信が確立するまで（通信を始めるOffer側）
• SDPのやり取り
– PeerConnection.createOffer()
• PeerConnection.setLocalDescription(sdp)
– PeerConnection.onsignalingstatechange発生
• PeerConnection.signalingState === 'have-local-offer‘
– PeerConnection. setRemoteDescription(sdp)
– PeerConnection.onsignalingstatechange発生
• PeerConnection.signalingState === 'stable'
正常に通信が確立するまで（通信を始める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'
• ここまで来れば通信が確立、ストリーム開始
正常に通信が確立するまで（通信を始めるAnswer側）
• SDPのやり取り
– PeerConnection. setRemoteDescription(sdp)
– PeerConnection.onsignalingstatechange発生
• PeerConnection.signalingState === 'have-remote-offer'
– PeerConnection.createAnswer()
• PeerConnection.setLocalDescription(sdp)
– PeerConnection.onsignalingstatechange発生
• PeerConnection.signalingState === 'stable'
行儀よく切断するまでの流れ
• PeerConnection.oniceconnectionstatechange発生
– PeerConnection.iceConnectionState === 'closed'
– PeerConnection.iceGatheringState === 'complete'
• PeerConnection.onsignalingstatechange発生
– PeerConnection.signalingState === 'closed'
• 適切に通信終了した場合
– どちらのステータスも closed に
強制的にネットワークを切断した場合
• 切断した側（ネットワークが死んだ側）
– イベントが発生
– PeerConnection.oniceconnectionstatechange発生• PeerConnection.iceConnectionState === 'disconnected'
• PeerConnection.iceGatheringState === 'complete'
– これを使えばモバイル環境などでネットワークが切れたことを検出できそう
• ※残念ながら切断された側（自分はネットワークが生きている側）では、イベントは発生しなかった
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が続いたらエラーとみなす必要がありそう
Thank you, again!
