JPG-Stream mit Javascript einbinden

Begonnen von Sailor, 21 April 2017, 11:20:01

Vorheriges Thema - Nächstes Thema

Sailor

Ein herzerfrischendes "Moin" vom hintern-Deich vorweg

Ich brauche mal die Hilfe an die Erleuchteten unter uns, die sich sowohl mit dem FHEMWEB - Interface auskennen als auch mit Javascript.

Ich habe das Problem, dass ich meine IP-Kamera als Live-Stream erfolgreich in fhem eingebunden hatte.

Zunächst per weblink iFrame - Das funktionierte ganz früher. Dann hat Firefox beschlossen keine iFrames mehr von fremden Hosts (Andere IP) zuzulassen und "Aus war die Maus".

Dann hatte ich es mit "weblink htmlCode <embed..." realisiert wobei ich auf den das Plugin von VLC zugegriffen und einen rtsp Stream geladen habe.
Dann hat Firefox beschlossen die Unterstützung für alle NPAPI-Plugins im März 2017 einzustellen. Und wieder war "Aus die Maus"

Jetzt versuche ich den Teil der mobilen Ansicht der Weboberfläche der Kamera einzubinden die mir den kontinuierlichen Strem der JPG-Dateien anzeigt. Den Code der Webseite habe ich angefügt. Auf dem Bild erkennt man die Zahl hinter auto.jpg? welche sich im Takt der Frames laufend ändert.

Meine Frage: Wie kann ich diese Webseite in fhem so einbinden, das sich die jpg-Bilder - wie auf dem Web-Interface der Kamera - ständig refreshen. Also, wo muss welcher Teil (JAVA-Skript) gespeichert und innerhalb von fhem (weblink?) eingebunden wie werden?

Ich beiße mir schon seit 2 Tagen die Zähne aus.

Danke für Eure Hilfe!

Gruß
    Sailor




<html><head>
<title>Video Mobile</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<script type="text/javascript" src="js/language.js"></script><script src="/web/English/language.js"></script>
<script language="javascript">
<!--
var img = new Image();
var imgObj;

function preload()
{
img.src='/tmpfs/auto.jpg?'+new Date;
}

function changesrc()
{
img1.src=img.src;
preload();
setTimeout(changesrc,3500);
}

function update()
{
imgObj = document.getElementById('img1');

imgObj.src = img.src;
img.src = "/tmpfs/auto.jpg?" + (new Date()).getTime();
}

function takeError()
{
img.src = "/tmpfs/auto.jpg?" + (new Date()).getTime();
}

function startonload()
{
img.src = "/tmpfs/auto.jpg?" + (new Date()).getTime();
img.onerror=takeError;
img.onload=update;
}

function load()
{
if (navigator.appName.indexOf("Microsoft IE Mobile") != -1)
{
preload();
changesrc();
return;
}
startonload();
}

function ptzUpSubmit()
{
form1.action="cgi-bin/hi3510/ytup.cgi";
form1.submit();
}

function ptzDownSubmit()
{
form1.action="cgi-bin/hi3510/ytdown.cgi";
form1.submit();
}

function ptzLeftSubmit()
{
form1.action="cgi-bin/hi3510/ytleft.cgi";
form1.submit();
}

function ptzRightSubmit()
{
form1.action="cgi-bin/hi3510/ytright.cgi";
form1.submit();
}

//-->
</script>
</head>
<body onload="load()">
<form name="form1" method="get" target="test">
</form>
<p><input value="↑" name="B3" onclick="ptzUpSubmit()" type="button">
<input value="↓" name="B2" onclick="ptzDownSubmit()" type="button">
<input value="←" name="B1" onclick="ptzLeftSubmit()" type="button">
<input value="→" name="B0" onclick="ptzRightSubmit()" type="button">
<button type="button" name="B4" onclick="location.reload()"><script type="text/javascript">document.write(str_refresh);</script>Refresh</button>
</p>
<p><img id="img1" src="http://192.168.178.21/tmpfs/auto.jpg?1492765347275" border="0"></p>
<iframe name="test" style="none" width="0" height="0"></iframe>

</body></html>


******************************
Man wird immer besser...

rudolfkoenig

1. Du koenntest ein nginx/apache/etc Proxy aufsetzen, der die Seite der Webcam anzeigt, aber zusaetzlich den HTTP Header
X_Frame-Options: ALLOW-FROM http://meinfhemhost:port/fhem
hinzufuegt. Habs nicht getestet, kann mich also irren.


2.
defmod wl weblink htmlCode <script type="text/javascript">function vidload(){ $("#vidimg").attr("src","http://videoserver/tmpfs/auto.jpg?"+(new Date).getTime());;setTimeout(vidload,3000)} vidload()</script><img id="vidimg">
videoserver muss angepasst werden

Sailor

Hallo Rudi

Zitat von: rudolfkoenig am 21 April 2017, 12:05:00
1. Du koenntest ein nginx/apache/etc Proxy aufsetzen, der die Seite der Webcam anzeigt, aber zusaetzlich den HTTP Header
X_Frame-Options: ALLOW-FROM http://meinfhemhost:port/fhem
hinzufuegt. Habs nicht getestet, kann mich also irren.


2.
defmod wl weblink htmlCode <script type="text/javascript">function vidload(){ $("#vidimg").attr("src","http://videoserver/tmpfs/auto.jpg?"+(new Date).getTime());;setTimeout(vidload,3000)} vidload()</script><img id="vidimg">
videoserver muss angepasst werden

Habe hinsichtlich deines Vorschlags 2 mal folgendes probiert:


htmlCode <script type="text/javascript">function vidload(){ $("#vidimg").attr("src","http://192.168.178.21/tmpfs/auto.jpg?"+(new Date).getTime());;setTimeout(vidload,3000)} vidload()</script><img id="vidimg" src="http://192.168.178.21/tmpfs/auto.jpg" border="0"></img>

htmlCode <script type="text/javascript">function vidload(){ $("#vidimg").attr("src","http://192.168.178.21/tmpfs/auto.jpg?"+(new Date).getTime());;setTimeout(vidload,3000)} vidload()</script><img id="vidimg" border="0"></img>

htmlCode <script type="text/javascript">function vidload(){ $("#vidimg").attr("src","http://192.168.178.21/tmpfs/auto.jpg?"+(new Date).getTime());;setTimeout(vidload,3000)} vidload()</script><img id="#vidimg" border="0"></img>

htmlCode <script type="text/javascript">function vidload(){ $("#img1").attr("src","http://192.168.178.21/tmpfs/auto.jpg?"+(new Date).getTime());;setTimeout(vidload,3000)} vidload()</script><img id="img1" border="0"></img>


Bei Variante 1 bekomme ich das gewünschte Bild genau einmal, und dann wird im vorgegebenen Takt mit einem "broken Image" Symbol geantwortet.

Bei Variante 2-3 kommt das "broken Image" Symbol von Anfang an in der vorgegebenen Taktrate.

Wir sind schon fast da... Das kann sich hier nur noch um eine Kleinigkeit handeln...

Gruß
   Sailor
******************************
Man wird immer besser...

rudolfkoenig

ZitatBei Variante 1 bekomme ich das gewünschte Bild genau einmal, und dann wird im vorgegebenen Takt mit einem "broken Image" Symbol geantwortet.
Offensichtlich kann die Kamera kein ?Zahl, auch wenn es in deinem ersten Post so im Code steht. Evtl kannst du es weglassen, auf das Risiko hin, dass der Browser die Bilder aus dem Cache holt.

Sailor

Zitat von: rudolfkoenig am 21 April 2017, 13:48:32
Offensichtlich kann die Kamera kein ?Zahl, auch wenn es in deinem ersten Post so im Code steht. Evtl kannst du es weglassen, auf das Risiko hin, dass der Browser die Bilder aus dem Cache holt.


htmlCode <script type="text/javascript">function vidload(){ $("#vidimg").attr("src","http://192.168.178.21/tmpfs/auto.jpg?"+(new Date).getTime());;setTimeout(vidload,1100)} vidload()</script><img id="vidimg" src="http://192.168.178.21/tmpfs/auto.jpg" border="0"></img>
htmlCode <script type="text/javascript">function vidload(){ $("#vidimg").attr("src","http://192.168.178.21/tmpfs/auto.jpg"+(new Date).getTime());;setTimeout(vidload,1100)} vidload()</script><img id="vidimg" src="http://192.168.178.21/tmpfs/auto.jpg" border="0"></img>
htmlCode <script type="text/javascript">function vidload(){ $("#vidimg").attr("src","http://192.168.178.21/tmpfs/auto.jpg");;setTimeout(vidload,1100)} vidload()</script><img id="vidimg" src="http://192.168.178.21/tmpfs/auto.jpg" border="0"></img>

bringen keine Besserung.

Die letzte Variante allerdings lässt das Bild stehen... Ich vermute du liegst mit dem gecachten Bild richtig.

******************************
Man wird immer besser...

rudolfkoenig


Sailor

#6
Zitat von: rudolfkoenig am 21 April 2017, 17:46:33
Kannst du im Browser
http://192.168.178.21/tmpfs/auto.jpg?1234567890
richtig anzeigen?

Jawohl, das ist ja das Komische!
******************************
Man wird immer besser...

rudolfkoenig

Sieht du was Erwaehnenswertes in der JavaScript Console?
Evtl. auf dem Netzwerk-Tab?

Sailor

#8
Zitat von: rudolfkoenig am 21 April 2017, 20:27:16
Sieht du was Erwaehnenswertes in der JavaScript Console?
Evtl. auf dem Netzwerk-Tab?
Nein, nichts Auffälliges...


******************************
Man wird immer besser...

Sailor

Hallo Rudi

ich bin schon mal ein kleines Stück weiter...

Ich habe auf dem gleichen Server wie mein fhem - System (192.168.178.7) eine neue html-Seite generiert die auf Basis der Kamera-Website basiert.


<html>
<head>
<title>Video Mobile</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<script type="text/javascript" src="js/language.js"></script>
<script language="javascript">
<!--
var img = new Image();
var imgObj;

function preload()
{
img.src='http://192.168.178.21/tmpfs/auto.jpg?'+new Date;
}

function changesrc()
{
img1.src=img.src;
preload();
setTimeout(changesrc,3500);
}

function update()
{
imgObj = document.getElementById('img1');

imgObj.src = img.src;
img.src = "http://192.168.178.21/tmpfs/auto.jpg?" + (new Date()).getTime();
}

function takeError()
{
img.src = "http://192.168.178.21/tmpfs/auto.jpg?" + (new Date()).getTime();
}

function startonload()
{
img.src = "http://192.168.178.21/tmpfs/auto.jpg?" + (new Date()).getTime();
img.onerror=takeError;
img.onload=update;
}

function load()
{
if (navigator.appName.indexOf("Microsoft IE Mobile") != -1)
{
preload();
changesrc();
return;
}
startonload();
}


//-->
</script>
</head>
<body onLoad="load()">
<p><img id="img1" border="0" src="http://192.168.178.21/tmpfs/auto.jpg"></p>
</body>
</html>


Und siehe da... Es funktioniert!
Siehe Camera006.png - Man achte auf die unterschiedlichen IP-Adressen.

Doch wenn ich diesen Code
htmlCode <html> <head> <script type="text/javascript" src="js/language.js"></script> <script language="javascript"> var img = new Image(); var imgObj; function preload() { img.src='http://192.168.178.21/tmpfs/auto.jpg?'+new Date; } function changesrc() { img1.src=img.src; preload(); setTimeout(changesrc,3500); } function update() { imgObj = document.getElementById('img1'); imgObj.src = img.src; img.src = "http://192.168.178.21/tmpfs/auto.jpg?" + (new Date()).getTime(); } function takeError() { img.src = "http://192.168.178.21/tmpfs/auto.jpg?" + (new Date()).getTime(); } function startonload() { img.src = "http://192.168.178.21/tmpfs/auto.jpg?" + (new Date()).getTime(); img.onerror=takeError; img.onload=update; } function load() { if (navigator.appName.indexOf("Microsoft IE Mobile") != -1) { preload(); changesrc(); return; } startonload(); } </script> </head> <body onLoad="load()"> <p><img id="img1" border="0" src="http://192.168.178.21/tmpfs/auto.jpg"></p> </body> </html>

in die weblink definition eingebe bekomme ich eine Fehlermeldung
Siehe Camera007.png

Nur welches der vielen "<" meint er denn bloß???

Gruß
    Sailor
******************************
Man wird immer besser...

rudolfkoenig

1. versuch den Text auf mehrere Zeilen zu verteilen, evtl. ist die Fehlermeldung genauer.
2. ich meine IE gibt bei Fehlermeldungen auch Spaltennummer aus.

Sailor

#11
Zitat von: rudolfkoenig am 25 April 2017, 20:06:54
1. versuch den Text auf mehrere Zeilen zu verteilen, evtl. ist die Fehlermeldung genauer.
2. ich meine IE gibt bei Fehlermeldungen auch Spaltennummer aus.

Tja, hilft mir leider auch nicht weiter.

htmlCode
<html>
<head>
<script type="text/javascript" src="js/language.js"></script>
<script language="javascript">
var img = new Image();
var imgObj; function preload()
{
img.src='http://192.168.178.21/tmpfs/auto.jpg?'+new Date;
}
function changesrc()
{
img1.src=img.src; preload();
setTimeout(changesrc,3500);
}
function update()
{
imgObj = document.getElementById('img1');
imgObj.src = img.src;
img.src = "http://192.168.178.21/tmpfs/auto.jpg?" + (new Date()).getTime();
}
function takeError()
{
img.src = "http://192.168.178.21/tmpfs/auto.jpg?" + (new Date()).getTime();
}
function startonload()
{
img.src = "http://192.168.178.21/tmpfs/auto.jpg?" + (new Date()).getTime();
img.onerror=takeError;
img.onload=update;
}
function load()
{
if (navigator.appName.indexOf("Microsoft IE Mobile") != -1)
{
preload();
changesrc();
return;
}
startonload();
}
</script>
</head>
<body onLoad="load()">
<img id="img1" border="0" src="http://192.168.178.21/tmpfs/auto.jpg">
</body>
</html>


Die Meldung kommt schon wenn ich versuche die DEF zu modifizieren

Zitatjquery.min.js line 1:
SyntaxError: expected expression, got '<'

Und sobald ich die folgende verdächtige Zeile lösche
<script type="text/javascript" src="js/language.js"></script>

kommt zwar keine Fehlermeldung mehr, aber das Bild steht wieder auf den ersten reload.

Gruss
    Sailor
******************************
Man wird immer besser...

rudolfkoenig

<html> darf mWn nicht innerhalb eines HTML Dokumentes erscheinen (bis auf iFrames, aber das ist was anderes), deswegen haben wir es in FHEM/fhemweb.js missbraucht, um bereits HTML formatierte Daten als solches und nicht als Text darzustellen. Die Meldung kommt aus dieser Ecke.

<head> und <body>, insb. body onload sind an dieser Stelle auch Fehl am Platz.
Im Gegensatz zu meinem Vorschlag laedt dein Script das Bild in einem offline Objekt, und aktualisiert das sichtbare Bild erst dann, wenn das Objekt geladen ist. Das passiert in einer Endlosschleife, ohne Pause.

Sailor

Wennich aber <html>, <head> und <body> rausschmeiße, wird es auch nicht besser...

Er lädt das Bild genau einmal und das wars.
Es müsste doch möglich sein, eine Infinity-Schleife zu generieren...

Gruß
   Sailor
******************************
Man wird immer besser...

EdlerMann

Hallo Sailor,

hast du es mittlerweile hinbekommen? Ich habe momentan leider das selbe Problem... .

Grüße Andreas