Wie man einen Stream auf der eigenen Website einbettet

Ein fertiger Videoplayer für Browser und Mobilgeräte

Ein einfacher RTSP-Link lässt sich nicht direkt auf einer Webseite abspielen. rtsp.me empfängt den Stream der IP-Kamera, optimiert ihn für die Betrachtung über das Internet und stellt fertigen Player-HTML-Code bereit.

Fügen Sie den Code zu Ihrer Website hinzu — sobald die Seite veröffentlicht ist, können Besucher den Stream öffnen, ohne eine gesonderte Software zu installieren.

Player-Code erhalten

Warum RTSP nicht im Browser funktioniert

RTSP dient der Steuerung von Streaming-Video, aber moderne Browser können das Protokoll nicht direkt abspielen. Fügen Sie einen RTSP-Link in HTML ein oder öffnen Sie ihn als gewöhnliche Adresse, erscheint kein Video auf der Seite.

Um ihn im Web anzuzeigen, muss der Stream empfangen, in ein kompatibles Format umgewandelt und dem Zuschauer über einen Web-Player bereitgestellt werden. Das ist die Aufgabe, die rtsp.me übernimmt.

IP-Kamera → RTSP → rtsp.me → Web-Player → Website-Besucher
Platzieren Sie niemals den ursprünglichen RTSP-Link der Kamera in öffentlichem HTML. Er kann die öffentliche Adresse, den Login und das Passwort der Kamera enthalten.

Was Sie erhalten

Sie müssen keinen eigenen Player entwickeln oder ein separates Videokonvertierungssystem betreiben.

Schritt 1. Stream vorbereiten

Fügen Sie zunächst die IP-Kamera bei rtsp.me hinzu und warten Sie, bis das Video erfolgreich startet. Wenn die Kamera noch nicht angeschlossen ist, folgen Sie der Anleitung „Wie man einen Livestream auf einer Website erstellt“.

  1. Öffnen Sie rtsp.me und melden Sie sich bei Ihrem Konto an.
  2. Wählen Sie die von Ihnen angeschlossene Kamera aus.
  3. Stellen Sie sicher, dass das Bild verfügbar ist und der Stream stabil läuft.
  4. Öffnen Sie die Einbettungseinstellungen oder den Player-Code.

Schritt 2. HTML-Code erhalten

rtsp.me erzeugt für den ausgewählten Stream ein fertiges HTML-Fragment. Kopieren Sie es vollständig, ohne die Player-Adresse oder die Dienstparameter zu ändern.

Kamera bei rtsp.me → Player-Code → HTML-Seite

Der Code funktioniert auf einer einfachen HTML-Website, in einer CMS-Vorlage oder im benutzerdefinierten HTML-Block eines Website-Baukastens, sofern die Plattform das Einbetten externer Player erlaubt.

Beispiel für HTML-Code

<iframe
  src="https://rtsp.me/embed/WKZb7jUsUw5T9N4f/"
  style="width:100%; aspect-ratio:4/3; border:0;"
  title="RTSP streaming player"
  allow="fullscreen; autoplay"
  allowfullscreen>
  Iframes werden nicht unterstützt. Stream-Player von <a href="https://rtsp.me/"
    title="RTSP-Video-Streaming-Dienst">rtsp.me</a>
</iframe>

Ihr funktionierender Code enthält die Adresse Ihres eigenen Streams. Ersetzen Sie sie nicht durch die Demonstrations-ID WKZb7jUsUw5T9N4f.

So sieht der eingebettete Player aus

Schritt 3. Code platzieren

  1. Öffnen Sie die Seite, auf der der Stream erscheinen soll.
  2. Wechseln Sie in den HTML-Bearbeitungsmodus oder fügen Sie einen Block für eingebetteten Code hinzu.
  3. Fügen Sie den Player-Code an der gewünschten Stelle ein.
  4. Speichern und veröffentlichen Sie die Seite.
  5. Prüfen Sie, ob das Video im Browser auf Desktop und Smartphone startet.

Sobald die veröffentlichte Seite lädt, verbindet sich der Player mit rtsp.me und beginnt mit der Wiedergabe des verfügbaren Streams.

Manche Content-Management-Systeme entfernen eingebettete Elemente aus dem HTML aufgrund ihrer Sicherheitsregeln. Erlauben Sie in diesem Fall das Einbetten für die vertrauenswürdige Domain, oder bitten Sie Ihren Entwickler, den Code der Seitenvorlage hinzuzufügen.

Browser und Mobilgeräte

rtsp.me optimiert den Quellstream nicht nur für Desktop-Browser, sondern auch für Mobilgeräte. Ein Besucher muss keine RTSP-Betrachtungssoftware installieren oder Kamerazugangsdaten eingeben.

Der responsive Player kann in einen Seitencontainer eingebettet werden, sodass sich seine Breite an den Bildschirm anpasst. Prüfen Sie nach der Veröffentlichung sowohl Hoch- als auch Querformat auf einem Smartphone sowie die Seite über eine langsame mobile Verbindung.

Die Wiedergabequalität hängt auch von den Kameraeinstellungen und der am Standort verfügbaren Upload-Geschwindigkeit ab. Empfehlungen finden Sie auf der Seite „Empfohlene Einstellungen für IP-Kameras“.

Besucherstatistiken

Der Stream-Eigentümer hat Zugriff auf Besucherstatistiken. Sie helfen Ihnen, das Interesse des Publikums einzuschätzen und zu verfolgen, wie der Player auf der Website genutzt wird.

Die Statistiken sind in der rtsp.me-Oberfläche verfügbar. Welche Kennzahlen angezeigt werden, kann von den Stream-Einstellungen und dem genutzten Tarif abhängen.

Sichere Einbindung über PHP

Einfacher HTML-Code eignet sich für einen öffentlichen Stream. Ist das Video nur für registrierte Klienten, Mitarbeiter oder Kunden bestimmt, kann der Player über serverseitigen PHP-Code eingebunden werden.

In diesem Aufbau prüft Ihr Server zunächst die Berechtigungen des Nutzers und stellt ihm anschließend einen eindeutigen Player-Link aus. Der Link wird für jeden Besucher separat erstellt und nicht dauerhaft im öffentlichen HTML der Seite gespeichert.

Anmeldung auf Ihrer Website → PHP auf dem Server → eindeutiger Link → Player des Nutzers
  1. Der Nutzer meldet sich in seinem Konto auf Ihrer Website an.
  2. Der PHP-Code prüft, ob die Ansicht für ihn erlaubt ist.
  3. Der Server erstellt einen persönlichen Link anhand der rtsp.me-Integrationsparameter.
  4. Die Seite übergibt den Link nur für diesen Nutzer an den Player.

Ein Vergleich der PHP-Integration mit erlaubten Domains, einem Passwort, IP-Sperrung und kontobasiertem Zugriff findet sich in der Anleitung „Wie man einen Stream vor dem Kopieren schützt“.

Geheime Integrationsparameter dürfen nur auf dem Server aufbewahrt werden. Platzieren Sie sie nicht in JavaScript, öffentlichem HTML oder Ihrem Website-Repository. Entnehmen Sie den genauen PHP-Code und die Ausstellungsparameter der Dokumentation oder den Einstellungen Ihres rtsp.me-Kontos.

Häufig gestellte Fragen

Kann ich einen RTSP-Link direkt auf einer Seite platzieren?
Nein. Moderne Browser spielen RTSP in der Regel nicht direkt ab. Verwenden Sie den fertigen rtsp.me-Web-Player-Code.
Wann beginnt der Stream zu funktionieren?
Ist die Kamera bereits angeschlossen und bei rtsp.me verfügbar, kann der Player starten, sobald der Code hinzugefügt und die Seite veröffentlicht wurde.
Funktioniert der Player auf einem Smartphone?
Ja. Der Stream und der Player sind für moderne Browser und Mobilgeräte optimiert.
Wo kann ich die Statistiken einsehen?
Besucherstatistiken für den Stream stehen dem Eigentümer in der rtsp.me-Oberfläche zur Verfügung.
Wie schließe ich den Stream für Außenstehende?
Nutzen Sie die serverseitige PHP-Integration: Ihre Website prüft den Nutzer und stellt ihm einen eindeutigen Player-Link aus. Die geheimen Parameter bleiben auf dem Server.

Bringen Sie den Stream auf Ihre Website

Schließen Sie die Kamera bei rtsp.me an, holen Sie sich den fertigen Player-Code und fügen Sie ihn auf der gewünschten Seite hinzu.

Zu rtsp.me