# Wie kann ich Statistiken auf meiner Webseite anzeigen?

### ID und API für die Nutzung mit Javascript

In den folgenden Schritten erklären wir, wie man an die Statistiken gelangt (ID und API) und diese in eine Webseite über Javascript integriert bekommt.

{% hint style="info" %}
In den folgenden Beispielen wird mit der Restreamer-Adresse "<https://demo.datarhei.com>" gearbeitet, welche durch die eigene Adresse ersetzt werden muss.
{% endhint %}

### 1. ID des Kanals/Streams erhalten

Die Kanal-ID besteht aus zwei Bereichen. Dem **Prefix** für die Restreamer-Oberfläche und der **UUID.**

#### 1.1  Prefix

Hauptkanal der eingehenden Mediadaten ist:&#x20;

```
restreamer-ui:ingest
```

und baut sich zusammen aus:&#x20;

```
{applikation}:{ziel}
```

#### 1.2 UUID

Der einfachste Weg zur UUID ist der über die Browser-URL der Restreamer-Oberfläche:

```
https://demo.datarhei.com/ui/#/{UUID}
```

#### **Beispiel**

```
https://demo.datarhei.com/ui/#/2f646236-b14d-4242-8b21-54725220dc0c
```

Die `UUID` ist der Abschnitt hinter dem letzten `/` aus der URL.

#### 1.3 Prefix + UUID ergibt die ID

Die Kanal ID setzt sich aus beiden Bereichen zusammen:

`{prefix}:{uuid}` bzw. `restreamer-ui:ingest:2f646236-b14d-4242-8b21-54725220dc0c`

### 2. Statistiken eines Kanals abrufen

Über die API können die Statistiken aufgerufen werden:

<pre class="language-shell"><code class="lang-shell">curl -X 'GET' \
<strong>  'https://demo.datarhei.com/api/v3/widget/process/restreamer-ui:ingest:2f646236-b14d-4242-8b21-54725220dc0c' \
</strong>  -H 'accept: application/json'
</code></pre>

Gib diese Werte aus:

```shell
{
  "current_sessions": 0,
  "total_sessions": 2075,
  "uptime": 798975
}
```

### 3. Statistiken auf einer Webseite darstellen

Demo-Script für die Integration.

```html
<div>
    Current: <span id="channel_stats_current"></span> viewer 
    Summary: <span id="channel_stats_sum">0</span> viewer 
    Uptime: <span id="channel_stats_runtime">0</span> sec.
</div>

<script>
    var channel_id = '2f646236-b14d-4242-8b21-54725220dc0c';
    myCallback(channel_id);
    setInterval(myCallback, 2000, channel_id);
    function myCallback(channelId) {
        fetch("https://demo.datarhei.com/api/v3/widget/process/restreamer-ui:ingest:" + channelId).then(
            function(u){
                return u.json();
            }
        ).then(
            function(json){
                data_function(json);
            }
        );
        function data_function(data){
            document.getElementById('channel_stats_current').innerHTML = data.current_sessions;
            document.getElementById('channel_stats_sum').innerHTML = data.total_sessions;
            document.getElementById('channel_stats_runtime').innerHTML = data.uptime;
        }
    };
</script>
```