markierten Links sind Affiliate-Links. Kaufst über die Links ein Produkt so erhalte ich eine Vergütung. Für dich ändert das am Endpreis absolut nichts!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.
- Vorbereitungen
- Den RTSP-Stream per VLC mit http konvertieren
- Der HTML-Code und der HTML5 Videotag
- Ports im Router freigeben
- So findest du deine aktuelle IP heraus
- DynDNS einrichten
- Einbinden des Videostreams in WordPress, Drupal oder Webeditoren
- Der VLC-Stream ruckelt oder puffert dauernd!
- Lösung für Profis
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
Ö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.
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
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.
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.
<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.
Anleitung?
Falls du einen Server laufen hast, dann kannst du VLC auch über die Konsole starten und dort eine permanente Streamkonvertierung laufen lassen.
Mit freundlichen Grüßen
Frank I.
Stimmt. Das habe ich nicht…
Stimmt. Das habe ich nicht integriert, weil das für viele nicht so praktikabel ist. Nutze selbst Linux Manjaro.