# 📞 WebRTC Observability with qryn

In this [interesting medium article](https://medium.com/@vpalmisano/webrtc-debugging-with-prometheus-grafana-254b6ac71063), RTC veteran **Vittorio Palmisano** shows his audience how to simplify the debugging process of **WebRTC applications** by exporting all `RTCPeerConnections` metrics generated by Browser sessions out to a Prometheus + PushGateway service using a custom built browser extension.

*If you have Prometheus and PushGateway up, that's great. If you don't.....*

<mark>This is </mark> **<mark>exactly </mark>** <mark>the challenge we designed </mark> **<mark>qryn </mark>** <mark>for - </mark> *<mark>so you know what's next!</mark>*

[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701652298981/e2738a04-3f30-47fb-963a-4f5d20ccb3fc.gif align="center")](https://qryn.dev)

### Requirements

In order to run this experiment you will need the following:

* [qryn](https://qryn.dev) or [qryn.cloud](https://qryn.cloud) setup to ingest and query metrics
    
* [grafana](https://qryn.cloud) to display metrics using the [included dashboard](https://gist.github.com/lmangani/8302de53ebfd8df5339643e3a74567ed#file-webrtc_internals-json)
    
* chrome browser with our [custom extension](https://github.com/lmangani/webrtc-internals-exporter/releases/download/v0.1.10/webrtc-exporter-v0.1.10.zip) installed
    

### Browser Extension Exporter

For this demo, we'll keep things simple. The original article requires a **<s>PushGateway </s>** to deliver the Prometheus metrics. The InfluxDB line protocol is a valid alternative candidate for the job, allowing direct delivery to a collector such as **qryn** without extra components, *so we modified the extension to add this protocol method.*

👉 [Download and manually install our extension](https://github.com/lmangani/webrtc-internals-exporter/releases/download/v0.1.10/webrtc-exporter-v0.1.10.zip) from our GitHub repository

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701652569478/6eaa9bfa-0435-43e7-9a78-e28c517c1c92.png align="left")

Once installed, you need to visit the **extension options** page, filling the **qryn endpoint** *and optional username/password.* Other optional settings include:

* **Update interval**: it allows to change the metrics collection interval (in seconds).
    
* **Enabling gzip compression**: it is not required but recommended in order to reduce the amount of data sent over the network;
    
* **Job name**: it allows to customize the `job` label attached to each metric. Usually, you can query the exported label in Grafana using the `exported_job` label selector.
    
* **Enabled PeerConnection stats**: you can specify here the list metrics types that you want to collect from the `getStats` output.
    
* **Enabled URL origins**: you can see here the list of allowed URLs where the extension will actually collect data.
    

![](https://miro.medium.com/v2/resize:fit:1250/1*TVT_Lfk2oNqd1rFShSXKOQ.jpeg align="left")

<mark>For a local qryn setup, you will only need the URL parameter: </mark> **<mark>http://qryn:3100</mark>**

**Save** your settings and proceed ahead.

### Talk to Yourself

*Real WebRTC developer and testers always prefer talking to themselves.*

To join the club, open your Chrome browser and start the [**Janus Echo Test**](https://janus.conf.meetecho.com/echotest.html)

**Enable** the **WebRTC Internals Exporter** for the Janus website 👇👇👇

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701652896408/a0542b00-18bd-48e5-84dc-60321d59be40.png align="center")

Click `start` to initiate your WebRTC echo session and begin **producing statistics**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701652073663/7dc34f1e-3a62-4ddc-ad6b-3b0fce15dd6a.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701653132853/7aa2b64a-6f5b-4c05-be5a-6e5b7a365d2d.png align="left")

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text"><mark>Keep your echo test going for a few minutes to collect relevant data</mark></div>
</div>

### 📈 Real Time Analytics

If you followed each step and bad luck didn't get in the way, our metrics should be inserted into qryn and available through the Prometheus API. All of our data points and tags are instantly available on the imported preset [**WebRTC Dashboard**](https://gist.github.com/lmangani/8302de53ebfd8df5339643e3a74567ed#file-webrtc_internals-json) 👈

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701650874492/0bf3bc36-eea7-4d7d-8333-8d546d9e2480.png align="center")

> The extension will convert each numeric value found in the `RTCPeerConnections` stats using a Gauge metric type, using the remaining string properties as labels. E.g. the **bytesSent** value in the **outbound-rtp** stats will be converted to a metric named **outbound\_rtp\_bytesSent** using the remaining string properties as labels.

![](https://miro.medium.com/v2/resize:fit:1250/1*1VVb2ek_i-eYkHC_0ULzfQ.jpeg align="left")

*<mark>Just imagine the combination of these reports with serverside Janus Events.....</mark>*

### Conclusion

That's it! With the power of **opensource** you have added a powerful asset to your real-time communications troubleshooting toolbox, while enjoying the polyglot capabilities of [**qryn**](https://qryn.cloud) alongside other RTC integrations such as [**homer**](https://sipcapture.org) and [**hepic**](https://hepic.cloud).

*Let's get polyglot* 💛

[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701652298981/e2738a04-3f30-47fb-963a-4f5d20ccb3fc.gif align="center")](https://qryn.dev)