RTSP-Stream in eine Webseite einbinden - Mit VLC

Ich habe schon viele Experimente durchgeführt, um den Livestream eines Videos in eine Webseite einzubinden. Das geht unter anderem recht einfach mit Youtube und OBS-Studio.

Heute zeige ich dir allerdings, wie du VLC dazu benutzen kannst, einen RTSP-Stream an eine Webseite zu senden. Denn VLC kann „streamen“ und das machen wir uns zunutze.

Den Artikel gibt es auch als Video:

Vorbereitungen

Du benötigst Folgendes:

Den kostenlosen VLC-Player: https://www.videolan.org.
Die Möglichkeit den Quellcode deine HTML-Seite zu bearbeiten. WordPress, Drupal oder ähnliche Webeditoren.
ODER: Du erstellst eine eigene HTML-Datei, die du auf deinen Server hochlädst.
Die Details zum HTML-Code folgen im Artikel.

Den RTSP-Stream per VLC mit http konvertieren

Infografik: Stream in VLC über HTTP streamen — Stream in VLC über HTTP streamen

Öffne deinen VLC-Player:

Wähle im Menü oben „Medien“ und wähle im ausgeklappten Menü „Netzwerkstream öffnen“,
Klicke den Tab „Netzwerk“ an,
Trage die RTSP oder Stream-URL ein. Das kann auch eine andere Videoadresse sein. Klicke „Weiter“,
Wähle HTTP und klicke „hinzufügen“,
Port und Pfad können so belassen werden. Klicke „Weiter“,
Wähle Theora + Vorbis als Codec. Du kannst auch WebM wählen, aber prüfe dann später, ob das Video in allen Browsern lädt!
Klicke den Tab „Videocodec an“. Setze hier die Bitrate und die Bildwiederholungsrate fest. Sind diese Werte zu hoch, dann kann es sein, dass das Video dauernd nachlädt. Dabei erscheint dann dauernd ein Kreis im Bild.
Trage die Auflösung deiner Kamera ein. Die Skalierung belässt du auf dem Wert 1.
Fertig, klicke auf STREAM.

Die Bitrate legt die Qualität des Videos fest. Je höher der Wert, desto mehr Bandbreite ist nötig. Die Bildwiederholungsrate legt fest, wie flüssig das Videobild ist.

Der HTML-Code und der HTML5 Videotag

Prüfen, ob der VLC-Stream lokal geladen wird.

Um zu testen, ob alles funktioniert, legst du jetzt lokal eine HTML-Seite an, „webcam.html“, mit folgendem Inhalt.

<html>
<head></head>
<body>
<video width="1280" height="720" controls autoplay>
<source src="http://localhost:8080">
Your browser does not support the video tag.
</video>
</body>
</html>

Öffne diese Datei nun in Firefox oder einem Internetbrowser deiner Wahl. Drücke Play und warte, ob das Videobild geladen wird. Wird es geladen, so kommen wir zum nächsten Schritt.

Ports im Router freigeben

Port in der Fritzbox freigeben — So gibst du den Port in der Fritzbox frei

VLC nutzt als Standard für den Stream den Port 8080. Diesen Port müssen wir freigeben, da der Router diesen im Normalfall blockiert. Wie du Ports freigeben kannst, erkläre ich dir in einem weiteren Hilfeartikel mit Video.

So findest du deine aktuelle IP heraus

„localhost:8080“ kannst du nicht in der HTML-Datei stehen lassen, das funktioniert nur auf deinem Rechner. Wir wollen das Videobild aber auf einer Webseite, für jeden sichtbar, teilen.

Zum ersten Testen ersetzt du localhost durch deine aktuelle IP. Die kannst du ganz einfach herausfinden, in dem du www.whatsmyip.org aufrufst. Dort steht ganz oben eine Nummer und das ist deine aktuelle IP. Beispielsweise 91.23.22.1.

Mit der IP kannst du jetzt erst einmal alles testen. Funktioniert alles, dann richtest du dir als Nächstes eine DynDNS ein und ersetzt die IP mit deiner DynDNS-Adresse. Beispielsweise „vogelhaus993.dyndns.org“.

DynDNS einrichten

Die DynDNS benötigst du, damit du nicht jeden Tag die IP austauschen musst. Diese wechselt im Normalfall nämlich täglich! In einer Fritzbox geht das sehr einfach.

Sehr einfach: Eine DynDns in der Fritzbox einrichten

Kann dein Router das nicht, dann schau dir mal folgenden Artikel an: Was ist eine DynDNS und wie funktioniert das?

Einbinden des Videostreams in WordPress, Drupal oder Webeditoren

Du musst die Quelltextansicht aktivieren und folgenden Text eingeben.

Info: Ersetze deineDynDNSAdresse mit deiner IP oder der DynDNSs, die du angelegt hast.

<video width="1280" height="720" controls autoplay>
<source src="http://deineDynDnsAdresse:8080">
Your browser does not support the video tag.
</video>

Speichere die Änderung und jetzt wird das Video auf der Webseite angezeigt.

Der VLC-Stream ruckelt oder puffert dauernd!

Falls dein Video dauernd ruckelt oder puffert, dann probiere Folgendes aus:

Videokodierung

Passe zuerst die KB/s und Bildwiederholungsfrequenz an. Das war bei mir ausschlaggebend.

Cache Einstellungen

Öffne die VLC-Einstellungen. Menü: „Werkzeuge -> Einstellungen“,
Klicke unten links auf „Alle“,
Gib oben in die Suche „Cache“ ein und klicke links auf Eingang/Codecs
Verdopple hier den Wert für Datei-Cachewert, Cachewert für Liveaufnahme, Disk-Cachewert und Cachewert für Netzwerk.

RTP

Öffne die VLC-Einstellungen. Menü: „Werkzeuge -> Einstellungen“,
Klicke unten links auf „Alle“,
Gib oben in die Suche „RTP“ ein und klicke links auf RTP/RTSP,
Setze den Haken bei „RTP über RTSP /TCP) benutzen“.

Lösung für Profis

Falls du einen Server laufen hast, dann kannst du VLC auch über die Konsole starten und dort eine permanente Streamkonvertierung laufen lassen.

Über den Autor

Marco Kleine-Albers testet seit Jahren Überwachungskameras und schreibt die Ratgeber auf dieser Seite.

So kannst du mich unterstützen und mehr über mich erfahren

Neuen Kommentar hinzufügen

100 % unabhängig und kostenlos, dank deines Klicks!

Kaufst du ein Produkt über einen Link, der mit einem markierten ist, dann erhalte ich eine kleine Provision. Für dich ändert sich der Endpreis dabei nicht!

MEHR ERFAHREN