HTTP Streaming: So erstellen Sie einen eigenen HLS-Server

Mit einem eigenen Streaming-Server hat man die komplette Kontrolle über die Über­tra­gung der eigenen Inhalte. Dies ist über einen Webserver dank des Pro­to­kolls HTTP Live Streaming (HLS) ganz einfach zu lösen.

Wie funk­tio­niert HTTP Streaming?

Ur­sprüng­lich wurde das Verfahren von Apple für seine eigenen Geräte ent­wi­ckelt, in­zwi­schen ist HTTP Live Streaming (HLS) aber eines der be­kann­tes­ten Pro­to­kol­le, um im Internet au­dio­vi­su­el­le Medien zu streamen. Da die Über­tra­gung über HTTP läuft (einen der Grund­pfei­ler des Internets), wird HLS von sehr vielen Geräten und Platt­for­men un­ter­stützt. In modernen Browsern erfolgt die Wie­der­ga­be häufig über Ja­va­Script-basierte Player, während einige Systeme, wie zum Beispiel Apple-Geräte, HLS nativ un­ter­stüt­zen.

Bei HLS werden aus dem Strom an Daten während des Streams kleine Pakete erzeugt. Diese können dann vom Endgerät schnell her­un­ter­ge­la­den und an­ein­an­der­ge­fügt werden. Das sorgt für eine schnelle Über­tra­gung – im besten Fall merken die Zuschauer des Streams nichts von der Auf­tei­lung. Um die richtige Zu­sam­men­set­zung des Videos zu ge­währ­leis­ten, ist Teil von HLS auch eine In­dex­da­tei. Diese weist dem Endgerät die richtige Rei­hen­fol­ge der Da­ten­pa­ke­te zu.

Das Auf­split­ten des Videos hat zudem einen weiteren Vorteil: Die Vi­deo­qua­li­tät kann während des Streams angepasst werden, ohne dass der Stream komplett neu geladen werden müsste. Das nächste Paket wird einfach in höherer oder ge­rin­ge­rer Qualität geladen.

Den Stream können Sie dann – und das ist ein großer Vorteil von HLS – in Ihre eigene Website in­te­grie­ren. Per HTML5 lässt sich ganz leicht ein ent­spre­chen­der Player einbauen, der den Stream anzeigt.

Wofür braucht man einen eigenen Streaming-Server?

Streaming wird immer populärer – und das nicht nur dank Film- und Serien-Portalen wie Netflix oder Amazon. Auch Pri­vat­per­so­nen und kleinere Un­ter­neh­men wissen um das Potenzial, das Live-Streaming bietet. Für Un­ter­neh­men sind die Über­tra­gun­gen bei­spiels­wei­se für Pro­dukt­vor­stel­lun­gen in­ter­es­sant. Auch Webinare oder Workshops lassen sich per Streaming durch­füh­ren.

Hardware-Spe­zi­fi­ka­tio­nen für HLS Streaming

Um eine passende Server-Lösung auf­zu­set­zen, müssen Sie zunächst wissen, welche An­for­de­run­gen an die Hardware HLS Streaming setzt.

Pro­zes­sor­leis­tung (CPU)

Vor allem wenn der Streaming-Server nur für das Verteilen des Da­ten­stroms gebraucht wird, benötigen Sie keine große Re­chen­leis­tung. 2 Cores mit jeweils bei­spiels­wei­se 2 GHz dürften für kleine Projekte schon aus­rei­chend sein. Um auch auf steigende An­for­de­run­gen vor­be­rei­tet zu sein, sind 4 CPU-Kerne emp­feh­lens­wert.

Ar­beits­spei­cher (RAM)

Der Ar­beits­spei­cher wird beim Streaming vor allem für das Caching verwendet. Für einfache Tests oder sehr kleine Projekte können bereits 2 GB RAM und wenige CPU-Kerne aus­rei­chen. In der Praxis, ins­be­son­de­re bei mehreren gleich­zei­ti­gen Zu­schau­ern oder Trans­co­ding, sollten jedoch deutlich höhere Res­sour­cen ein­ge­plant werden.

Fest­plat­ten­spei­cher (HDD/SSD)

Für die Server-Dateien benötigen Sie kaum Spei­cher­platz. Ein Webserver ist prin­zi­pi­ell schlank. 10 GB können schon aus­rei­chend sein. Zu empfehlen sind dabei aber die schnellen SSD-Speicher, damit an der Stelle kein Fla­schen­hals entstehen kann. Spei­cher­be­darf entsteht deshalb vor allem durch die Vi­deo­da­tei­en, die Sie auf dem Server speichern möchten. Wenn Sie also Ihren Stream auf der Server-Fest­plat­te mit­schnei­den, benötigen Sie weitaus mehr Spei­cher­platz.

Band­brei­te

Von größter Wich­tig­keit beim Streaming ist eine schnelle Ver­bin­dung. Damit Zu­schaue­rin­nen und Zuschauer keine schlechte Bild­qua­li­tät oder lange La­de­zei­ten ertragen müssen, sollte die Band­brei­te auf jeden Fall immer aus­rei­chen. Die Größe des Da­ten­stroms, den die Server-In­fra­struk­tur über­tra­gen muss, hängt von der Qualität des Videos und der Menge an Zu­schau­ern ab. Die heimische In­ter­net­ver­bin­dung dürfte dafür nicht aus­rei­chen, weshalb man einen Streaming-Server auf jeden Fall in einem pro­fes­sio­nel­len Re­chen­zen­trum laufen lassen sollte.

HLS Streaming-Server bei IONOS hosten

IONOS hat ver­schie­de­ne Server-Lösungen im Portfolio:

• Dedicated Server: eigene Hardware mit AMD- oder Intel-Pro­zes­so­ren und mi­nu­ten­ge­nau­er Ab­rech­nung
• vServer: Vir­tua­li­sie­rung auf höchstem Niveau – für Un­ab­hän­gig­keit und Si­cher­heit

Die Server un­ter­schei­den sich nicht nur in der Aus­stat­tung, sondern auch im Ab­rech­nungs­mo­dell. Während ein vServer immer mit mo­nat­li­chen Fixkosten verbunden ist, werden Dedicated Server mi­nu­ten­ge­nau ab­ge­rech­net. Wenn man Res­sour­cen bei diesen Modellen freigibt, sinken auch die Kosten. Egal ob Spei­cher­platz, Ar­beits­spei­cher oder die Anzahl der Pro­zes­sor­ker­ne – Sie buchen nur so viele Res­sour­cen, wie Sie auch wirklich benötigen.

Tutorial: Streaming-Server ein­rich­ten

Ihren eigenen Server für HTTP Live Streaming können Sie in wenigen Schritten selbst ein­rich­ten. Die benötigte Software dafür steht frei im Internet zur Verfügung. In diesem Beispiel benutzen wir einen Windows-Server mit NGINX-Software.

Schritt 1: Server-Ver­bin­dung her­stel­len

Um auf Ihrem Server arbeiten zu können, müssen Sie zunächst eine Ver­bin­dung zu diesem aufnehmen. Bei IONOS loggen Sie sich dafür in Ihr Be­nut­zer­kon­to ein und rufen dann das Cloud Panel auf (dieses Feature finden Sie im Bereich „Server & Cloud“). Unter dem Punkt „Remote-Desktop-Ver­bin­dung“ gibt es einen Download-Link. Klicken Sie diesen an, um die für die Ver­bin­dung be­nö­tig­ten Daten her­un­ter­zu­la­den.

Unter Windows können Sie die her­un­ter­ge­la­de­ne Datei einfach per Dop­pel­klick starten und gelangen dann in das Programm „Remote-Desktop-Ver­bin­dung“. Dort müssen Sie nur noch das Passwort eingeben, das Sie ebenfalls im Cloud Panel finden. Es öffnet sich ein Fenster, das den Desktop des Servers zeigt.

Close

Schritt 2: NGINX in­stal­lie­ren

Für das HTTP Streaming verwendet man einen ge­wöhn­li­chen Webserver auf Basis von NGINX. Da die Standard-Version von NGINX das für Streaming er­for­der­li­che RTMP-Modul nicht be­inhal­tet, benötigen Sie entweder eine speziell vor­kon­fi­gu­rier­te NGINX-Version mit in­te­grier­tem RTMP-Modul oder Sie müssen das Modul selbst kom­pi­lie­ren. Al­ter­na­tiv können Sie auf vor­ge­fer­tig­te Windows-Builds zu­rück­grei­fen, die RTMP bereits enthalten.

Entpacken Sie das Software-Paket an einen Ort Ihrer Wahl, öffnen Sie dann die Windows-Ein­ga­be­auf­for­de­rung oder die Windows Power­Shell und na­vi­gie­ren Sie zum neu an­ge­leg­ten NGINX-Ordner. Mit folgendem Befehl starten Sie den Webserver:

start nginx

Sie werden zunächst keine Ver­än­de­rung fest­stel­len. Um zu über­prü­fen, ob der Server tat­säch­lich funk­tio­niert, können Sie in einem Browser Ihre eigene IP-Adresse aufrufen. Hier sollte nun eine Nachricht des Web­ser­vers zu sehen sein. Beachten Sie, dass damit zunächst nur der Webserver selbst läuft. Die Streaming-Funk­tio­na­li­tät wird erst durch die an­schlie­ßen­de Kon­fi­gu­ra­ti­on aktiviert.

Schritt 3: Kon­fi­gu­ra­ti­on anpassen

Im nächsten Schritt müssen Sie die Kon­fi­gu­ra­ti­on des Web­ser­vers anpassen. Im ent­spre­chen­den Ordner sollten Sie die Datei „nginx.conf“ finden. An deren Ende fügen Sie folgenden RTMP-Teil ein:

rtmp {
server {
listen 1935;
chunk_size 4000;
application show {
live on;
hls on;
hls_path C:/nginx/hls/;
hls_fragment 3;
hls_playlist_length 60;
deny play all;
}
}
}

Den Pfad für Ihren HLS Stream können Sie selbst wählen. Auch der Name der application (hier show) ist ganz Ihnen über­las­sen. Wichtig ist nur, dass Sie die Kon­fi­gu­ra­ti­on auch an anderen Stellen kon­se­quent wei­ter­be­nut­zen.

Außerdem müssen Sie be­stehen­de HTTP-Ein­stel­lun­gen im bereits vor­han­de­nen http {}-Block der Kon­fi­gu­ra­ti­ons­da­tei ergänzen:

http {
include       mime.types;
default_type  application/octet-stream;
sendfile        off;
server_names_hash_bucket_size 128;
## Start: Timeouts ##
client_body_timeout   10;
client_header_timeout 10;
keepalive_timeout     30;
send_timeout          10;
keepalive_requests    10;
## End: Timeouts ##
server {
listen       80;
server_name  localhost;
location /hls {
add_header Cache-Control no-cache;
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /nginx/;
}
}

Speichern Sie die Datei und starten Sie den Webserver neu. Am ein­fachs­ten geht das, indem Sie im Task-Manager den oder die Prozesse von NGINX stoppen und den Server dann erneut per Befehl starten.

Schritt 4: Port freigeben

Damit Ihr Stream abgerufen werden kann, müssen Sie einen Port freigeben. Bei IONOS geht auch das über das Cloud Panel. In den Firewall-Ein­stel­lun­gen (unter „Netzwerk“) müssen Sie einen neuen Eintrag anlegen und TCP-Port 1935 freigeben. Für HTTP sollten Sie zudem Port 80 freigeben, falls Ihr Server diesen Port nicht ohnehin bereits frei­ge­ge­ben hat. Diese beiden Ports haben Sie auch zuvor in die Kon­fi­gu­ra­ti­ons­da­tei von NGINX ein­ge­tra­gen.

Close

Schritt 5: HTTP Live Streaming starten

Für einen Live-Stream benötigen Sie noch die passende Software. Beliebt bei Streamern ist vor allem die Open Broad­cas­ter Software (OBS). Dort tragen Sie die Server-Adresse sowie einen Stream-Key ein:

Server:
rtmp://<IP-Adresse>/show
Stream-Key:
test

Sie müssen an dieser Stelle die IP-Adresse des Servers eintragen. Diese finden Kundinnen und Kunden von IONOS bei­spiels­wei­se im Cloud Panel. Für Test­zwe­cke können Sie auch „localhost“ statt der IP-Adresse eintragen. Der gewählte Stream-Key bestimmt auch den Namen der erzeugten HLS-Dateien. Im Beispiel ist der Stream an­schlie­ßend unter /hls/test.m3u8 er­reich­bar.

Neben Tools wie OBS können Sie Ihren Stream auch direkt über FFmpeg an den Server senden. FFmpeg übernimmt dabei die Kodierung und Über­tra­gung des Vi­deo­streams. Das ist besonders nützlich, wenn Sie:

• au­to­ma­ti­sier­te Streams erstellen möchten
• eigene Vi­deo­quel­len ver­ar­bei­ten
• mehrere Qua­li­täts­stu­fen erzeugen wollen

Ein einfaches Beispiel:

ffmpeg -re -i input.mp4 -c:v libx264 -c:a aac -f flv rtmp://<IP-Adresse>/show/test

Dabei wird das Ein­gangs­vi­deo in ein strea­ming­fä­hi­ges Format um­ge­wan­delt und an den RTMP-Server gesendet.

Schritt 6: Stream auf Website in­te­grie­ren

Sie können Ihren Stream nun bereits über einen Medien-Player wie VLC abrufen. HLS macht es aber möglich, den Stream auch über eine Website an­zu­bie­ten. Dafür müssen Sie entweder eine be­stehen­de Website anpassen oder ein neues HTML-Dokument erstellen. Der NGINX-Webserver kommt bereits mit einem HTML-Dokument: „index.html“. Dort tragen Sie folgenden Quelltext ein:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HLS</title>
<link href="js/video-js.css" rel="stylesheet">
<script src="js/video.min.js"></script>
<script src="js/videojs-http-streaming.js"></script>
</head>
<body>
<div style="text-align: center;">
<video-js id="live_stream" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" autoplay width="1280" height="720" poster="/poster.jpg">
<source src="/hls/test.m3u8" type="application/x-mpegURL">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video-js>
<script>
var player = videojs('live_stream');
player.play();
</script>
</div>
</body>
</html>

Es handelt sich hierbei um eine ru­di­men­tä­re Website, die aus­schließ­lich den Player Video.js mit Ihrem Stream anzeigt. Wenn Sie den Stream anderen zur Verfügung stellen wollen, sollten Sie noch zu­sätz­li­che Inhalte einbauen und die Website an­spre­chen­der gestalten – z. B. per CSS. Oder Sie bauen den Teil in eine be­stehen­de, bereits aus­ge­schmück­te Website ein. Wichtig ist, dass der Pfad zu den Video-Dateien korrekt angegeben ist: z. B. <source src="https://www.ionos.at/digitalguide/hls/test.m3u8" type="application/x-mpegURL">. Wenn Sie Ordner oder Dateien anders benennen wollen, müssen Sie das auch hier anpassen.

Damit der Player funk­tio­niert, benötigen Sie noch die passenden Ja­va­Script- und CSS-Dateien. Diese finden Sie im of­fi­zi­el­len GitHub-Re­po­si­to­ry von Video.js. Legen Sie diese in denselben Un­ter­ord­ner, in dem auch die HTML-Dokumente liegen. Nun ist ein Video-Player mit Ihrem Stream auf der Website sichtbar.