Bitrate im Overlay

OstseeTV · August 4, 2024 at 3:10 PM

Moin Moin ihr Lieben.

Kurz zur Ausstattung: Ich habe ein Orange PI 5 plus und die Belabox Software. Belabox Cloud. Bonding mit mehreren Karten funktioniert. Verbinde mich per RTMP mit Handy oder Action Cam zur Belabox. Und das wird dann per SRT zu OBS übertragen.

Meine Frage ist: Wie bekomme ich eine Bitrate Anzeige aufs Overlay. (Ich meine nicht die Anzeige die ich in der Belabox anschalten kann) sondern nur die aktuelle Bitrate. Habe mir von github die Bitrate.html runtergeladen ohne Erfolg. Auch die andere Datei die es dort gibt mit der Balkenanzeige als .json Datei läuft nicht, auch wenn meine Api eingetragen ist. Könnt ihr mir helfen das ins Overlay zu bekommen ?

Vielen Dank

Gruß Stefan

pirato_ · August 4, 2024 at 4:29 PM

Mit der Bitrate.html biste eigentlich richtig.

Man muss die richtig ausfüllen, nun kommt es drauf an hast Du den SRT von RationalIRL (Belacloud) oder hast Du nen eigenen.

Wenn Du magst helf ich Dir da sehr gern kostenfrei weiter in einem kurzen Call.

OstseeTV · August 4, 2024 at 4:48 PM

Ich hab die Belacloud. Aber kriege es nicht zum laufen…

Gwalex · August 4, 2024 at 6:12 PM

Quote from Akinos01

im unteren Bereich einfach das eintragen und mit deinen richtigen Daten austauschen
{ server: "SRT", page: "http://eu.srt.belabox.net:8080/PASSWORT_VON_BELABOX", key: "PASSWORT_VON_BELABOX", rtt: true }
das ist der Bereich wo die ganzen Server Arten stehen

wobei ich eher stats.srt.belabox.net nutzen würde, weil du es dann nicht ändern musst, wenn man auf einen anderen Server außer eu streamt:

{ server: "SRT", page: "http://stats.srt.belabox.net/PASSWORT_VON_BELABOX", key: "live", rtt: true }

Akinos01 · August 4, 2024 at 6:41 PM

na dann einfach so eintragen

Code

{ server: "SRT", page: "http://eu.srt.belabox.net:8080/PASSWORT_VON_BELABOX", key: "PASSWORT_VON_BELABOX", rtt: true },
{ server: "SRT", page: "http://uk.srt.belabox.net:8080/PASSWORT_VON_BELABOX", key: "PASSWORT_VON_BELABOX", rtt: true },
{ server: "SRT", page: "http://keineAhnung.srt.belabox.net:8080/PASSWORT_VON_BELABOX", key: "PASSWORT_VON_BELABOX", rtt: true },
{ server: "SRT", page: "http://us.srt.belabox.net:8080/PASSWORT_VON_BELABOX", key: "PASSWORT_VON_BELABOX", rtt: true }

Gwalex · August 4, 2024 at 8:30 PM

Quote from Akinos01

na dann einfach so eintragen

Code

{ server: "SRT", page: "http://eu.srt.belabox.net:8080/PASSWORT_VON_BELABOX", key: "PASSWORT_VON_BELABOX", rtt: true },
{ server: "SRT", page: "http://uk.srt.belabox.net:8080/PASSWORT_VON_BELABOX", key: "PASSWORT_VON_BELABOX", rtt: true },
{ server: "SRT", page: "http://keineAhnung.srt.belabox.net:8080/PASSWORT_VON_BELABOX", key: "PASSWORT_VON_BELABOX", rtt: true },
{ server: "SRT", page: "http://us.srt.belabox.net:8080/PASSWORT_VON_BELABOX", key: "PASSWORT_VON_BELABOX", rtt: true }

wenn das bei dir geht, bei mir geht nur ein SRT-Server, wenn mehrere, dann zeigt er mir gar nichts mehr an bzw. warum sollte man mehre Einträge machen, wenn ich es mit einem genau so schaffe?

Akinos01 · August 4, 2024 at 9:29 PM

Komisch...aber wer weiß was da im Einzelnen nicht richtig war, kann ich so nicht beurteilen

Gwalex · August 4, 2024 at 9:41 PM

Quote from Akinos01

Komisch...aber wer weiß was da im Einzelnen nicht richtig war, kann ich so nicht beurteilen

Also bei dir geht es oder wie?

Akinos01 · August 5, 2024 at 6:22 AM

hmm...mir hat keiner gesagt das die Anzeige defekt sei, wenn ich Online bin

OstseeTV · August 5, 2024 at 10:32 AM

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ALL-SERVERS-STATS-FETCH</title>
<style>
body {
background-color: rgba(0, 0, 0, 0);
margin: 0px auto;
font-family: 'Open Sans', sans-serif;
overflow: hidden;
color: #1e90ff;
font-size: 22px;
font-weight: 700;
text-align: right;
padding: 5px;
}
#bitrate * {
vertical-align: middle;
}
</style>
</head>
<body>
<div id="block_container">
<div id="bitrate"></div>
<div id="rtt"></div>
</div>
<script>
const tryFetch = async (page) => {
try {
return await fetch(page);
} catch (error) {
console.log(page, error);
}
return null;
}
const getSrtBitrate = async (page, publisher) => {
const response = await tryFetch(page);
if (!response) return null;
const srtdata = await response.json();
if (srtdata.publishers[publisher] == null) return null;
const { bitrate, rtt } = srtdata.publishers[publisher];
return { bitrate, rtt };
};
const getNmsBitrate = async (page) => {
const response = await tryFetch(page);
if (!response) return null
const { bitrate } = await response.json();
if (!bitrate) return null;
return { bitrate };
};
const getNginxBitrate = async (page, key) => {
const response = await tryFetch(page);
if (!response) return null
const data = await response.text();
const parse = new window.DOMParser().parseFromString(data, "text/xml");
const live = parse.getElementsByTagName(key)[0];
const node = live.childNodes[1].childNodes[14];
if (!node) return null;
const bitrate = Math.round(node.childNodes[0].nodeValue / 1024);
return { bitrate };
};
const run = async (stats, interval) => {
setText(await getBitrate(stats))
setInterval(async () => {
setText(await getBitrate(stats));
}, interval);
}
const getBitrate = async (stats) => {
const get = {
"SRT": getSrtBitrate,
"NMS": getNmsBitrate,
"NGINX": getNginxBitrate,
}
const values = await Promise.all(stats.map(s => get[s.server](s.page, s.key)));
const index = values.findIndex(el => el);
return [values[index], stats[index]];
}
const setText = (stats) => {
[stats, origin] = stats;
const { bitrate, rtt } = stats  {};
const el = document.getElementById('bitrate');
const elrtt = document.getElementById('rtt');
if (!bitrate) {
el.innerHTML = null;
elrtt.innerHTML = null;
return;
}
el.innerHTML = `${bitrate} kb/s`;
if (origin.rtt)
elrtt.innerHTML = `• ${Math.round(rtt)} RTT`;
}
</script>
<script>
const interval = 2000;
const stats = [
{ server: "SRT", page: "http://stats.srt.belabox.net/Mein PasswortBELABOX", key: "live", rtt: true }
                       
];
run(stats, interval);
</script>
</body>
</html>

Display More

Moin, bei mir will es nicht !

Hab alle anderen einträge entfernt und nur noch den einen. Läuft nicht. Ist die .html so richtig ?

Und muss sich die .html an einem bestimmten Ort befinden ?

THX Jungs

Gwalex · August 5, 2024 at 10:55 AM

du musst statt http://stats.srt.belabox.net -Y https://stats.srt.belabox.net, also noch ein s dazu bei http, weil nur mit http kannst du dich nicht verbinden

OstseeTV · August 5, 2024 at 11:19 AM

Es läuft.

Nur mit dieser Zeile hat es funktioniert.

Code

{ server: "SRT", page: "http://eu.srt.belabox.net:8080/PASSWORT_VON_BELABOX", key: "PASSWORT_VON_BELABOX", rtt: true },

Vielen dank für Eure Hilfe.

Gwalex · August 5, 2024 at 1:01 PM

Wenn du das mit stats.srt.belabox.net machen willst:

Code

{ server: "SRT", page: "https://stats.srt.belabox.net/Key", key: "live", rtt: true },

dabei musst du achten, dass es https steht und nicht nur http

OstseeTV · August 5, 2024 at 2:41 PM

Ok. Dankeschön.

Doofe Frage noch. Wäre es mit .css oder ähnlichem möglich bei unterschreiten eines Wertes die Farbe auf beispielsweise gelb zu wechseln und bei noch niedrigerer Bitrate auf Rot ?

Habt ihr ne Idee das umzusetzen ?

Nicht notwendig aber schöne Spielerei….. 😉

Gwalex · August 5, 2024 at 3:09 PM

Quote from OstseeTV

Ok. Dankeschön.
Doofe Frage noch. Wäre es mit .css oder ähnlichem möglich bei unterschreiten eines Wertes die Farbe auf beispielsweise gelb zu wechseln und bei noch niedrigerer Bitrate auf Rot ?

Habt ihr ne Idee das umzusetzen ?

Nicht notwendig aber schöne Spielerei….. 😉

Habe da mal was gebaut, also wenn die Bitrate unter 2500 fällt, dann wird die Bitrate Orange angezeigt und wenn die auf unter 1200 fällt, dann Rot. Bei RTT auch so ähnlich dabei, wenn der Wert 120 oder mehr ist, wird es Orange angezeigt und ab 250 Rot, die Werte können ganz einfach angepasst werden. Und hier die Datei: https://github.com/GwalexOfficial…lorBitrate.html

OstseeTV · August 5, 2024 at 4:06 PM

Yes. Hammergeil.

Dankeschön. 👊👍

Gwalex · August 5, 2024 at 4:51 PM

Quote from OstseeTV

Yes. Hammergeil.

Dankeschön. 👊👍

Gerne doch und viel Spaß beim IRL streamen

tomoe4eie · August 22, 2024 at 8:58 PM

Danke Gwalex, habe da die letzten Tage auch gefummelt und hatte massive Probleme -

und am Ende lag es nicht an mir, sondern mein Serverbetreiber hatte mir den falschen KEY geschickt.

Dafür habe ich eine Menge dabei dazu gelernt

Joba1980 · August 27, 2024 at 10:22 AM

Hallo zusammen. Ich habe jetzt auch mal die html Datei von Gwalex genutzt. Wird auch alles schick in den entsprechenden Farben angezeit. Jedoch habe ich das Problem das meine Anzeige immer so 10 Sekunden hinter dem tatsächlichen Bitratenstand hinterherhinkt.

Ich habe die html Datei als Browserquelle in OBS eingebunden und nutze einen eigenen Relay Server im Heimnetz. Vielleicht hat wer ne Idee woher dieses Delay herkommt. Jedenfalls passen meine Bitraten nie zu dem aktuellen Zustand. Ich vergleiche das immer mit dem in der Belabox integrierten Overlay.

tomoe4eie · August 29, 2024 at 5:45 PM

Im Stream hab ich auch immer weniger Bitrate als beim Belabox-Cloud , bzw direkt beim einloggen in die Belabox angezeigt wird, 10s Delay hab ich aber nicht festgestellt.

Bitrate im Overlay

Participate now!

Similar Threads

Komischer Sound

Tags