WebRTC Perf javascript browser library

GitHub page | Documentation

A browser library used by the webrtcperf
tool to capture the RTC logs and run page inspection/automation. It can also be
used stand-alone importing the javascript package into the page before loading
the other javascript sources.
It contains some utilities to debug the page RTC connections, the getUserMedia and
getDisplayMedia, evaluate the end-to-end delay, etc.

Import the library

``html



`

Userscript usage

The library can be used directly into a regular Google Chome browser session.

1. Install Tampermonkey
2. Install the User Script

Examples

$3

`js
webrtcperf.PeerConnections
`

$3

`js
await webrtcperf.collectPeerConnectionStats(true)
`

$3

Visit https://webrtc.github.io/samples/src/content/getusermedia/resolution/ with the
tampermonkey script activated:
`js
webrtcperf.config.MEDIA_URL = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
// Select one of the resolutions in the sample page.
`

To activate the option every time the page is loaded, you can set the following
localStorage value:
`js
localStorage.setItem('webrtcperf.config', JSON.stringify({
MEDIA_URL: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
}))
`

$3


`js
await webrtcperf.startFakeScreenshare()
webrtcperf.overrides.getDisplayMedia = constraints => Object.assign(constraints, { preferCurrentTab: true })
// Start a screen sharing with getDisplayMedia.
`

$3

Visit https://webrtc.github.io/samples/src/content/peerconnection/pc1/ with the
tampermonkey script activated:
`js
webrtcperf.config.MEDIA_URL = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
webrtcperf.params.timestampWatermarkVideo = true
webrtcperf.params.timestampWatermarkAudio = true
// Output:
// [webrtcperf-0] [e2e-video-stats] rx text=0-1743947998586 delay=44ms confidence=74 elapsed=73ms
// [webrtcperf-0] [e2e-audio-stats] rx delay: 71.33333333333326ms rxFrames: 62 rxFramesDuration: 1322.6666666666667ms

// Access the collected stats:
webrtcperf.videoEndToEndDelayStats
webrtcperf.audioEndToEndDelayStats
``
The library adds a video timestamp overlay at sender side and it
recognizes the video at receiver side using Tesseract.js.
The audio track at sender side is mixed with signals generated with the
ggwave library; at receiver side, the same library is used do decode the received signals with the encoded sender timestamp.
Sender and receiver machine clocks must be syncronized.