Livevideo auf Website streamen mit IN-9420 2K+ - Bitte um Workflow DynDNS etc.

Liebe Forenmitglieder und Instar Support Team,

es geht (womöglich mal wieder) um die Möglichkeit das Livevideo einer Kamera auf einer Website einzubinden. In Betrieb ist eine IN-9420 2K+ und ich finde nirgendwo eine richtige Anleitung, ob und wenn wie das überhaupt möglich ist.

Die Kamera ist in einem Standard IP4 Netzwerk integriert, Ports auf einer Fritzbox sind weitergeleitet und es gibt einen Free Account bei selfhost.de mit eingerichteter Domain.

Wie geht es jetzt aber nun weiter? Ich würde gerne den 720er Stream live auf einer Website zB. als ifram einbinden, aber wie realisiert man das denn nun genau? Wie bekomme ich das Livebild des Streams zu selfhost als aufrufbare Domain (welche Daten und Einstellungen müssen vorgenommen werden) und kann ich diese Domain dann als iframe überhaupt einbinden und wie sieht es mit den Zugangsdaten zum Abruf aus, können diese ausgelesen werden (Sicherheit) oder wird tatsächlich nur das Bild angezeigt oder ist das alles überhaupt gar nicht möglich?

Ich habe Erfahrung mit solchen Themen, Netzwerken und mein kein IT-Anfänger, aber egal was ich versuche zu recherchieren, es steht quasi überall etwas anderes und mir ist der Weg vom Kameralivebild im Netzwerk zu der DynDNS Domain nicht schlüssig. Aber was ich im eigenen Netzwerk streamen kann in einem Browserfenster muss ich doch auch irgendwie nach außen ins Internet streamen können, oder liege ich da falsch? Wie werden denn sonst Wettercams oder Touristencams realisiert? Benötige ich noch ein Device dazwischen, Rasberry oder PC oder geht das direkt von der Cam über den Router ins Web?

Fragen über Fragen, vielleicht kann jemand Licht ins Dunkel bringen? Vielen Dank vorab!

Hallo,

hattest Du mal im Instar Wiki nachgesehen?
Das hier dürfte wohl passen.
Grüße

Hallo und vielen Dank für den Link, das sieht tatsächlich interessant aus, auch wenns etwas kompliziert beschrieben ist… Die Frage ist nur: Wie bekomme ich denn zb. jetzt die Daten bwz. den Zugriff der Kamera zu einem Webserver um das dann mit so einem Fenster abzurufen?

Ich möchte quasi auf einer Website das Kamerabild als Wettercam (aktuelles Wetter am Standort) abbilden und ich dachte mir ich gehe so vor:

Den Kamerastream schicke ich per DynDNS an eine eigene Domain bei selfhost, dann ist ja das Bild schon mal im Netz. Von da aus habe ich ja dann eine URL mit dem Kamerastream, den ich dann auf der Website einbinden kann, zumindest war das so meine Idee. Aber irgendwie scheint das alles so kompliziert zu sein, dass ich schon dabei bin aufzugeben…

Portweiterleitung etc. ist ja immer nur dafür gut das ich von außen auf die Kamera (nicht nur den Stream, sondern mit Menü etc.) zugreifen kann, was ich ja gar nicht will, ich möchte nur den Videostream haben (Zugriff natürlich mit einem Benutzer und Passwort). Dafür muss es doch ne Möglichkeit geben, es gibt ja auch Wettercams usw., wie machen die das denn?

Aber ich suche weiter, vielleicht poste ich ja für andere die sowas realisieren möchten dann eine Lösung… Danke!

Hallo,

vielleicht gibt Dir dieser Thread noch ein paar hilfreiche Nebeninformationen:

Die Lösung kannst Du auf jeden Fall hier posten. Ich habe keine Website oder einen Webserver am laufen und kann wenig zu der Frage bzw. Lösung beitragen.
Grüße

Servus,

und nicht, daß Du an der falschen Stelle verzweifelst.

DynDNS schickt nichts ins Netz.
Mittels DynDNS wird Deine eigene WAN IP-Adresse, die sich öfters/ständig ändert, einem festen Domainnamen zugeordnet.
Unter diesem bist Du dann immer von extern erreichbar, ohne eben die WAN IP kennen zu müssen.
Und das lokale Gerät, auf welches Du dannn zugreifen möchtest, wird per Portweiterleitung verknüpft.

gruss

Hallöchen und vielen Dank für Deinen Beitrag,

ja, das mit den Ports und DynDNS habe ich mittlerweile wieder verstanden, war ne ganze Weile her. Grundsätzlich hat das alles ja nur halbwegs damit zu tun was ich vorhabe. Die Portweiterleitung sorgt für den Zugriff auf die Cam (und das Menü etc.) von extern und DynDNS “versteckt” quasi nur die Adresse.

Die Frage bleibt eben immer noch offen: Wie bekomme ich den Kamerastream auf eine Website? Schließlich kann ich ja das Kamerabild mit Apps öffnen (auch durch Ports), also muss es doch eine moderate Lösung geben für die “Veröffentlichung” des Videos, sei es nun als Livestream auf einer Plattform oder eben auf einer Website, das muss doch gehen.

Ein bisschen kam ich schon weiter, es gibt wohl Plugins auch für Wordpress etc., aber wie man nun tatsächlich das Video quasi dort hin schickt oder von dort abholt, das wird tatsächlich nirgendwo beschrieben und das ist etwas frustrierend. Ich suche tatsächlich noch nach Wettercam Anbietern, die realisieren das ja auch irgendwie und das an jeder Kamera mords Technik oder so dahinter hängt kann ich mir nicht vorstellen, das wäre ja viel zu teuer. Also wie greifen die das Bildmaterial ab und fügen das auf ihren Seiten ein?

Herzliche Grüße an alle Interessierten

Generell funktioniert es so. Der Videostream, den man in die WebUI sieht ist ein WebSocket Stream. Um die Verbindung von außen herzustellen musst du den HTTP bzw. HTTPS Port deiner Kamera freigeben und in deiner Website via JavaScript eine Websocket Verbindung herstellen.

Sieht dann ungefähr so aus

var ws = new WebSocket('ws://user:password@mycamera.com'); // wss://user:password@mycamera.com wenn über https

ws.onmessage = function(event) {
  // Der Code hier wird jedes mal aufgerufen wenn neue Daten von der Kamera kommen
 var msg = event.data;
 if (typeof msg === 'string') {
   // Event Daten wie z.B. Alarm
 } else {
   // Audio/Video Daten
   // An der Stelle müssen die Daten in den Player geschoben werden
 }
}

Bitte nicht den richtigen User dafür verwenden, sondern am Besten einen neuen User erstellen der nur den Stream abrufen kann und sonst keine weiteren Rechte hat.

Gab hier ein komplettes Beispiel: GitHub - mpolinowski/html_ws_client: Websocket client for the INSTAR IP camera videostream

Ich kann, sobald ich Zeit hab, auch versuchen eine Copy-Paste Lösung zusammenzubauen.

1 „Gefällt mir“

Wow, vielen Dank für diesen Post! Es ist schon mal gut, dass das überhaupt so funktioniert wie ich mir das vorstelle. Ich würde mich gerne erkenntlich zeigen für einen “fertigen Code” den ich tatsächlich einfach einfügen kann und der so browserneutral wie möglich ist, weil ich langsam echt unter Druck gerate was diese Lösung angeht. Wenn ich was dazu beitragen kann, bitte Bescheid geben!

Hab eine erste Version auf Github geladen:

Damit kann man recht einfach direkt ein video Element hinzufügen, dann sollte es gehen.
Im Moment funktioniert das nicht mit dem IPhone, da muss ich noch nen Fallback dafür einbauen.

Wenn man die Verbindung direkt mit der Kamera aufbaut, dann gibt es außerdem die Einschränkung, dass nur max 3 Personen gleichzeitig den Stream abgreifen können. Als Workaround müsste man irgendeinen Proxy dazwischenschalten, da überleg ich mir evtl. noch was.

Dass hier User und Passwort direkt hinterlegen muss, ist natürlich doof, werd fürs nächste Update Pushen Token Authentifizierung zu ermöglichen. Bitte auf keinen Fall hier den Admin hinterlegen, sondern immer einen Extra User mit eingeschränkten Rechten verwenden.
Fürs übernächste Update ist geplant Youtube und HLS Streaming zu ermöglichen, dann ist die Max Viewer Einschränkung auch keine Sache mehr.

1 „Gefällt mir“

Guten Abend,

ich habe das Skript mal ausprobiert, schaut soweit ganz gut aus, aber leider hat es bei mir nicht funktioniert, ich denke ich habe die falschen Variablen eingetragen was den Stream betrifft oder so etwas in der Art. Zudem wäre (zumindest meine Anforderung) ganz cool, wenn lediglich nur das Video ohne Playbutton oder andere Extras angezeigt wird, damit man auch nur dieses Video zB. auf einer Website einbauen kann. Vermutlich ist das aber auch nur eine Einstellung im Skript und kann alles ausgeblendet oder deaktiviert werden, oder?

Egal, ist ein guter Weg und eine super Lösung bisher, ich würde mich wie gesagt erkenntlich zeigen für eine “Einbaulösung”, soll nicht umsonst sein.

VG

Im Grunde ist es schon ne Einbaulösung.Was hast du bei Host genau eingetragen? Und wie ist die DynDNS & Port deiner Kamera? Durchgeleitet hast du ja alles schon, und von außen kommst du auf die Kamera, oder? Vergiss nicht das insecure Attribut zu setzen wenn du ne unverschlüsselte HTTP Verbindung verwendest (Port 80 bei Default). Ich denke den Playbutton kannst du entfernen indem du das controls Attribut aus dem video tag rausnimmst.

Moin! Nee, das habe ich schon alles beachtet und von außen komme ich an die Cam, ich probiere es noch mal mit klarem Verstand und werde noch mal einen Benutzer anlegen mit den passenden Rechten. Alles läuft über Secure und die Ports sind freigegeben. Controls ist ein guter Tipp, danke, werde ich ausprobieren.

Zwischendurch update ich das Script auch weiterhin. Hatte gestern irgendwann auch noch ein Problem mit SSL Verbindungen gefixt. Stell sicher, dass du dir da die neuste Version ziehst.

1 „Gefällt mir“

Hallo und frohes Halloween,

heute habe ich es noch mal probiert mit dem Skript und allen möglichen Versionen bezüglich der URL und was man eben so ändern kann, es kommt einfach kein Kamerastream, habe wirklich alles versucht und noch mal genau geprüft, Benutzer ausprobiert, Rechte, Ports… es funktioniert leider nicht, was kann man da falsch machen?

Wäre super wenn es eventuell noch Tipps gäbe, langsam gerate ich unter Lieferdruck. Vielen Dank vorab!

Ist die Seite öffentlich? Wenn du mir nen Link dazu gibst, kann ich mal drüberschauen.

Yep, siehe hier: INSTAR WebSocket Player

In der Konsole kommt der Fehler: `Uncaught SyntaxError: Failed to construct ‚WebSocket‘: The URL <….> is invalid`. Das liegt an dem & und # im Passwort, müsste URI encoded werden. Ich hab gerade ein Update gepusht damit das automatisch gemacht wird.

Außerdem musst du noch das insecure Attribut rausnehmen, weil du SSL verwendest. Und noaudio stattdessen hinzufügen, weil Audio anscheinend komplett deaktiviert ist, dann sollte es gehen.

1 „Gefällt mir“

Party on! Es geht, super, vielen lieben Dank! Nun schaue ich mal wie ich das so realisiere, dass ich das auf einem unbekannten Server hoste und das Video per iframe oder ähnliches einbinden kann. Könnte natürlich sein das sowas gar nicht geht, aber die Hoffnung stirbt zuletzt… Vielen Dank schon mal für diese tolle Lösung!

1 „Gefällt mir“