Bug in multimedia.image Widget

[Echo]

Hi,
wenn ich per multimedia.widget das Bild einer Kamera mit URL Parametern einbinde, fügt das Widget eine eindeutige ID an. Vermutlich damit das Bild jeweils neu geladen wird und nicht aus dem Cache kommt.

{{ multimedia.image('image1', 'http://meineip:port/snapshot.cgi?user=username&pwd=dashieristmeinpasswort', 'none', 10) }}

Das hier wird gerendert

<img id="room_Aussen-image1" data-widget="multimedia.image" src="http://meineip:port/snapshot.cgi?user=username&amp;amp;pwd=dashieristmeinpasswort?_=1416253380000">

Es müsste überprüft werden, ob schon URL Parameter vorhanden sind.

Gruß
René

[kingolli]

Den Fehler hat ich auch schon bemerkt, habs bei mir so gelöst. Zusätzlich habe ich noch einen weiteren Modus 'fill' eingebaut.

Sicherlich nicht die sauberste Lösung, aber wer es gebrauchen kann bitte schön...

**
* Displays a image witch is been reloaded after a given time
*
* @param unique id for this widget
* @param the path/url to the image
* @param the mode: 'none', 'corner', 'corner-bottom', 'fill' (optional, default 'none')
* @param the reload-time in duration-format (optional, default '10i')
*
* @see misc/fundamentals#Duration-Format
*/
{% macro image(id, src, mode, time) %}

	<img id="{{ uid(page, id) }}" data-widget="multimedia.image"
		{% if mode == 'corner' %}
			class="ui-corner-all"
		{% elseif mode == 'corner-bottom' %}
			class="ui-corner-bottom"
		{% elseif mode == 'fill' %}
			style="width: 100%"
		{% endif %}
		src="pages/base/pics/trans.png" />

	<script type="text/javascript">
		
		var ind = '{{ src }}'.indexOf('?');
	
		if(ind >0 ){
			$('#{{ uid(page, id) }}').attr('src', '{{ src }}&_=' + new Date().getTime());

			setInterval(function () {
				$('#{{ uid(page, id) }}').attr('src', '{{ src }}&_=' + new Date().getTime());
			}, new Date().duration('{{time|default("10i")}}'));
		} else {
			$('#{{ uid(page, id) }}').attr('src', '{{ src }}?_=' + new Date().getTime());

			setInterval(function () {
				$('#{{ uid(page, id) }}').attr('src', '{{ src }}?_=' + new Date().getTime());
			}, new Date().duration('{{time|default("10i")}}'));
		}
	</script>

{% endmacro %}

Grüße
David

[Echo]

Hi David,
Danke für das Teilen.

René

[bruepe]

Hallo zusammen, ich nehme hier dieses Thema mal auf. Ich habe das Problem, dass meine cgi nicht direkt das jpg ausgibt, sondern mit dem Parameter -getpic eine kleine Website in der die jpg als img eingebunden wird. Das wird dann durch das mutlimedia.image widget nicht angezeigt.

Wenn ich den Parameter weg lasse, dann generiert das cgi script folgende Ausgabe:
var path="/tmpfs/snap_tmpfs/20170716/IMG001/IMG_chn0_TIMER_MNG_20170716103542_035.jpg" Hat einer eine Idee wie ich das mutlimedia Widget so anpassen kann, dass er das durch die cgi generierte jpg im img tag anzeigt und beim reload durch das Widget die cgi nochmal neu ausführt?

Folgende Parameter sind auch noch möglich bei der cgi:
{-act set|list|snap} [-chn chnID] [-qval qval] [-pre presnap_num] [-name name] [-passwd passwd]

Vielen Dank und einen schönen Sonntag.

Ergänzung:

Ich habe dieses Script, welches das img aus der cgi lädt:

<script src="http://192.168.178.58:80/web/cgi-bin/hi3510/snap.cgi" type="text/javascript">
</script>
<img id="img" src="" name="WebCam3" align=bottom width="80%" height="99%" border=1>
<script type="text/javascript">
    document.getElementById("img").src = "http://192.168.178.58:80" + path;
</script>

Kann ich das mit dem Widget irgendwie kombinieren?

Widget:

{% macro image(id, src, mode, time) %}

<script src="http://192.168.178.58:80/web/cgi-bin/hi3510/snap.cgi" type="text/javascript">
</script>

    <img id="img" data-widget="multimedia.image"
        {% if mode == 'corner' %}
            class="ui-corner-all"
        {% elseif mode == 'corner-bottom' %}
            class="ui-corner-bottom"
        {% elseif mode == 'fill' %}
            style="width: 100%"
        {% endif %}
        src="pages/base/pics/trans.png" />

    <script type="text/javascript">
        var noCacheSrc ='{{ src }}';
        $('#{{ uid(page, id) }}').attr('src', noCacheSrc);
        setInterval(function () {
            var noCacheSrc ='{{ src }}';
            $('#{{ uid(page, id) }}').attr('src', noCacheSrc);
        }, new Date().duration('{{time|default("10i")}}'));

        document.getElementById("img").src = "http://192.168.178.58:80" + path;

    </script>

{% endmacro %}

eingebunden mit:

{% import "multimedia.html" as multimedia %}
 {{ multimedia.image('image1', 'http://192.168.178.58/web/cgi-bin/hi3510/snap.cgi', 'corner', '5s') }}

Das läuft leider nicht so wie ich es mit vorstelle. Ich würde mich über Hilfe freuen. Danke.

[smai]

Du scheinst eine Instar Kamera oder etwas ähnliches zu nutzen. Welches Modell denn genau?
Kannst du evtl. einfach die URL http://192.168.178.58/tmpfs/snap.jpg aufrufen wie im Beispiel unter https://www.instar.de/faq_cgi_hd?
Oder hat dein snap.cgi einen Parameter -getpic wie unter http://plug-view.com/faq/kann-ich-me...ebsite-nutzen/

[bruepe]

Eine Digitus ist das: DN-16043R2

Beim Aufruf von http://192.168.178.58/tmpfs/snap.jpg kommt ein 403 (forbidden)

Der Aufruf von http://192.168.178.58:80/web/cgi-bin...p.cgi?&-getpic geht astrein. Da wird wie oben erwähnt eine html Seite ausgegeben.

Ich hatte es auch ewig mit dem rtsp Stream probiert, aber nie wirklich zum laufen bekommen.

[smai]

Sorry, dass du bereits -getpic verwendest, hatte ich übersehen.

Die Kamera scheint ja recht zickig zu sein und auch die fehlende Dokumentation wird oft kritisiert.
Woher kennst du die aufgelisteten Parameter, ich habe nicht mal diese gefunden?

Mit dem Widget kombinieren lässt sich das kaum. Die URL sonstwie regelmässig per JavaScript abrufen, könnte zwar funktionieren, wird aber aufwändig.

Falls die Kamera wirklich keinen direkten Abruf eines jpeg unterstützt, wäre evtl. ein IFrame in der Visu eine Möglichkeit. Das IFrame lädst du dann per setInterval per document.getElementById('FrameID').contentWindow.l ocation.reload(true); regelmässig neu.

[bruepe]

Die Parameter gibt der Browser als Output wenn man falsche eingibt. daher habe ich die.

Ich habe schon einige Stunden mit googeln verbracht, aber nicht wirklich eine URL gefunden, die ein img ausgibt.
Der Weg von mir oben die beiden Scripte zu kombinieren ist demnach nicht möglich? Oder nur sehr schwer?

Mit dem iframe habe ich auch schon rumgedoktert:

        <iframe id="myiframe" src="http://192.168.178.58/web/cgi-bin/hi3510/snap.cgi?&-getpic" width="650px" height="362px" frameborder=0 scrolling=no></iframe>

<script type="text/javascript">
        window.setInterval(function() {
            reloadIFrame()
        }, 1000);

        function reloadIFrame() {
            console.log('reloading..');
            document.getElementById('myiframe').contentWindow.location.reload();
        }
</script>

Aber das geht irgendwie auch nicht. Siehst du mit deinem professionellen Auge vielleicht wieso?

[smai]

Was heisst denn "irgendwie auch nicht"? Was geschieht genau, wird das Bild gar nicht geladen oder wird es nicht aktualisiert?

[bruepe]

das bild, also die seite im iframe wird hervorragend angezeigt, aber es reloaded nicht

[bruepe]

SecurityError: Permission denied to access property "reload" on cross-origin object index.php:148
reloadIFrame
<anonym>

Kommt in der console

[smai]

Mhm, hatte ich schon befürchtet.

Dann halt der komplizierte Weg. Folgende könnte funktionieren, ist aber ungetestet:

    <img id="hi3510" class="ui-corner-all" src="pages/base/pics/trans.png" />
    <script type="text/javascript">
     (function() {
        var refreshImage = function() {
            $.get('http://192.168.178.58/web/cgi-bin/hi3510/snap.cgi', function(data) {
                eval(data);
                $('#hi3510').attr('src', path);
            });
        }
        refreshImage();
        setInterval(refreshImage, 5000);
    })();
    </script>

[bruepe]

Vielen Dank für deine Bemühungen. Aktuell kommt das:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf http://192.168.178.58/web/cgi-bin/hi3510/snap.cgi. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt).

Edit:
Ich habe gesehen, dass ein base href tag generiert wird und wohl daher die Abfrage einer URL eines anderen hosts nicht erlaubt ist. Allerdings finde ich nicht, wo dieser generiert wird.

[smai]

Soweit ich weiss, wird das base Tag von jQuery Mobile generiert. Aber ich bin mir nicht so sicher, ob dieses tatsächlich Einfluss hat auf Cross Origin.
Leider bin ich mit meinem Latein da auch am Ende. Da ich es ja nicht direkt nachvollziehen kann, befinde ich mich auch ziemlich im Blindflug.

[psilo]

Unterbinden Browser nicht per Default, wenn von einer anderen als der initial aufgerufenen IP/DNS Name JavaScript inkludiert wird (bzw. auch nur ein Call gegen eine externe IP gemacht wird), um XSS Attacken zu verhindern?

Ich erinnere mich ähnliches Fehlerbild mit meiner Cam gehabt zu haben - als ich die Optionen zum Steuern der Kamera auf Buttons gelegt habe und dort via Ajax direkt die CGIs der Kamera aufrufen wollte. Habe es ging dann umgebaut, dass ich auf dem gleichen System, wo auch meine SV läuft, Webservices implementiert habe, die dann im Hintergrund die Funktionen der Kamera über URL Requests aufrufen. Die Webservices rufe ich jetzt via Ajax auf der gleichen IP (wie die der SmartVISU) auf. Problem war weg.

Also PHP Code in diesem Sinne:

switch ((String)$request->url_elements[2]) {
            case "moveRight":                
                $return = $this->makeCameraCall('http://192.168.178.40/cgi/ptdc.cgi?command=set_relative_pos&posX=10&posY=0');
                break;
            case "moveLeft":
                $return = $this->makeCameraCall('http://192.168.178.40/cgi/ptdc.cgi?command=set_relative_pos&posX=-10&posY=0');
                break;
            case "moveUp":
                $return = $this->makeCameraCall('http://192.168.178.40/cgi/ptdc.cgi?command=set_relative_pos&posX=0&posY=10');
                break;
            case "moveDown":
                $return = $this->makeCameraCall('http://192.168.178.40/cgi/ptdc.cgi?command=set_relative_pos&posX=-0&posY=-10');
                break;
            case "userPatrol":
                $return = $this->makeCameraCall('http://192.168.178.40/cgi/ptdc.cgi?command=user_patrol');
                break;
        }