IP Cam Snapshot als "Stream"

Jey Cee

Probleme

Viele IP Cams stellen keinen mjpeg Stream zur Verfügung und RTSP lässt sich nicht einfach im Browser darstellen.
Anmeldedaten in der URL werden aus Sicherheitsgründen bei manchen Browsern nicht mehr unterstützt, was zur folge hat das ein Snapshot/Stream nicht direkt in einem Widget dargestellt werden kann.
Snapshot in einem Widget mit Refresh kann nur auf einem Anzeige Gerät zuverlässig dargestellt werden.

Lösung
Statt das Bild direkt vom Anzeige Gerät laden zu lassen, lässt man es mit einem Script auf den ioBroker host Laden und schreibt es als base64 code in ein Objekt. Der Vorteil ist das man ein Dynamisches Abfrage Intervall des Snapshots hat und die Kamera nur eine Anfrage bearbeiten muss. Das Script lädt den nächsten Snapshot sobald der vorherige fertig ist.¹
Und das Widget holt sich das Bild aus dem Objekt, was deutlich schneller geht als wenn man es auf der Festplatte speichern würde und dann den Link aufruft.
Der zweite Vorteil ist man umgeht eventuelle Probleme mit dem Browser wenn Logindaten in der URL zum Snapshot sind.

¹Bei mir schaffe ich mit der IP Cam über WLAN, bei mäßigem Empfang, ein Bild pro Sekunde. Vorher waren es 2 pro Sekunde und sobald ein zweites Anzeige Gerät dazu kam 5 Sekunden. Gleichzeitig hat man nur auf einem Gerät ein Bild gehabt.

Als Widget habe ich das basic html verwendet:

[{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"<img src={javascript.0.Cam1_image} width=\"1280px\">"},"style":{"left":"208px","top":"206px","width":"1280px","height":"600px"},"widgetSet":"basic"}]

Hier das Skript:

/*Author: Jey Cee jey-cee@live.com; Version: 0.1.2; Datum: 05.10.2019*/

let objPath = 'cam'         //Der Pfad zu den Skript Objekten; Ergebnis: javascript.0.cam
let urlCam1 = 'http://127.0.0.1:8082/vis.0/main/P4290104.jpg';      //URL zum snapshot der IP Cam
let intervall = 2;      //Zeit intervall für die Abfrage; 0 = Dynamisch, 1-x = Zeit in Sekunden;

//Ab hier keine Änderungen mehr
createState(objPath + '.image', '', false, {type: 'string'});
createState(objPath + '.start', false, false, {type: 'boolean', role: 'switch'});

const request = require('request').defaults({ encoding: null });

on({id: 'javascript.0.' + objPath + '.start', val: true},
    function(){
        getSnap();
    }) 

 
function getSnap(){
    request.get(urlCam1, function (error, response, body) {
    if(error){
        log(error);
    }
    if (!error && response.statusCode == 200) {
        data = "data:" + response.headers["content-type"] + ";base64," + new Buffer(body).toString('base64');
        setState('javascript.0.' + objPath + '.image', data);
    }
    if(intervall === 0 && getState('javascript.0.' + objPath + '.start').val === true){
        getSnap();
    }else if(intervall !== 0 && getState('javascript.0.' + objPath + '.start').val === true){
        setTimeout(function(){
                getSnap();
        }, intervall * 1000);
    }
    
});
}

ACHTUNG: Bei Bildern mit hoher Auflösung (Datei Größe) und Dynamischen oder kurzem Intervall kann es Probleme mit der Objekt Übersicht im Admin geben.
Getestet habe ich es mit einem 5MB großen JPEG Bild auf dem Host selbst.

bahnuhr

Habs importiert.
Klappt einwandfrei.

Habe als Objekt ein "String" erstellt. Mit "Objekt" ging es nicht.

Schreib nochmal wie oft das Script durchlaufen wird und somit das Snapshot erzeugt wird.

Jey Cee

@bahnuhr sagte in IP Cam Snapshot als "Stream":

Schreib nochmal wie oft das Script durchlaufen wird und somit das Snapshot erzeugt wird.

Ewig, das läuft in einer Schleife.

@bahnuhr sagte in IP Cam Snapshot als "Stream":

Habe als Objekt ein "String" erstellt. Mit "Objekt" ging es nicht.

Danke für den Hinweis, hab es oben angepasst.

bahnuhr

@Jey-Cee sagte in IP Cam Snapshot als "Stream":

Ewig, das läuft in einer Schleife.

Ja, aber wie oft läuft die denn?

Jede sek. Oder alle 2 sek.
Oder permanent.
Das Objekt wird jedenfalls sehr oft aktualisiert.

Und wie stellt man die Aktualisierung ab?
Wenn man dies möchte.
Ich musste die Instanz stoppen und vorher das Script aus schalten.

Jey Cee

@bahnuhr es gibt kein festes Zeit intervall. Wenn das Bild geladen wurde wird sofort das nächste geladen.

Ich passe das Script an damit man es Stoppen kann und Aktualisiere es hier.

Jey Cee

Habe das Skript jetzt erweitert, Start(Stop) wurde eingebaut.
Außerdem lässt sich das Intervall jetzt fest einstellen, Standard (0) ist Dynamisch.

ACHTUNG: Bei Bildern mit hoher Auflösung (Datei Größe) und Dynamischen oder kurzem Intervall kann es Probleme mit der Objekt Übersicht im Admin geben.
Getestet habe ich es mit einem 5MB großen JPEG Bild auf dem Host selbst.

bahnuhr

@Jey-Cee sagte in IP Cam Snapshot als "Stream":

Standard (0) ist Dynamisch.

Super, jetzt hab ich verstanden.

Dann noch ne Frage.
wenn ich dies für ca. 10 Cams mache und alles auf dynamisch stelle wie ist das dann mit der performance.
Geht die ccu Belastung auf meinem Win Rechner dann stark nach oben (es wird ja ständig ein Bild Objekt geholt und gespeichert).

mfg
Dieter

Jey Cee

@bahnuhr das kann ich dir nicht sagen. Hab keinen Performance Test gemacht um eine Aussage darüber machen zu können.

Ich würde halt nach und nach eine Kamera dazu nehmen und paralell dazu die CPU Auslastung beobachten.

bahnuhr

@Jey-Cee

Musste dies ergänzen:
'javascript.0.' + objPath
anstatt
objPath

in den Zeilen: 26,28,30

Ansonsten lief das Script nicht.

mfg
Dieter

ChristianM

Ich habs jetzt mit verschiedenen Kamera´s und auch mit JPG´s von IoBroker probiert, aber funktioniert hat bisher leider nichts. Sieht jemand vielleicht gerade das Problem ? Muss man noch irgendwo etwas installieren ?

/*Author: Jey Cee jey-cee@live.com; Version: 0.1.1; Datum: 04.10.2019*/

 

let objPath = 'cam'         //Der Pfad zu den Skript Objekten; Ergebnis: javascript.0.cam

let urlCam1 = 'http://192.168.1.16:8082/adapter/daswetter/icons/tiempo-weather/galeria1/6.png';      //URL zum snapshot der IP Cam

let intervall = 5;      //Zeit intervall für die Abfrage; 0 = Dynamisch, 1-x = Zeit in Sekunden;

 

//Ab hier keine Änderungen mehr

createState(objPath + '.image', '', false, {type: 'string'});

createState(objPath + '.start', false, false, {type: 'boolean', role: 'switch'});

 

const request = require('request').defaults({ encoding: null });

 

on({id: 'javascript.0.' + objPath + '.start', val: true},

    function(){

        getSnap();

    }) 

 

 

function getSnap(){

    request.get(urlCam1, function (error, response, body) {

    if(error){

        log(error);

    }

    if (!error && response.statusCode == 200) {

        data = "data:" + response.headers["content-type"] + ";base64," + new Buffer(body).toString('base64');

        setState('javascript.0.' + objPath + '.image', data);

    }

    if(intervall === 0 && getState('javascript.0.' + objPath + '.start').val === true){

        getSnap();

    }else if(intervall !== 0 && getState('javascript.0.' + objPath + '.start').val === true){

        setTimeout(function(){

                getSnap();

        }, intervall * 1000);

    }

    

});

}

Jey Cee

@bahnuhr sagte in IP Cam Snapshot als "Stream":

Musste dies ergänzen:
'javascript.0.' + objPath
anstatt
objPath
in den Zeilen: 26,28,30
Ansonsten lief das Script nicht.

Kommisch, bei mir lief es genau so. Aber gut das kann ich anpassen dann ist es sicher.

@ChristianM hast du start auf true gesetzt? Sonst weiss ich jetzt auch nicht.

Glasfaser

@ChristianM

Nimm mal dieses Widget .

Wichtig , das Bild ist im Vis Editor nicht sichtbar !!!

[{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"<img src={javascript.0.cam.image} width=\"1280px\">"},"style":{"left":"208px","top":"205px","width":"1280px","height":"600px"},"widgetSet":"basic"}]

@Jey-Cee

Bei mir funktioniert keine einzige Hikvision Kameras , ich denke mal das liegt am Pfad

http://user:pass@192.168.xx.xx/streaming/channels/1/picture

Jey Cee

@Glasfaser wird etwas in den State image geschrieben?
Gibt es eine Fehlermeldung im Log?

Glasfaser

@Jey-Cee sagte in IP Cam Snapshot als "Stream":

@Glasfaser wird etwas in den State image geschrieben?

Ja …wird geschrieben .

Gibt es eine Fehlermeldung im Log?

Nein , keine Fehlermeldung .

Ein Bilderlink funktioniert , nur der Link meiner Kameras nicht !?

Der State wird auch Aktualisiert ( 5 Sekunden eingestellt ) :

Jey Cee

@Glasfaser nur nochmal zur Sicherheit es wird nichts geschrieben bei den cams?

Dann geht das mit den Logindaten am Anfang der URL doch nicht. Muss anderst gelöst werden.

Ich bau das morgen um und müsstest es für mich testen, hab keine Cam die so einen Link verwendet.

Glasfaser

@Jey-Cee sagte in IP Cam Snapshot als "Stream":

@Glasfaser nur nochmal zur Sicherheit es wird nichts geschrieben bei den cams?

Doch siehe oben , ich habe extra den Sreenshot mit den Daten erstellt wo man den Base Code links erkennt der erstellt wird .

@Jey-Cee sagte in IP Cam Snapshot als "Stream":

Ich bau das morgen um und müsstest es für mich testen, hab keine Cam die so einen Link verwendet.

Wäre sehr Nett ….

Jey Cee

@Glasfaser dann verstehe ich das problem nicht. Wenn der Base64 geschrieben wird bekommt er daten von der cam.

Glasfaser

@Jey-Cee

Ich habe vier Hikvison Cam´s und bei keiner kommt eine Bild , nur wenn ich ein Bilderlink einfüge im Script.

Das ist schon richtig das er was erstellt , nur kann ich als Laie nicht erkennen ob es ein Bild ist oder eine erzeugte Fehlermeldung als Base64.

Ist auch nicht so wichtig … das es bei mir nicht funktioniert !!!

Jey Cee

@Glasfaser naja ist es schon immerhin ist es möglich das andere genau das gleiche haben.

Kannst du im skript mal ein log für den body direkt nach request.get einbauen? Dann sehen wir was von der cam kommt.

Glasfaser

@Jey-Cee

Können schon … kannst du mir bitte eine Vorlage dazu geben !?

NEWS

IP Cam Snapshot als "Stream"

Support us

1.5k
Online

30.4k
Users

76.7k
Topics

1.2m
Posts

NEWS

IP Cam Snapshot als "Stream"

Support us

1.5kOnline

30.4kUsers

76.7kTopics

1.2mPosts

1.5k
Online

30.4k
Users

76.7k
Topics

1.2m
Posts