Wie kann ich Statistiken auf meiner Webseite anzeigen?

Live-Statistiken wie Stream-Status oder aktuelle Zugriffszahlen eines oder mehrerer Kanäle für die HTML-Darstellung über die Schnittstellen vom Restreamer verwenden.

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.

In den folgenden Beispielen wird mit der Restreamer-Adresse "https://demo.datarhei.com" gearbeitet, welche durch die eigene Adresse ersetzt werden muss.

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:

restreamer-ui:ingest

und baut sich zusammen aus:

{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:

curl -X 'GET' \
  'https://demo.datarhei.com/api/v3/widget/process/restreamer-ui:ingest:2f646236-b14d-4242-8b21-54725220dc0c' \
  -H 'accept: application/json'

Gib diese Werte aus:

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

3. Statistiken auf einer Webseite darstellen

Demo-Script für die Integration.

<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>