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

@@ -15,7 +15,7 @@ peertube-collector is a project designed to collect and analyze WebRTC statistic
 
 Ports can be opened in the host machine's firewall with:
 ```sh
-ufw allow from 172.30.0.0/16 to any port 4444
+ufw allow from 172.100.0.0/16 to any port 4444
 ```
 
 #### External (OPTIONAL):
@@ -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
+- [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)
-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.
+- [MongoDB Docker Compose examples](https://github.com/TGITS/docker-compose-examples/tree/main/mongodb-docker-compose-examples)
-
-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).

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
 
@@ -57,4 +60,4 @@ networks:
   backend:
     ipam:
       config:
-        - subnet: 172.30.0.0/16
+        - subnet: 172.100.0.0/16

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) {
+  async collectStats(id) {
-    var completeStats = {};
+    var pc = this.peerConnections.get(id);
+    if (!pc) return;
 
-    if (!pc) {
+    var completeStats = {};
-      pc = this.peerConnections.get(id);
-      if (!pc) return;
-    }
 
     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;