Aktualisiert am: 13.10.2022, geschrieben von Marco
Artikel Bild
Bild
RTSP-Stream in eine Webseite einbinden

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 zu Nutze.

Den Artikel gibt es auch als Video:

Zum Inhaltsverzeichnis springen

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 ähnliches Webeditoren.
  • ODER: Du erstellst eine eigene HTML-Datei, die du auf deinen Server hochlädst.
  • Die Details zum HTML-Code gibt es im Artikel
Zum Inhaltsverzeichnis springen

Den RTSP-Stream per VLC mit http konvertieren

Stream in VLC über HTTP streamen 

Öffne VLC:

  1. Wähle Im Menü "Medien", Wähle "Netzwerkstream öffnen",
  2. Klicke den Tab "Netzwerk" an,
  3. Trage die RTSP oder Stream-URL ein. Das kann auch eine andere Videoadresse sein. Weiter,
  4. Wähle HTTP und klicke hinzufügen,
  5. Port und Pfad kann so gelassen werden. Weiter,
  6. Wähle Theora + Vorbis als Codec. Du kannst auch WebM wählen, aber prüfe, dann, ob das in allen Browsern funktioniert.
  7. 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 ein Kreis.
  8. Trage die Auflösung deiner Kamera ein. Skalierung bleibt 1.
  9. 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.

 

Zum Inhaltsverzeichnis springen

Der HTML Code - HTML5 Videotag

Prüfen, ob der VLC-Stream geladen lokal 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.

Zum Inhaltsverzeichnis springen

Ports im Router 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.

Zum Inhaltsverzeichnis springen

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 und dort steht ganz oben eine Nummer, das ist deine aktuelle IP. Beispielsweise 91.23.22.1. Mit der IP kannst du jetzt erst einmal alles testen. Funktioniert das, dann richtest du als Nächstes eine DynDNS ein und ersetzt die IP mit deiner DynDNS-Adresse. Beispielsweise "vogelhaus993.dyndns.org".

Zum Inhaltsverzeichnis springen

DynDNS einrichten

Die DynDNS benötigst du, damit du nicht jeden Tag die IP austauschen musst. Die wechselt im Normalfall nämlich täglich! In der 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?

Zum Inhaltsverzeichnis springen

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>

Speichern und jetzt kann das Video angezeigt werden.

Zum Inhaltsverzeichnis springen

Der VLC-Stream ruckelt oder puffert dauernd!

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

Zum Inhaltsverzeichnis springen

Videokodierung

  • Passe zuerst die KB/s und Bildwiederholungsfrequenz an. Das war bei mir ausschlaggebend.
Zum Inhaltsverzeichnis springen

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.
Zum Inhaltsverzeichnis springen

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".
Zum Inhaltsverzeichnis springen

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.

Kategorie:

Über mich

Bild
Hallo

Ich bin Marco und ich teste seit Jahren Überwachungskameras und schreibe die Artikel auf dieser Seite. Links zu Onlineshops sind sogenannte Affiliatelinks und wenn du darüber etwas kaufst, so erhält diese Seite eine kleine Werbevergütung. Der Endpreis ändert sich dabei nicht!

Weitere Infos über mich und wie ihr das Projekt unterstützen könnt.