RTCPeerConnection: getStats() method
BaselineWidely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.
ThegetStats()
method of theRTCPeerConnection
interface returns a promise which resolves with data providing statistics about either the overall connection or about the specifiedMediaStreamTrack
.
Syntax
getStats()getStats(selector)getStats(selector, successCallback, failureCallback) // deprecated
Parameters
selector
OptionalA
MediaStreamTrack
for which to gather statistics.If this isnull
(the default value), statistics will be gathered for the entireRTCPeerConnection
.
Deprecated parameters
In older code and documentation, you may see a callback-based version of this function.This has been deprecated and its use isstrongly discouraged.You should update any existing code to use thePromise
-based version ofgetStats()
instead.The parameters for the older form ofgetStats()
are described below, to aid in updating existing code.
successCallback
DeprecatedAcallback function called once the report has been successfully generated.
failureCallback
DeprecatedAcallback function called once the report has failed to be generated.
Return value
APromise
which resolves with anRTCStatsReport
object providing connection statistics.The report's contents depend on theselector
and other details of the connection.
Exceptions
This method does not throw exceptions; instead, it rejects the returned promise with one of the following errors:
InvalidAccessError
DOMException
Thrown when there is no
RTCRtpSender
orRTCRtpReceiver
whosetrack
matches the specifiedselector
, orselector
matches more than one sender or receiver.
Examples
This example creates a periodic function usingsetInterval()
that collectsstatistics for anRTCPeerConnection
every second, generating anHTML-formatted report and inserting it into a specific element in the DOM.
setInterval(() => { myPeerConnection.getStats(null).then((stats) => { let statsOutput = ""; stats.forEach((report) => { statsOutput += `<h2>Report: ${report.type}</h2>\n<strong>ID:</strong> ${report.id}<br>\n` + `<strong>Timestamp:</strong> ${report.timestamp}<br>\n`; // Now the statistics for this report; we intentionally drop the ones we // sorted to the top above Object.keys(report).forEach((statName) => { if ( statName !== "id" && statName !== "timestamp" && statName !== "type" ) { statsOutput += `<strong>${statName}:</strong> ${report[statName]}<br>\n`; } }); }); document.querySelector(".stats-box").innerHTML = statsOutput; });}, 1000);
This works by callinggetStats()
, then, when the promise is resolved, iterates over theRTCStatsReport
objects on the returnedRTCStatsReport
.A section is created for each report with a header and all of the statistics below, with the type, ID, and timestamp handled specially to place them at the top of the list.
Once theHTML for the report is generated, it is injected into the element whose class is"stats-box"
by setting itsinnerHTML
property.
Specifications
Specification |
---|
WebRTC: Real-Time Communication in Browsers # widl-RTCPeerConnection-getStats-Promise-RTCStatsReport--MediaStreamTrack-selector |