docs: simplify Docker commands in README and enhance logging in WebRTC stats exporter

feat: enhance WebRTC stats collection by logging connection state changes

README.md

@@ -48,7 +48,7 @@ ufw allow 27107/tcp
 
 4. Start the Docker containers:
     ```sh
-    docker compose up
+    docker compose up --abort-on-container-exit
     ```
     or in detached mode:
     ```sh
@@ -97,29 +97,8 @@ peertube-collector/
 └── webrtc-internals-exporter/
 ```
 
----
+# Credits
 
-# Server
-
-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:
-    ```sh
-    cd server
-    ```
-
-2. Create and configure the environment file based on the `.env.example` file:
-    ```sh
-    cp .env.example .env
-    ```
-
-3. Start the Docker containers:
-    ```sh
-    docker compose up
-    ```
-
-The WebUI control panel will be available at [http://localhost:8081](http://localhost:8081).
+- [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)

docker-compose.yml

@@ -14,6 +14,7 @@ services:
       interval: 5s
       timeout: 10s
       retries: 5
+    pull_policy: always
     network_mode: host
 
   telegraf:
@@ -30,6 +31,7 @@ services:
       interval: 5s
       timeout: 10s
       retries: 5
+    pull_policy: always
     networks:
       - backend
 
@@ -50,6 +52,7 @@ services:
       - "9092:9092"
     extra_hosts:
       - "host.docker.internal:host-gateway"
+    pull_policy: always
     networks:
       - backend
 

server/README.md

@@ -0,0 +1,30 @@
+# Server
+
+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.
+
+It's not mandatory to run and use this service, it's provided just as an example of how to store collected data.
+
+## Setup
+
+1. Change to the `server` directory:
+    ```sh
+    cd server
+    ```
+
+2. Create and configure the environment file based on the `.env.example` file:
+    ```sh
+    cp .env.example .env
+    ```
+
+3. Start the Docker containers:
+    ```sh
+    docker compose up
+    ```
+
+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,24 +86,27 @@ 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(
       {
         event: "webrtc-internal-exporter:peer-connection-stats",
-        stats
+        stats: [stats]
       },
-      stats
+      [stats]
     );
+
+    log(`Single stat collected:`, [stats]);
   }
 
   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);
       }
     }
@@ -108,11 +114,12 @@ class WebrtcInternalExporter {
     window.postMessage(
       {
         event: "webrtc-internal-exporter:peer-connections-stats",
-        data: JSON.parse(JSON.stringify(stats)),
+        data: stats
       },
+      stats
     );
 
-    log(`Stats collected:`, JSON.parse(JSON.stringify(stats)));
+    log(`Stats collected:`, stats);
 
     setTimeout(this.collectAllStats.bind(this), this.updateInterval);
     return stats;
@@ -120,16 +127,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 +160,6 @@ class WebrtcInternalExporter {
 
     if (pc.connectionState === "closed") {
       this.peerConnections.delete(id);
-    } else {
-      if (binding) {
-        setTimeout(binding.bind(this), this.updateInterval, id);
-      }
     }
 
     return completeStats;