docs: update README with improved Docker commands and add credits section

feat: enhance WebRTC stats collection by logging connection state changes

README.md

@@ -48,11 +48,13 @@ ufw allow 27107/tcp
 
 4. Start the Docker containers:
     ```sh
-    docker compose up
+    docker compose up \
+        --pull missing \
+        --abort-on-container-exit
     ```
     or in detached mode:
     ```sh
-    docker compose up -d
+    docker compose up --pull missing -d
     ```
 
 The collector will start gathering WebRTC stats from the Selenium container and sending them to the Telegraf service.
@@ -103,8 +105,6 @@ peertube-collector/
 
 The repository contains a `server` directory with a simple MongoDB server (with initializations scripts) and WebUI that serves the WebRTC stats collected by the collector.
 
-Based this awesome example configuration: [MongoDB Docker Compose examples](https://github.com/TGITS/docker-compose-examples/tree/main/mongodb-docker-compose-examples).
-
 ## Setup
 
 1. Change to the `server` directory:
@@ -122,4 +122,10 @@ Based this awesome example configuration: [MongoDB Docker Compose examples](http
     docker compose up
     ```
 
-The WebUI control panel will be available at [http://localhost:8081](http://localhost:8081).
+The WebUI control panel will be available at [http://localhost:8081](http://localhost:8081).
+
+# Credits
+
+- [WebRTC Internals Exporter](https://github.com/vpalmisano/webrtc-internals-exporter)
+  - [WebRTC debugging with Prometheus/Grafana](https://medium.com/@vpalmisano/webrtc-debugging-with-prometheus-grafana-254b6ac71063)
+- [MongoDB Docker Compose examples](https://github.com/TGITS/docker-compose-examples/tree/main/mongodb-docker-compose-examples)

webrtc-internals-exporter/override.js

@@ -40,6 +40,9 @@ class WebrtcInternalExporter {
     pc.iceCandidateErrors = [];
     this.peerConnections.set(id, pc);
     pc.addEventListener("connectionstatechange", () => {
+      log(`connectionStateChange: ${pc.connectionState}`);
+      this.collectAndPostSingleStat(id);
+
       if (pc.connectionState === "closed") {
         this.peerConnections.delete(id);
       }
@@ -83,7 +86,7 @@ class WebrtcInternalExporter {
   }
 
   async collectAndPostSingleStat(id) {
-    const stats = await this.collectStats(id, this.collectAndPostSingleStat);
+    const stats = await this.collectStats(id);
     if (Object.keys(stats).length === 0 || !stats) return;
 
     window.postMessage(
@@ -98,9 +101,10 @@ class WebrtcInternalExporter {
   async collectAllStats() {
     const stats = [];
 
-    for (const [id, pc] of this.peerConnections) {
+    for (const [id] of this.peerConnections) {
       if (this.url && this.enabled) {
-        const pcStats = await this.collectStats(id, pc);
+        const pcStats = await this.collectStats(id);
+        if (Object.keys(pcStats).length === 0 || !pcStats) continue;
         stats.push(pcStats);
       }
     }
@@ -120,16 +124,12 @@ class WebrtcInternalExporter {
 
   /**
    * @param {string} id
-   * @param {RTCPeerConnection} pc
-   * @param {Function} binding
    */
-  async collectStats(id, pc, binding) {
-    var completeStats = {};
+  async collectStats(id) {
+    var pc = this.peerConnections.get(id);
+    if (!pc) return;
 
-    if (!pc) {
-      pc = this.peerConnections.get(id);
-      if (!pc) return;
-    }
+    var completeStats = {};
 
     if (this.url && this.enabled) {
       try {
@@ -157,10 +157,6 @@ class WebrtcInternalExporter {
 
     if (pc.connectionState === "closed") {
       this.peerConnections.delete(id);
-    } else {
-      if (binding) {
-        setTimeout(binding.bind(this), this.updateInterval, id);
-      }
     }
 
     return completeStats;