Autor Thema: JPG-Stream mit Javascript einbinden  (Gelesen 294 mal)

Offline Sailor

  • Developer
  • Sr. Member
  • ****
  • Beiträge: 944
  • und es werden immer mehr...
JPG-Stream mit Javascript einbinden
« am: 21 April 2017, 11:20:01 »
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>

******************************
Raspberry Pi mit DbLog, HomeMatic HMLAN
13x HM-SEC-SC; 11x HM-TC-IT-WM-W-EU; 13x HM-CC-RT-DN; 03x HM-Sec-SD; 01x HM-WDS10-TH-O; km200 mit Buderus GB172

Offline rudolfkoenig

  • Administrator
  • Hero Member
  • *****
  • Beiträge: 16234
Antw:JPG-Stream mit Javascript einbinden
« Antwort #1 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

Offline Sailor

  • Developer
  • Sr. Member
  • ****
  • Beiträge: 944
  • und es werden immer mehr...
Antw:JPG-Stream mit Javascript einbinden
« Antwort #2 am: 21 April 2017, 13:33:08 »
Hallo Rudi

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
******************************
Raspberry Pi mit DbLog, HomeMatic HMLAN
13x HM-SEC-SC; 11x HM-TC-IT-WM-W-EU; 13x HM-CC-RT-DN; 03x HM-Sec-SD; 01x HM-WDS10-TH-O; km200 mit Buderus GB172

Offline rudolfkoenig

  • Administrator
  • Hero Member
  • *****
  • Beiträge: 16234
Antw:JPG-Stream mit Javascript einbinden
« Antwort #3 am: 21 April 2017, 13:48:32 »
Zitat
Bei 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.

Offline Sailor

  • Developer
  • Sr. Member
  • ****
  • Beiträge: 944
  • und es werden immer mehr...
Antw:JPG-Stream mit Javascript einbinden
« Antwort #4 am: 21 April 2017, 17:25: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.

******************************
Raspberry Pi mit DbLog, HomeMatic HMLAN
13x HM-SEC-SC; 11x HM-TC-IT-WM-W-EU; 13x HM-CC-RT-DN; 03x HM-Sec-SD; 01x HM-WDS10-TH-O; km200 mit Buderus GB172

Offline rudolfkoenig

  • Administrator
  • Hero Member
  • *****
  • Beiträge: 16234
Antw:JPG-Stream mit Javascript einbinden
« Antwort #5 am: 21 April 2017, 17:46:33 »
Kannst du im Browser
http://192.168.178.21/tmpfs/auto.jpg?1234567890
richtig anzeigen?

Offline Sailor

  • Developer
  • Sr. Member
  • ****
  • Beiträge: 944
  • und es werden immer mehr...
Antw:JPG-Stream mit Javascript einbinden
« Antwort #6 am: 21 April 2017, 19:53:25 »
Kannst du im Browser
http://192.168.178.21/tmpfs/auto.jpg?1234567890
richtig anzeigen?

Jawohl, das ist ja das Komische!
« Letzte Änderung: 21 April 2017, 19:57:11 von Sailor »
******************************
Raspberry Pi mit DbLog, HomeMatic HMLAN
13x HM-SEC-SC; 11x HM-TC-IT-WM-W-EU; 13x HM-CC-RT-DN; 03x HM-Sec-SD; 01x HM-WDS10-TH-O; km200 mit Buderus GB172

Offline rudolfkoenig

  • Administrator
  • Hero Member
  • *****
  • Beiträge: 16234
Antw:JPG-Stream mit Javascript einbinden
« Antwort #7 am: 21 April 2017, 20:27:16 »
Sieht du was Erwaehnenswertes in der JavaScript Console?
Evtl. auf dem Netzwerk-Tab?

Offline Sailor

  • Developer
  • Sr. Member
  • ****
  • Beiträge: 944
  • und es werden immer mehr...
Antw:JPG-Stream mit Javascript einbinden
« Antwort #8 am: 21 April 2017, 20:44:11 »
Sieht du was Erwaehnenswertes in der JavaScript Console?
Evtl. auf dem Netzwerk-Tab?
Nein, nichts Auffälliges...


« Letzte Änderung: 21 April 2017, 20:49:38 von Sailor »
******************************
Raspberry Pi mit DbLog, HomeMatic HMLAN
13x HM-SEC-SC; 11x HM-TC-IT-WM-W-EU; 13x HM-CC-RT-DN; 03x HM-Sec-SD; 01x HM-WDS10-TH-O; km200 mit Buderus GB172

Offline Sailor

  • Developer
  • Sr. Member
  • ****
  • Beiträge: 944
  • und es werden immer mehr...
Antw:JPG-Stream mit Javascript einbinden
« Antwort #9 am: 25 April 2017, 19:41:53 »
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
******************************
Raspberry Pi mit DbLog, HomeMatic HMLAN
13x HM-SEC-SC; 11x HM-TC-IT-WM-W-EU; 13x HM-CC-RT-DN; 03x HM-Sec-SD; 01x HM-WDS10-TH-O; km200 mit Buderus GB172

Offline rudolfkoenig

  • Administrator
  • Hero Member
  • *****
  • Beiträge: 16234
Antw:JPG-Stream mit Javascript einbinden
« Antwort #10 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.

Offline Sailor

  • Developer
  • Sr. Member
  • ****
  • Beiträge: 944
  • und es werden immer mehr...
Antw:JPG-Stream mit Javascript einbinden
« Antwort #11 am: 25 April 2017, 20:27:48 »
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

Zitat
jquery.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
« Letzte Änderung: 25 April 2017, 20:31:01 von Sailor »
******************************
Raspberry Pi mit DbLog, HomeMatic HMLAN
13x HM-SEC-SC; 11x HM-TC-IT-WM-W-EU; 13x HM-CC-RT-DN; 03x HM-Sec-SD; 01x HM-WDS10-TH-O; km200 mit Buderus GB172

Offline rudolfkoenig

  • Administrator
  • Hero Member
  • *****
  • Beiträge: 16234
Antw:JPG-Stream mit Javascript einbinden
« Antwort #12 am: 25 April 2017, 21:03:08 »
<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.

Offline Sailor

  • Developer
  • Sr. Member
  • ****
  • Beiträge: 944
  • und es werden immer mehr...
Antw:JPG-Stream mit Javascript einbinden
« Antwort #13 am: 28 April 2017, 08:15:03 »
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
******************************
Raspberry Pi mit DbLog, HomeMatic HMLAN
13x HM-SEC-SC; 11x HM-TC-IT-WM-W-EU; 13x HM-CC-RT-DN; 03x HM-Sec-SD; 01x HM-WDS10-TH-O; km200 mit Buderus GB172